Posts

Showing posts with the label JS

How to create blogger sitemap per tables 100% Worked

Image
Stylish blogger sitemap per tables Tutorial Create Blogger Sitemap Per Tables: Open dashboard blogger. Navigate to pages tab Create New Page Enter the code below in html editor mode <div-wrapper id='wrapper'><div-wrapper dir="ltr" style="text-align:left;" trbidi="on"><div-wrapper class="table-of-content" id="table-of-content"><div-wrapper class="loading"><img class='loading' src='https://res.cloudinary.com/dimaslanjaka/image/fetch/http://www.amcsscentry.gov.in/asset/images/please_wait.gif'></div-wrapper></div-wrapper></div-wrapper><div-wrapper><script async='async' custom-element='div-wrapper' src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <link href='https://codepen.io/dimaslanjaka/pen/eWWzrL.css' rel='stylesheet'> <style type="text/css&q

How To Create a Blogger Contact Popup Comes With Google Maps

Image
The function of the contact form on a blog is to make it easier for blog visitors to contact the blog admin.   Blogger itself has provided a contact form that is already connected with the Gmail account admin blog.   Well this time I will share how to create a contact form Blogger popup with Google Maps equipped, so this (Google Maps) will be more to give visitors trust to the blog admin, especially if the blog is used for business or online store.   Visitors or consumers will be more confident because the business location is clear.   DEMO Please try on the menu " Contact " Interested to try it?   Please follow the steps below.   The first thing to do is to register your business location on Google My Business by storing our business location on Google Maps.   If you have not yet saved your business location on Google Maps, please follow the following tutorial:   How to Spot Your Places In Google Maps   And it will be better, verify also where your business is

Cara convert HTML ke Javascript document.write otomatis

Image
Bagaimana cara convert HTML ke Javascript document.write secara otomatis Biasanya orang yang membuat website atau blog yang menggunakan fitur javascript biasanya bingung dalam membuat LIKE BOX maupun SOCIAL SHARE BOX untuk website nya. Agar tombol like atau share dapat tepat merujuk like atau share terhadap artikel yang dikunjungi visitor. Nah berikut cara nya: 1. Masuk ke website berikut ini : HTML to Javascript Converter 2. Copy Kode HTML yang anda ingin terapkan dalam penerjemahan javascript. Kemudian paste Kode HTML tersebut ke dalam box yang sudah di sediakan. Kemudian klik Convert to javascript syntax . Selesai. HTML anda sudah siap untuk di terapkan di javascript untuk di print secara dinamis.

Javascript detect bot crawler

