Info Dicky

Home » Penelusuran Tutorial Blog

Cara Mudah Cek Harga Blog atau Website

Cara Mudah Cek Harga Blog atau Website - Pada artikel kali ini saya akan membagikan informasi mengenai cara mudah cek harga blog atau website. Nah, buat kamu yang ingin mengetahui harga jual dari blog yang kamu miliki kamu bisa mengecek harga jualnya secara online.

Salah satu webiste yang bisa kamu manfaatkan untuk mengecek harga blog atau website yang kamu miliki adalah ceksite.com. Disitus ceksite.com, kamu tidak hanya bisa mengecek harga blog saja, tetapi juga harga jual sebuah website. Namun, harga yang tertera di situs ceksite.com itu bukanlah harga pasti, melainkan masih berupa harga estimasi dari website domain.

Cara Mudah Cek Harga Blog atau Website

Untuk mengecek harga melalui website ceksite.com sangatlah mudah. Berikut penjelasannya.

1. Buka situs ceksite.com.

2. Masukkan URL situs blog atau website kamu serta masukkan kode verifiaksi pada kolom yang telah disediakan.

3. Setelah itu, tekan Hitung. Tunggu beberapa saat hingga prosesnya selesai. Jika sudah selesai, maka hasilnya akan seperti ini.

Itulah harga blog atau situs kamu.

Tambahan

Selain bisa mengetahui estimasi harga blog, kamu juga bisa menayangkan estimasi harga jual blog kamu jika kamu ingin berniat menjualnya. Caranya cukup menekan tombol Pasang Widget/Jual Website.

Situs lain yang bisa kamu manfaatkan untuk mengecek harga jual blog atau situs kamu, yakni :

Itulah cara mudah cek harga blog atau website. Jika ada pertanyaan silahkan ditanyakan di kolom komentar ya!!

Semoga bermanfaat! (http://infodiki.blogspot.com)

Cara Mudah Memasang Kode Script Anti AdBlock di Blogger - Siapa sih yang tidak mengetahui Adblock? Ya, Adblock merupakan salah satu ekstensi yang ada di browser yang masih menimbulkan pro dan kontra. Pro karena sangat menguntungkan bagi pengguna internet. Dan kontra karena sangat merugikan bagi pemilik blog/publisher iklan karena iklan jadi tidak tayang.

Nah, sebagai seorang Blogger kita harus mengatasi permasalahan tersebut dengan memasang kode script anti adblock yang bertujuan agar ketika pengguna internet mengaktifkan adblock di browser mereka, maka akan muncul sebuah notifikasi yang berisi peringatan yang mengharuskan mereka mematikan adblock agar bisa melihat seluruh isi artikel kita dengan iklan yang tayang.

Nah untuk itu, pada artikel kali ini saya akan membagikan tutorial blog tentang cara mudah memasang kode script anti adblock di blogger. Berikut penjelasannya.

Mudah Memasang Kode Script Anti AdBlock di Blogger

1. Buka Blogger. Pilih Tata Letak > Tambahkan Gadget > HTML/JavaScript.
2. Kemudian, copy dan paste kode berikut ini di kolom HTML/JavaScript.

<style>#g207{position:fixed!important;position:absolute;top:0;top:expression
((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document
.body.scrollTop)+"px");
left:0;width:100%;height:100%;background-color:#fff;opacity:0.9;filter:alpha(opacity=90);display:block}#g207 p{opacity:1;filter:none;font:bold 16px Verdana,Arial,sans-serif;text-align:center;margin:20% 0}#g207 p a,#g207 p i{font-size:12px}#g207 ~ *{display:none}</style><noscript><i id=g207><p>Please enable JavaScript!<br />Bitte aktiviere JavaScript!<br />S'il vous pla&icirc;t activer JavaScript!<br />Por favor,activa el JavaScript!<br /><a href="http://antiblock.org/">antiblock.org</a></p></i></noscript><script>(function(w,u){var d=w.document,z=typeof u;function g207(){function c(c,i){var e=d.createElement('i'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('g207')){c('<p>Please disable your ad blocker!<br/>This site is supported by the advertisement <br/> Please disable your ad blocker to support us!!! </p>','g207')}};(function(){var a=['Adrectangle','PageLeaderAd','ad-column','advertising2','divAdBox','mochila-column-right-ad-300x250-1','searchAdSenseBox','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display
)=='none'){return f('#'+a[i])}}}());(function(){var t=g(0,'img'),a=['/adaffiliate_','/adops/ad','/adsales/ad','/adsby.','/adtest.','/ajax/ads/ad','/controller/ads/ad','/pageads/ad','/weather/ads/ad','-728x90-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]!==null){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',g207,false)}else{w.attachEvent('onload',g207)}})(window);</script>