Image
function botCheck(){ var botPattern = "(googlebot\/|Googlebot-Mobile|Googlebot-Image|Google favicon|Mediapartners-Google|bingbot|slurp|java|wget|curl|Commons-HttpClient|Python-urllib|libwww|httpunit|nutch|phpcrawl|msnbot|jyxobot|FAST-WebCrawler|FAST Enterprise Crawler|biglotron|teoma|convera|seekbot|gigablast|exabot|ngbot|ia_archiver|GingerCrawler|webmon |httrack|webcrawler|grub.org|UsineNouvelleCrawler|antibot|netresearchserver|speedy|fluffy|bibnum.bnf|findlink|msrbot|panscient|yacybot|AISearchBot|IOI|ips-agent|tagoobot|MJ12bot|dotbot|woriobot|yanga|buzzbot|mlbot|yandexbot|purebot|Linguee Bot|Voyager|CyberPatrol|voilabot|baiduspider|citeseerxbot|spbot|twengabot|postrank|turnitinbot|scribdbot|page2rss|sitebot|linkdex|Adidxbot|blekkobot|ezooms|dotbot|Mail.RU_Bot|discobot|heritrix|findthatfile|europarchive.org|NerdByNature.Bot|sistrix crawler|ahrefsbot|Aboundex|domaincrawler|wbsearchbot|summify|ccbot|edisterbot|seznambot|ec2linkfinder|gslfbot|aihitbot|intelium_bot|facebookexternal

(FontAwesome) CSS3 Text Animation

Image
Text Animation CSS and FontAwesome Import font-awesome from cdn ->  https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css CSS: @import url('https://fonts.googleapis.com/css?family=Anton|Roboto'); .word { font-family: 'Anton', sans-serif; perspective: 1000px; perspective-origin: 200px 40px; } .word span { cursor: pointer; display: inline-block; font-size: 100px; user-select: none; line-height: .8; } .word span:nth-child(1).active { animation: balance 1.5s ease-out; transform-origin: 0% 100% 0px; } @keyframes balance { 0%, 100% { transform: rotate(0deg); } 30%, 60% { transform: rotate(-45deg); } } .word span:nth-child(2).active { animation: shrinkjump 1s ease-in-out; transform-origin: bottom center; } @keyframes shrinkjump { 10%, 35% { transform: scale(2, .2) translate(0, 0); } 45%, 50% { transform: scale(1) translate(0, -150px); } 80% { transform: scale(1) translate(0, 0); } } .word span:n

(SCSS) Responsive Menu Hover Effect

Responsive Menu Hover Effect : Call jquery library -> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' async='async'></script> SCSS -> @import url("https://fonts.googleapis.com/css?family=Anton|Josefin+Sans"); ::-webkit-scrollbar { width: 10px; height: 10px; background-color: white; border-top: 1px solid #000; } ::-webkit-scrollbar-thumb { background-color: #1a1a1a; height: 5px; } * { box-sizing: border-box; } /*html, body { width: 100%; min-height: 100%; margin: 0; padding: 0; background: #000; } .page { width: 720px; float: left; position: relative; left: 50%; margin-left: -360px; padding: 10px; } .page h1, .page p { float: left; width: 100%; color: #fff; font-family: 'Josefin Sans', sans-serif; } .page h1 { text-transform: uppercase; margin-top: 115px; text-align: center; letter-spacing: 10px; } .page p { line-height: 20pt; font-size: 14pt

How to create sticky widget on sidebar blogger

Image
In the previous article I once shared a tutorial on Installing Sticky Functions On Blogger Widgets , this time I will share a tutorial with the same function that is to make a particular widget sticky or float following the page when scrolled down and up. This tutorial is an improvement as well as answering your comment from the previous tutorial which when the page is scrolled down sticky widget will pass the Footer Wrapper and it will be a bit annoying because it blocks the widgets that are installed in the Footer area. I will share this code more suitable to be installed on all content in Sidebar or can also be installed on one particular widget. For buddy who want to try it, please follow tutorial  How to Make Sticky Widget in Sidebar Blog . How to Create a Sticky Widget in Blog Sidebar 1. Login to Blogger --> Go to Template editor -->  Put below script before </body> tag <script type='text/javascript'> //<![CDATA[ $(function() { if ($(&#

Cara menambah query di html image source

Image
Cara menambahkan query di source image. Di World Wide Web , Query String adalah bagian dari uniform resource locator (URL) yang berisi data yang tidak sesuai dengan struktur jalur hierarkis. Query String umumnya mencakup bidang yang ditambahkan ke URL dasar oleh browser Web atau aplikasi klien lainnya, misalnya sebagai bagian dari bentuk HTML. Server web dapat menangani permintaan Hypertext Transfer Protocol baik dengan membaca file dari sistem file berdasarkan jalur URL atau dengan menangani permintaan menggunakan logika yang spesifik untuk jenis sumber daya. Dalam kasus di mana logika khusus dipanggil, string kueri akan tersedia untuk logika tersebut untuk digunakan dalam pemrosesannya, bersama dengan komponen jalur URL. Nah bersangkutan dengan artikel sebelumnya: Membuat semua link dan source html http menjadi https . Kali ini saya akan share bagaimana cara menambah Query String Atau Back Query di html source image. Berikut kode untuk menambah Query String di html image sou

Simple Recent Posts Blogger Plus Thumbnails

Image
Installing a recent post widget is one way to minimize bounce rate blog by providing information for the latest posts on readers. With so readers will easily find the most warm posts on the blog. Many kinds of recent post widgets like recent posts or recent carousel shaped posts. Well this time I will share a blogger widget recent posts are quite simple and stored in the sidebar blog. In addition to simple, recent posts widget has a fairly light loading, so you need to try also hehehe ... Demo If you are interested to try it, please follow the steps below. Please save the following CSS code above </head> code (you may need to customize some sections to customize it to the theme you are using). <style> /*<![CDATA[*/ ul#recent-posts{width:100%;margin:0 auto;padding:0!important;list-style-type:none} ul#recent-posts li{background:#FFF;padding:0!important;margin-bottom:10px;overflow:hidden;width:100%;height:auto;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-

Membuat semua link dan source html http menjadi https

Image
Yo guys, kali ini akan saya share bagaimana cara mengubah semua source link atau iframe yang tidak menggunakan https. Mula mula anda harus mengetahui APAKAH HTTPS BAGUS UNTUK SEO? Jika Anda telah melakukan beberapa pencarian online (mencoret pesaing Anda, mungkin? Mencari perusahaan untuk merombak dapur Anda?), Anda mungkin pernah memperhatikan situs HTTP dan HTTPS. Apa perbedaan antara keduanya, dan apakah itu penting dalam hal pemasaran online? Senang kamu tanya Kami baru saja menulis posting blog tentang alasan situs Anda harus HTTPS , tapi posting ini masuk ke rincian lebih lanjut, terutama yang berkaitan dengan dampak keamanan situs terhadap SEO. Apa itu HTTPS? Mari kita mulai dengan dasar-dasarnya. "S" di bagian akhir "http" dari sebuah URL berarti situs web tersebut aman. HTTPS (Hypertext Transport Protocol Security), atau situs yang aman mencakup kunci SSL 2048-bit dan dapat melind

Create a Countdown Clock for the purposes of 1 Hour Promo

Image
If you happened to be holding promos and goods and service also aired on the blog, maybe one of the ways to attract the interest of visitors to follow ongoing promo can be tested by adding a countdown. With such expected visitors will jump list or follow the promo because see calculate a pullback so they feel worried not goto the promo hehehe .... For that I find simple countdown with javascript in JSFiddle Snippet . which later became Fox I look H:M:S and add the style as in the Fiddle below. Demo If interested to try it out please use the codes below. 1. Copy the CSS code below and save it in the style of your blog. @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(htt

Tutorial Membuat Blogspot Safelink Converter Work 100%

Image
Dikesempatan kali ini saya bakal* share Tutorial Membuat Blogspot Safelink Converter Work 100%. Apa blog safelink converter tersebut* ?? Yaitu blog guna* mengkonversi atau menciptakan* encypted link untuk seluruh* link dari suatu* blog supaya* link-link itu* menjadi aman dengan dikonversi menjadi base64. Dan andai* ada pengunjung yang meng-klik link itu* maka pengunjung bakal* dibawa ke halaman redirect safelink converter guna* mendapatkan link aslinya. Untuk* sobat yang memiliki* blog download sobat dapat* membuat blog safelink ini guna* mendapatkan pendapatan* tambahan dari iklan yang sobat pasang. Berikut Tutorial Membuat Blogspot Safelink Converter Work 100%, simak baik" dengan teliti tutorial ini: Pertama silakan bikin* blog baru dan ganti template Kompi-ajaib Safelink Converter download Disini .Upload Ke Blog Baru kamu. Lalu edit HTML lewat blogger. Langkah-langkah Build Safelink Converter (Jika sobat memakai* domain TLD (misalnya: domain.com, domain.net, domain.org) si

Widget untuk meningkatkan traffic blogger

Hari ini saya akan share widget untuk meningkatkan traffic blog setiap harinya. Script ini bertujuan agar webcrawler ikut membuat tester untuk website anda. Ga pake lama ikuti tutorial dibawah ini: 1. Buka dashboard blogger --> Layout --> Cari mau dibagian manakah yang ingin anda tambah kan widget ini. Saran saya sih di footer atau sidebar. --> add widget html/javascript --> masukkan kode berikut ini: <script async='async' type="text/javascript"> function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); } var ref = getQueryVariable("target"); //add target= in last iframe source var url = window.location.href; var host = window.location.hostname;   document.write('<a target="_blank" href="https://geo

Cara Simple Membuat Blogger Safelink Converter 2017 100% Work

Image
Kali ini saya akan share bagaimana cara simple membuat Blogger Safelink Converter. Requirements: jQuery Library Tentunya blog. Bisa semua macam jenis blog. Fitur: Membuat semua external link menjadi redirect ke halaman Safelink Converter. Meningkatkan Traffic blog Cocok buat blog yang bertema download. Tutorial: Pembuatan Halaman Statis untuk Safelink Redirector. Buat Halaman/Page Baru untuk Safelink redirector ( Masuk Dashboard blogger -> Pages -> Add New). Isi title halaman Safelink redirector sesuai keinginan anda. Contoh -> https://web-manajemen.blogspot.com/p/redirect.html Isi body halaman anda sesuai keinginan anda.  URL halaman Safelink Redirector kamu akan sama dengan nama judul halaman Safelink Redirector kamu (misal: Title= Link Redirector maka URL nya= link-redirector.html jadi full URL nya= http://namaBlog-Kamu.blogspot.com/p/link-redirector.html). (Jangan di save dahulu halamannya, ikuti dulu tutorial ini sampai selesai). Ok. Bagian hal

Responsive RSS Search Form With Bootstraps 4.0.0-beta

Image
Bootstraps 4, HTML, CSS, dan JS Framework yang paling populer di dunia. Latest Bootstraps 4 CDN Bila Anda hanya perlu menyertakan CSS dan JS Bootstrap yang dikompilasi, gunakan CDN Bootstrap, yang disediakan bebas oleh kawan-kawan Max CDN. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="htt

Update Code Auto Syntax Highlighter Prettyprint js

Image
Jumpa lagi dengan topik JavaScript Dan jQuery. Sebelumnya saya sudah share Cara menambah syntax highlighter dengan prettyprint di blog tanpa mengurangi kecepatan loading website 100% Work Tested , namun kali ini saya improvisasi codenya jadi lebih ringan dan simpel. Note: Taruh kode dibawah ini diatas </body></html> //Defer Syntax Higlighter function downloadJSAtOnload() { (function(scripts) { var i = 0, l = scripts.length; for (; i<l; ++i ){ var element = document.createElement("script"); element.src = scripts[i]; document.body.appendChild(element); } })(['https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst']); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; $("pre&q