3. Setelah itu, pilih Simpan.
4. Selesai!

Tambahan

Sebelum kamu memasang kode script anti adblock ke blog kamu, kamu harus mempertimbangkannya secara matang. Pasalnya, dibalik kelebihan dari memasang kode anti adblock ke blog, kamu juga akan merasakan kerugiannya.

Karena sebagian besar dari visitor blog kita sangat malas mematikan/menonaktifkan plugin adblock di browser mereka, sehingga mereka akan meninggalkan blog kita. Namun ada juga visitor yang mau menonaktifkan plugin adblocker di browser mereka karena mungkin mereka sangat membutuhkan isi artikel blog kita.

Mau pasang apa tidak kode tersebut tergantung dari diri kamu sendiri. Mau penghasilan blog dari iklan bertambah atau kehilangan banyak visitor? Jawab di kolom komentar ya!!

Semoga bermanfaat! (http://infodiki.blogspot.com)

Dicky Khusnaedy September 02, 2017 Admin Bandung Indonesia

Cara Mudah Memasang Kode Script Anti AdBlock di Blogger

Nah untuk itu, pada artikel kali ini saya akan membagikan tutorial blog tentang cara mudah memasang kode script anti adblock di blogger. Berikut penjelasannya.

Mudah Memasang Kode Script Anti AdBlock di Blogger

1. Buka Blogger. Pilih Tata Letak > Tambahkan Gadget > HTML/JavaScript.
2. Kemudian, copy dan paste kode berikut ini di kolom HTML/JavaScript.

<style>#g207{position:fixed!important;position:absolute;top:0;top:expression
((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document
.body.scrollTop)+"px");
left:0;width:100%;height:100%;background-color:#fff;opacity:0.9;filter:alpha(opacity=90);display:block}#g207 p{opacity:1;filter:none;font:bold 16px Verdana,Arial,sans-serif;text-align:center;margin:20% 0}#g207 p a,#g207 p i{font-size:12px}#g207 ~ *{display:none}</style><noscript><i id=g207><p>Please enable JavaScript!<br />Bitte aktiviere JavaScript!<br />S'il vous pla&icirc;t activer JavaScript!<br />Por favor,activa el JavaScript!<br /><a href="http://antiblock.org/">antiblock.org</a></p></i></noscript><script>(function(w,u){var d=w.document,z=typeof u;function g207(){function c(c,i){var e=d.createElement('i'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('g207')){c('<p>Please disable your ad blocker!<br/>This site is supported by the advertisement <br/> Please disable your ad blocker to support us!!! </p>','g207')}};(function(){var a=['Adrectangle','PageLeaderAd','ad-column','advertising2','divAdBox','mochila-column-right-ad-300x250-1','searchAdSenseBox','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display
)=='none'){return f('#'+a[i])}}}());(function(){var t=g(0,'img'),a=['/adaffiliate_','/adops/ad','/adsales/ad','/adsby.','/adtest.','/ajax/ads/ad','/controller/ads/ad','/pageads/ad','/weather/ads/ad','-728x90-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]!==null){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',g207,false)}else{w.attachEvent('onload',g207)}})(window);</script>

3. Setelah itu, pilih Simpan.
4. Selesai!

Tambahan

Mau pasang apa tidak kode tersebut tergantung dari diri kamu sendiri. Mau penghasilan blog dari iklan bertambah atau kehilangan banyak visitor? Jawab di kolom komentar ya!!

Semoga bermanfaat! (http://infodiki.blogspot.com)

Cara Menyembunyikan Label (Kategori) Posting Tertentu di Homepage Blog - Mungkin ada beberapa alasan yang membuat kamu ingin menyembunyikan atau tidak menampilkan daftar posting berdasarkan kategori (label) tertentu di halaman depan blog kamu.

Salah satu alasan tersebut adalah karena kategori tersebut tidak relevan dengan niche blog. Sehingga dengan menyembunyikan kategori yang tidak relevan tersebut, tentu akan membuat blog kita tetap relevan dan mencerminkan mayoritas konten sesuai dengan niche blog.

Cara Menyembunyikan Label (Kategori) Posting Tertentu di Homepage Blog

Berikut ini cara menyembunyikan postingan label tertentu di homepage blog yang dilansir dari Contoh Blog.

Cara 1

1. Buka Blogger. Pilih Template > Edit HTML.

2. Cari kode <b:include data='post' name='post'/>. Kemudian ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:loop values='data:post.labels' var='label'> 
<b:if cond='data:label.name != &quot;LABEL&quot;'> 
<b:include data='post' name='post' /> </b:if> </b:loop> 
<b:else/> <b:include data='post' name='post' /> </b:if>

Catatan :

Ganti tulisan berwarna merah dengan nama label postingan yang ingin kamu sembunyikan.

3. Save Template!

Cara 2

Jika cara pertama diatas tidak berhasil, kamu bisa mencoba cara kedua berikut ini.

1. Buka Blogger. Pilih Template > Edit HTML.

2. Cari kode berikut ini.

<b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

3. Kemudian ganti dengan kode berikut ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels == &amp;quot;&amp;quot;'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
</b:if>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast'>
<b:if cond='data:label.name != &amp;quot;LABEL NAME&amp;quot;'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
</b:if>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
</b:if>

Catatan :

Ganti tulisan yang berwarna merah dengan nama label yang ingin kamu sembunyikan di homepage blog kamu.

4. Save Template!

Itulah cara menyembunyikan label posting tertentu di homepage blog. Jika masih gagal juga kamu bisa menanyakannya di kolom komentar.

Semoga bermanfaat! (http://infodiki.blogspot.com)

Dicky Khusnaedy August 22, 2017 Admin Bandung Indonesia

Cara Menyembunyikan Label (Kategori) Posting Tertentu di Homepage Blog

Berikut ini cara menyembunyikan postingan label tertentu di homepage blog yang dilansir dari Contoh Blog.

Cara 1

1. Buka Blogger. Pilih Template > Edit HTML.

2. Cari kode <b:include data='post' name='post'/>. Kemudian ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:loop values='data:post.labels' var='label'> 
<b:if cond='data:label.name != &quot;LABEL&quot;'> 
<b:include data='post' name='post' /> </b:if> </b:loop> 
<b:else/> <b:include data='post' name='post' /> </b:if>

Catatan :

Ganti tulisan berwarna merah dengan nama label postingan yang ingin kamu sembunyikan.

3. Save Template!

Cara 2

Jika cara pertama diatas tidak berhasil, kamu bisa mencoba cara kedua berikut ini.

1. Buka Blogger. Pilih Template > Edit HTML.

2. Cari kode berikut ini.

<b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

3. Kemudian ganti dengan kode berikut ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels == &amp;quot;&amp;quot;'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
</b:if>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast'>
<b:if cond='data:label.name != &amp;quot;LABEL NAME&amp;quot;'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
</b:if>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
</b:if>

Catatan :

Ganti tulisan yang berwarna merah dengan nama label yang ingin kamu sembunyikan di homepage blog kamu.

Cara Membuat Sitemap Keren Otomatis dan Responsive di Blogger - Sitemap atau Daftar Isi merupakan salah satu halaman blog yang wajib ada pada sebuah blog. Pasalnya, dengan adanya halaman daftar isi atau sitemap tentu akan memudahkan pengunjung untuk melihat isi semua artikel yang ada di blog kita. Selain itu, halaman sitemap juga bisa meningkatkan page views blog kita.

Karena begitu pentingnya halaman sitemap ini bagi sebuah blog, maka saya akan membagikan tutorial mengenai cara membuat sitemap keren dan responsive di blogger. Yang menarik dari sitemap ini adalah sitemap ini menampilkan secara otomatis daftar postingan sesuai dengan label yang telah ditentukan. Jadi kamu tidak perlu lagi memasukkannya satu per satu.

Berikut tampilan sitemap atau halaman daftar isi nya.

Sitemap Keren Otomatis dan Responsive di Blogger | Live Domo

Gimana? Keren kan. Oke nggak usah berlama lagi, yuk simak tutorial cara membuat sitemap keren otomatis dan responsive di blogger berikut ini.

Cara Membuat Sitemap Keren Otomatis dan Responsive di Blogger

1. Buka Blogger. Lalu, pilih Laman > Laman Baru.

2. Setelah itu, buat Judul Lamannya (Misalnya : Sitemap, Daftar Isi atau lainnya)

3. Lalu, ubah ke Mode HTML.

4. Copy dan pastekan kode dibawah ini ke Laman Daftar Isi yang telah kamu buat tadi.

<link href="https://goo.gl/2qrReh" media="screen" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 10,
    baru       = "Baru !",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script src="https://goo.gl/6FjxRX" type="text/javascript"></script>
<script src="https://infodiki.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Catatan :
Ganti https://infodiki.blogspot.com dengan URL Blog punya kamu.

Ingat :
Dalam Mode HTML bukan Mode Compose

Demikian Cara Membuat Sitemap Keren Otomatis dan Responsive di Blogger. Selamat mencoba!

Semoga bermanfaat! (http://infodiki.blogspot.com) Dicky Khusnaedy July 29, 2017 Admin Bandung Indonesia

Cara Membuat Sitemap Keren Otomatis dan Responsive di Blogger

Sitemap Keren Otomatis dan Responsive di Blogger | Live Domo

Gimana? Keren kan. Oke nggak usah berlama lagi, yuk simak tutorial cara membuat sitemap keren otomatis dan responsive di blogger berikut ini.

Cara Membuat Sitemap Keren Otomatis dan Responsive di Blogger

1. Buka Blogger. Lalu, pilih Laman > Laman Baru.

2. Setelah itu, buat Judul Lamannya (Misalnya : Sitemap, Daftar Isi atau lainnya)

3. Lalu, ubah ke Mode HTML.

4. Copy dan pastekan kode dibawah ini ke Laman Daftar Isi yang telah kamu buat tadi.

<link href="https://goo.gl/2qrReh" media="screen" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 10,
    baru       = "Baru !",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script src="https://goo.gl/6FjxRX" type="text/javascript"></script>
<script src="https://infodiki.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Catatan :
Ganti https://infodiki.blogspot.com dengan URL Blog punya kamu.

Ingat :
Dalam Mode HTML bukan Mode Compose

Demikian Cara Membuat Sitemap Keren Otomatis dan Responsive di Blogger. Selamat mencoba!

Semoga bermanfaat! (http://infodiki.blogspot.com)

Cara Mudah Membuat Google Play Button With CSS - Biasanya, para Blogger yang membuat blog dengan niche download aplikasi Android membuat link download menuju halaman Google Play dengan menggunakan gambar tombol Google Play.

Nah, selain bisa menggunakan gambar Google Play, kamu juga bisa menggunakan Google Play Button menggunakan CSS untuk membuat link download menuju halaman Google Play. Selain ringan, dengan menggunakan Google Play Button tentu akan membuat postingan kamu terlihat keren dan juga rapi. Untuk melihat demonya, kamu bisa lihat tampilan Google Play Button with CSS dibawah ini.

Google Play

Gimana? Keren kan. Penasaran bagaimana membuatnya? Yuk, simak penjelasannya berikut ini.

Cara Membuat Google Play Button With CSS

1. Buka Blogger. Lalu, pilih Theme/Tema > Edit HTML.

2. Kemudian, cari </head>. Lalu, simpan kode CSS di bawah ini tepat diatas kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
@font-face{font-family:"fontfutura";src:url("https://cdn.rawgit.com/KompiAjaib/font/master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
a.btn-google{color:#fff}
.btn{padding:10px 16px;margin:5px;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-google{color:#fff;background-color:#111;border-color:#000;padding:15px 16px 5px 40px;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-google:focus{color:#fff;background-color:#555;border-color:#000}
.btn-google:active,.btn-google:hover{color:#fff;background-color:#555;border-color:#000;}
.btn-google:before{content:"";background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjAJPaAF2Wc-hlgk3o6xCoLclFA886nht4gI3sT03T70wzPAspDTfuRl5pQxpcZdykeN3U9eTfRerW_-gV6d_FERS3FA9MTl3_Vc-pgLtZE8hc5MrxJpbQhE3laJRPksujbKo_7QAn7GMb/s30/nexus2cee_ic_launcher_play_store_new-1.png);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;left:6px;top:50%;margin-top:-15px}
.btn-google:after{content:"GET IT ON";position:absolute;top:5px;left:40px;font-size:10px;font-weight:400}
/*]]>*/
</style>
</b:if>

3. Setelah itu, Simpan Template.

Cara Menggunakan Google Play Button With CSS di Postingan

1. Masih di Blogger, pilih Post. Lalu, pilih postingan mana yang akan kamu letakkan Google Play Button.

2. Jika sudah, masuk ke Editor Postingan. Lalu, ubah ke Mode HTML. Kemudian, copy kode HTML di bawah ini dan pastekan di posisi mana Google Play Button tersebut akan muncul.

<a class="btn btn-google" href="#" title="Google Play">Google Play</a>

Catatan :

Ganti tanda pagar (#) dengan link tujuan ke halaman aplikasi di Google Play Store.

3. Selesai!

Itulah Cara Mudah Membuat Google Play Button With CSS. Dengan menggunakan Google Play Button With CSS, tentu bisa membuat blog kamu menjadi fast loading karena gambar yang dipakai memiliki size yang sangat kecil.

Selamat mencoba! (http://infodiki.blogspot.com)

Referensi :

http://www.kompiajaib.com/2017/05/google-play-button-with-css.html

Dicky Khusnaedy July 18, 2017 Admin Bandung Indonesia

Cara Mudah Membuat Google Play Button With CSS

Google Play

Gimana? Keren kan. Penasaran bagaimana membuatnya? Yuk, simak penjelasannya berikut ini.

Cara Membuat Google Play Button With CSS

1. Buka Blogger. Lalu, pilih Theme/Tema > Edit HTML.

2. Kemudian, cari </head>. Lalu, simpan kode CSS di bawah ini tepat diatas kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
@font-face{font-family:"fontfutura";src:url("https://cdn.rawgit.com/KompiAjaib/font/master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
a.btn-google{color:#fff}
.btn{padding:10px 16px;margin:5px;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-google{color:#fff;background-color:#111;border-color:#000;padding:15px 16px 5px 40px;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-google:focus{color:#fff;background-color:#555;border-color:#000}
.btn-google:active,.btn-google:hover{color:#fff;background-color:#555;border-color:#000;}
.btn-google:before{content:"";background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjAJPaAF2Wc-hlgk3o6xCoLclFA886nht4gI3sT03T70wzPAspDTfuRl5pQxpcZdykeN3U9eTfRerW_-gV6d_FERS3FA9MTl3_Vc-pgLtZE8hc5MrxJpbQhE3laJRPksujbKo_7QAn7GMb/s30/nexus2cee_ic_launcher_play_store_new-1.png);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;left:6px;top:50%;margin-top:-15px}
.btn-google:after{content:"GET IT ON";position:absolute;top:5px;left:40px;font-size:10px;font-weight:400}
/*]]>*/
</style>
</b:if>

3. Setelah itu, Simpan Template.

Cara Menggunakan Google Play Button With CSS di Postingan

1. Masih di Blogger, pilih Post. Lalu, pilih postingan mana yang akan kamu letakkan Google Play Button.

2. Jika sudah, masuk ke Editor Postingan. Lalu, ubah ke Mode HTML. Kemudian, copy kode HTML di bawah ini dan pastekan di posisi mana Google Play Button tersebut akan muncul.

<a class="btn btn-google" href="#" title="Google Play">Google Play</a>

Catatan :

Ganti tanda pagar (#) dengan link tujuan ke halaman aplikasi di Google Play Store.

3. Selesai!

Selamat mencoba! (http://infodiki.blogspot.com)

Referensi :

http://www.kompiajaib.com/2017/05/google-play-button-with-css.html

Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog - Menu navigasi yang terdapat pada sebuah blog umumnya hanya terdapat satu saja, yakni dibawah header atau logo blog. Namun ada juga para blogger yang memanfaatkan ruang kosong diatas header blog mereka dengan membuat menu navigasi blog tambahan.

Tujuan para blogger menambahkan navigasi menu diatas header blog adalah untuk mempermudah pengunjung dalam mengeksplorasi blog kita dan juga agar blog kita terlihat lebih profesional dimata pengunjung.

Nah, untuk itu saya akan membagikan tutorial cara membuat top menu responsive plus media sosial di atas header blog. Untuk tampilannya kamu bisa melihat top menu diatas header blog pada blog Info Dicky ini. Berikut tutorialnya.

Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog

1. Login ke Blogger. Lalu, pilih Tema/Theme > Edit HTML.

2. Copy kode berikut ini dan pastekan tepat di atas ]]></b:skin> atau </style>.

/* CSS Menu Top */
#menu-wrapper {margin:0px 3px;background:#ececec;width:100%;max-width:900px;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:9px 10px 3px;border-bottom: 1px solid #eee;}
.top-menu {display:block;margin:0 auto;float:none;padding:0;width:100%;max-width:980px;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-family:Oswald;font-size:14px;font-weight:400;background-color:transparent;color:#666;display:block;margin:0;padding:8px 12px;line-height:100%;transition:color 0.3s;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#48d;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;font-size:15px}
.top-menu li.socialwrap a i{text-align:center;color:#666;transition:initial;}
.top-menu li.socialwrap a:hover{background:#48d;color:#fff;}
.top-menu li.socialwrap.linkedin {border-right:0;}
.top-menu a#pull {display:none;}
@media only screen and (max-width:768px) {
#menu-wrapper {margin:0;width:100%}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{color:#666;display:inline-block;font-size:12px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:"\f03a";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#48d;display:inline-block;position:absolute;right:15px;top:5%;line-height:30px;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;}
.top-menu li a:hover, nav a:active {background:#48d;border:none;color:#fff;}
.top-menu ul li a:hover {background:#48d;color:#fff;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width:640px) {
#menu-wrapper {margin:0 auto;width:100%;}
} 
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}

3. Setelah itu, copy dan pastekan kode berikut ini tepat di atas <div id='header'> atau <div class='header'>. Jika kamu tidak menemukan kode tersebut, coba kamu cari kode header id='header-wrapper' dan pastekan tepat di atasnya. Jika masih tidak menemukannya, kamu bisa menanyakannya di kolom komentar.

<div id='menu-wrapper'>
<div class='top-menu'>
<ul>
<li><a href='#' title='About Us'>About</a></li>
<li><a href='#' title='Contact us'>Contact</a></li>
<li><a href='#' title='Our Sitemap'>Sitemap</a></li>
<li><a href='#' title='Terms of Service'>Terms of Service</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li class='socialwrap linkedin'><a href='#' rel='nofollow' target='_blank' title='Like us on Facebook'><i class='fa fa-facebook fa-lg'/></a></li>
<li class='socialwrap youtube'><a href='#' rel='nofollow' target='_blank' title='Follow My Twitter'><i class='fa fa-twitter fa-lg'/></a></li>
<li class='socialwrap rss'><a href='#' rel='nofollow' target='_blank' title='Dont Forget to Subscribe'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a href='#' rel='nofollow' target='_blank' title='Follow My Google+'><i class='fa fa-google-plus fa-lg'/></a></li>
<li class='socialwrap twitter'><a href='#' rel='nofollow' target='_blank' title='Follow My Instagram'><i class='fa fa-instagram'/></a></li>
</ul>
<a href='#' id='pull'>MENU</a>
</div>
</div>
 <div class='clear'/>

Catatan :

Ganti tanda pagar (#) dengan URL menu blog dan akun media sosial kamu.

4. Kemudian, copy dan pastekan kode dibawah ini tepat di atas </head> atau </body>.

<script type='text/javascript'>
//<![CDATA[
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>

5. Terakhir, Save Template!

Itulah Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog. Semoga bermanfaat! (http://infodiki.blogspot.com) Dicky Khusnaedy June 29, 2017 Admin Bandung Indonesia

Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog

1. Login ke Blogger. Lalu, pilih Tema/Theme > Edit HTML.

2. Copy kode berikut ini dan pastekan tepat di atas ]]></b:skin> atau </style>.

/* CSS Menu Top */
#menu-wrapper {margin:0px 3px;background:#ececec;width:100%;max-width:900px;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:9px 10px 3px;border-bottom: 1px solid #eee;}
.top-menu {display:block;margin:0 auto;float:none;padding:0;width:100%;max-width:980px;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-family:Oswald;font-size:14px;font-weight:400;background-color:transparent;color:#666;display:block;margin:0;padding:8px 12px;line-height:100%;transition:color 0.3s;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#48d;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;font-size:15px}
.top-menu li.socialwrap a i{text-align:center;color:#666;transition:initial;}
.top-menu li.socialwrap a:hover{background:#48d;color:#fff;}
.top-menu li.socialwrap.linkedin {border-right:0;}
.top-menu a#pull {display:none;}
@media only screen and (max-width:768px) {
#menu-wrapper {margin:0;width:100%}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{color:#666;display:inline-block;font-size:12px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:"\f03a";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#48d;display:inline-block;position:absolute;right:15px;top:5%;line-height:30px;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;}
.top-menu li a:hover, nav a:active {background:#48d;border:none;color:#fff;}
.top-menu ul li a:hover {background:#48d;color:#fff;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width:640px) {
#menu-wrapper {margin:0 auto;width:100%;}
} 
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}

<div id='menu-wrapper'>
<div class='top-menu'>
<ul>
<li><a href='#' title='About Us'>About</a></li>
<li><a href='#' title='Contact us'>Contact</a></li>
<li><a href='#' title='Our Sitemap'>Sitemap</a></li>
<li><a href='#' title='Terms of Service'>Terms of Service</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li class='socialwrap linkedin'><a href='#' rel='nofollow' target='_blank' title='Like us on Facebook'><i class='fa fa-facebook fa-lg'/></a></li>
<li class='socialwrap youtube'><a href='#' rel='nofollow' target='_blank' title='Follow My Twitter'><i class='fa fa-twitter fa-lg'/></a></li>
<li class='socialwrap rss'><a href='#' rel='nofollow' target='_blank' title='Dont Forget to Subscribe'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a href='#' rel='nofollow' target='_blank' title='Follow My Google+'><i class='fa fa-google-plus fa-lg'/></a></li>
<li class='socialwrap twitter'><a href='#' rel='nofollow' target='_blank' title='Follow My Instagram'><i class='fa fa-instagram'/></a></li>
</ul>
<a href='#' id='pull'>MENU</a>
</div>
</div>
 <div class='clear'/>

Catatan :

Ganti tanda pagar (#) dengan URL menu blog dan akun media sosial kamu.

4. Kemudian, copy dan pastekan kode dibawah ini tepat di atas </head> atau </body>.

<script type='text/javascript'>
//<![CDATA[
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>

5. Terakhir, Save Template!

Itulah Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog. Semoga bermanfaat! (http://infodiki.blogspot.com)

Cara Mudah Cek Harga Blog atau Website

Tambahan

Cara Mudah Cek Harga Blog atau Website

Cara Mudah Cek Harga Blog atau Website

Tambahan

Mudah Memasang Kode Script Anti AdBlock di Blogger

Tambahan

Cara Mudah Memasang Kode Script Anti AdBlock di Blogger

Mudah Memasang Kode Script Anti AdBlock di Blogger

Tambahan

Cara Menyembunyikan Label (Kategori) Posting Tertentu di Homepage Blog

Cara 1

Cara 2

Cara Menyembunyikan Label (Kategori) Posting Tertentu di Homepage Blog

Cara Menyembunyikan Label (Kategori) Posting Tertentu di Homepage Blog

Cara 1

Cara 2

Cara Membuat Sitemap Keren Otomatis dan Responsive di Blogger

Cara Membuat Sitemap Keren Otomatis dan Responsive di Blogger

Cara Membuat Sitemap Keren Otomatis dan Responsive di Blogger

Cara Membuat Google Play Button With CSS

Cara Menggunakan Google Play Button With CSS di Postingan

Cara Mudah Membuat Google Play Button With CSS

Cara Membuat Google Play Button With CSS

Cara Menggunakan Google Play Button With CSS di Postingan

Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog

Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog

Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog

Labels