Cara Membuat Menu Navigasi Responsive di Atas Header + Icon Media Sosial di Blog

Gambar ini hanya Contoh

Tutorial Cara Membuat Menu Navigasi Responsive di Atas Header Plus Media Sosial di Blog

Menu Navigasi Blog yang sudah Profesional biasanya berisi About, Contact, Disclaimer, Sitemap, Privasi dan lain-lain.

Menu Navigasi yang saya sebutkan diatas juga menjadi salah syarat agar Blog diterima oleh Google AdSense.

Seperti salah satu kata dari judul postingan diatas, yaitu "Responsive" yang artinya dapat menyesuaikan di layar Handphone apa saja, berbeda jika judul postingan diatas tidak ada kata Responsive, yang berarti tidak dapat menyesuaikan pada layar Handphone yang saat ini sudah banyak peminatnya untuk digunakan berselancar di dunia maya.

Berikut Cara Memasang Menu Navigasi di Atas Header + Icon Media Sosial di Blog dibawah ini:

- Login ke akun Blogger.com

- Selanjutnya menuju Template/Edit HTML

- Cari kode <div class='header-wrapper'> (gunakan CTRL F)

- Kemudian copy kode dibawah ini, pastekan di bawah kode <div class='header-wrapper'>

<nav id='menutop'><br /><input type='checkbox'/><br /><label/><br /><ul><li><a href='your-link'>About</a></li><li><a href='your-link'>Contact</a></li><li><a href='your-link'>Sitemap</a></li><li class='sorting-01 facebook'><a href='your-link'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li><li class='sorting-02 twitter'><a href='your-link'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li><li class='sorting-03 googleplus'><a href='your-link'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li><li class='sorting-06 rss-square'><a href='your-link'><i class='fa fa-rss-square fa-lg'/><span class='inv'/></a></li><li class='sorting-04 youtube'><a href='your-link'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li></ul></nav>

- Tahap yang pertama sudah selesai, sekarang tahap yang kedua, cari kode </head> (gunakan CTRL F)

- Copy kode di bawah ini, pastekan di atas kode </head>

<style>#menutop{width:100%;margin:0 auto;height:40px;background:#fff;border-bottom:1px solid #e9e9e9;} #menutop ul,#menutop li{margin:0;padding:0;list-style:none;} #menutop ul{height:40px} #menutop li{float:left;display:inline;position:relative;font-family:'trebuchet MS';font-size:13px; font-weight:bold;} #menutop a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#919392;} #menutop ul li:hover a{color:#666;} #menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer} #menutop label{font-family:'trebuchet MS';font-size:30px;font-weight:400;display:none;width:35px;height:40px;line-height:45px;text-align:center;} #menutop label span{font-size:13px;position:absolute;left:35px} #menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392} #menutop ul li ul li a{color:#919392;height:40px;line-height:40px;background:#fff;width:100%;} #menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;} #menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;} #menutop a.dutt{padding:0 27px 0 14px} #menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;} #menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;} #menutop ul.menux li a{background:#fff;color:#919392;} #menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;} #menutop li.facebook {padding:0 5px;} #menutop li.rss-square,#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;} #menutop li a.rss-square:hover,#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;} #menutop li.rss-square .fa.fa-rss-square,#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;} #menutop li.rss-square:hover,#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover, #menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;} #menutop li.rss-square:hover .fa.fa-rss-square{color:#CC6600} #menutop li.facebook:hover .fa.fa-facebook{color:#000099} #menutop li.twitter:hover .fa.fa-twitter{color:#0099FF} #menutop li.youtube:hover .fa.fa-youtube{color:#B00000} #menutop li.googleplus:hover .fa.fa-google-plus{color:#990000} #menutop li.linkedin:hover .fa.fa-linkedin{color:#0066FF} @media screen and (max-width:960px) { #menutop li:hover > ul.menux{display:block;} #menutop ul{border:none;border-bottom:4px solid #e9e9e9;} #menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;} #menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;} #menutop ul.menux{width:100%;position:static;border:none} #menutop li{display:block;float:none;width:auto;text-align:left} #menutop li a{color:#666} #menutop li a:hover{background:#f1f1f1;color:#f9f9f9} #menutop li:hover{background:#8493a0;color:#fff;} #menutop a.dutt{font-weight: bold;} #menutop li:hover > a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;} #menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;} #menutop input:after,#menutop label:after {content:"\f0c9";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666; display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;} #menutop input{z-index:4;} #menutop input:checked + label{color:#fff;font-weight:700} #menutop input:checked ~ ul{display:block} #menutop ul li ul li a{width:100%;color:#666;} #menutop ul li ul li a:hover{background:#8493a0;color:#fff;} #menutop ul.menux a{background:#fff;color:#666;} #menutop ul.menux a:hover{background:#8493a0;color:#fff;} #menutop ul.menux li{background:#fff;color:#666;} #menutop ul.menux li:hover{background:#8493a0;color:#fff;} #menutop ul.menux li a{background:#fff;color:#666;} #menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;} </style>

- Tahap Terakhir, copy kode di bawah ini, pastekan kembali diatas kode </head>

<script type='text/javascript'>//<![CDATA[ var cb=function(){var e=document.createElement('link'); e.rel='stylesheet',e.href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'; var t=document.getElementsByTagName('head')[0]; t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener('load',cb); //]]></script>

- Jika semua sudah selesai, klik Simpan Template

- Hasilnya

Cara Cepat Mengatasi Gambar Thumbnail Postingan Buram di Homepage Blog

Tutorial Cara Mengatasi Foto Thumbnail Postingan Blur di Homepage Blog

Banyak cara dilakukan saat gambar Thumbnail postingan Blog tiba-tiba buram atau blur alias pecah di halaman depan. Sebabnya bermacam-macam, misalnya karena bawaan awal Template Blog, contoh seperti kasus Blog k0k0h yang sempat mengalami gambar Thumbnail postingan pecah di halaman depan.

Coba mencari ke mesin pencari Google, banyak tutorial yang saya temui, tetapi tidak ada yang cocok pada Template saya, kemudian saya coba utak-atik sendiri, karena sudah lumayan prustasi mencari di mbah Google.

Pada akhirnya saya menemukan solusinya dan gambar Thumbnail di halaman depan pada postingan saya pun tidak lagi seperti kaca pecah. Berikut ini tampilan ketika gambar Thumbnail postingan pecah di halaman depan Blog k0k0h dan sebaliknya.

Berikut Cara Cepat Mengatasi Gambar Thumnail Postingan Buram di Halaman Depan Blog dibawah ini:

- Login ke akun Blogger.com

- Selanjutnya langsung menuju Template/Edit HTML.

- Cari kode .post-thumbnail (gunakan CTRL F)

- Kemudian ganti ukuran lebar dan tinggi-nya
Contohnya:
.post-thumbnail img{float:left;margin:0 15px 0 0;background:#fff;width:150px!important;height:150px!important;padding:0;border:4px solid #f1f1f1;box-shadow:none}
(disarankan menggunakan width:100px dan height:100px)

- Terakhir klik Simpan Template

Cara Menyembunyikan Posting Label Tertentu di Halaman Depan Blog

Tutorial Cara Menyembunyikan Posting Label Tertentu di Homepage Blog

Label atau biasa disebut kategori adalah suatu kumpulan postingan khusus, misalnya khusus film, game, aplikasi, tutorial dan lain-lain, jadi dengan membuka satu Label kumpulan postingan seperti game akan tampil tanpa adanya postingan tutorial.

Tapi biasanya ada juga beberapa Blogger yang ingin menyembunyikan Label tertentu di halaman depan Blog-nya. Nah pada kesempatan kali ini saya akan share Cara Menyembunyikan Posting Label Tertentu di Halaman Depan Blog. Berikut Tutorialnya:

- Login ke akun Blogger.com

- Klik Template/Edit HTML

- Cari kode <b:include data='post' name='post'/> (gunakan CTRL F)

- Setelah sudah menemukan kode di atas, selanjutnya hapus

- Ganti dengan kode di bawah ini

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

- Ganti nama LABEL (huruf besar semua) dengan Label yang akan di sembunyikan

- Atau jika Label yang di sembunyikan lebih dari satu, silahkan gunakan kode dibawah ini

<b:if cond='data:blog.url == data:blog.homepageUrl'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.name != "LABEL1"'><br /><b:include data='post' name='post' /><br /></b:if><br /><b:if cond='data:label.name != "LABEL2"'><br /><b:include data='post' name='post' /><br /></b:if><br /></b:loop><br /><b:else/><br /><b:include data='post' name='post' /><br /></b:if

- Ganti nama LABEL1 dan LABEL2 dengan nama Label yang akan di sembunyikan.

- Terakhir klik simpan Template.

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail di Bawah Postingan Blog

Tutorial Cara Membuat Related Post Vertikal Dengan Gambar di Bawah Postingan

Artikel Terkait/Related Post salah satu widget yang wajjib dipasang di Blog. Artikel Terkait letaknya biasanya dibawah postingan Blog, Artikel Terkait juga biasanya sudah terpasang otomats saat menggunakan Template karya para master, baik secara gratis ataupun berbayar.

Widget Artikel Terkait yang saya share kali ini menggunakan Thumbnail, apa itu Thumbnail? Thumbnail adalah gambar kecil yang ada pada homepage postingan. Dan Widget Artikel Terkait yang saya share kali ini bukanlah versi simple/Sederhana, meskipun tidak simple/sederhana tetapi tetap Responsive.

Berikut Cara Memasang Artikel Terkait Vertikal Dengan Thumbnail di Bawah Postingan Blog dibawah ini:

- Login ke akun Blogger.com

- Selanjutnya langsung menuju Template/Edit HTML, cari kode </head> (gunakan CTRL F)

- Copy kode dibawah ini, pastekan diatas kode </head>

<b:if cond='data:blog.pageType == "item"'><br /><style>#related_posts{} #related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C} #relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px} #relpost_img_sum:hover{background:none} #relpost_img_sum ul{list-style-type:none; margin:0; padding:0} #relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none} #relpost_img_sum .news-title{display:block; font-weight:bold !important} #relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333} #relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff} </style><br /><script type='text/javascript'>//<![CDATA[ var relnum = 0; var relmaxposts = 5; var numchars = 150; var morelink = "Read More"; eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{})) //]]></script><br /></b:if>

- Kemudian cari kode <data:post.body/> (gunakan CTRL F)

- Copy kode dibawah ini, pastekan dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'><br /><div id='related_posts' style='margin-top:35px;'><h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;'>Artikel Terkait</h4><b:loop values='data:post.labels' var='label'><br /><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/></b:loop><ul id='relpost_img_sum'><script type='text/javascript'>relatpost();</script><br /></ul></div></b:if>

- Biasanya kode <data:post.body/> lebih dari satu, jadi silahkan coba satu persatu, mana yang paling cocok.

Cara Verifikasi Ulang Blog ke Google Webmaster Tools

Tutorial Cara Verifikasi Ulang Blog di Google Webmaster Tools

Pernahkah suatu ketika para sahabat pembaca setia Blog k0k0h ingin verifikasi ulang Blog-nya ke Google Webmaster Tools?

Salah satu alasannya misalnya berganti Template baru, nah kalian masuk ke Blog Tutorial yang tepat! Karena pada kesempatan kali ini saya akan bahas mengena Cara Verifikasi Ulang Blog ke Google Webmaster Tools.

Baca juga:
Cara Daftar Dan Verifikasi Blog ke Google Webmaster Tools
Cara Daftar Dan Verifikasi Blog ke Bing Webmaster Tools
Cara Submit URL Postingan ke Google Dan Bing

Saya bikin artikel ini mungkin saja masih ada yang belum tahu mencari kode verifikasi di Google Webmaster Tools, Berikut Tutorialnya:

- Pertama-tama langsung menuju ke halaman Google Webmaster Tools

- Kemudian klik alamat/URL Blog yang akan di verifikasi

- Setelah itu klik tombol Gerigi/pengaturan disamping kanan atas, klik Pengguna Dan Pemilik Properti

- Klik Verifikasikan Dengan Menggunakan Metode Yang Berbeda

- Klik Laman Verifikasi Pemilik

- Selanjutnya pilih Tag HTML, copy kode verifikasi-nya
- Login ke Blogger.com/Template/Edit HTML/cari kode <head> (gunakan CTRL F)
- Pastekan kode verifikasi tepat dibawah kode <head>
- Terakhir klik Verifikasi

- Berhasil!!!

Cara Submit URL Postingan ke Google Dan Bing

Tutorial Cara Submit URL Artikel ke Google Dan Bing Webmaster Tools

Pastikan Blog yang akan di submit url postingan atau artikelnya sudah terdaftar dan terverifikasi di Google dan Bing Webmaster Tools, belum tahu caranya? Baca Cara Daftar Dan Verifikasi Blog ke Google Webmaster Tools dan Cara Daftar Dan Verifikasi Blog ke Bing Webmaster Tools.

Setelah selesai Daftar dan Verifikasi Blog ke Google Webmaster Tools dan Bing Webmaster Tools, langsung menuju link dibawah ini:

- Submit URL ke Google

- Submit URL ke Bing

Setelah itu masukan alamat postingan yang akan di submit.

Cara Daftar Dan Verifikasi Blog ke Bing Webmaster Tools

Tutorial Cara Daftar Dan Verifikasi Blog ke Bing Webmaster Tools

Sebelumnya baca dulu artikel saya yang berjudul Cara Daftar Dan Verifikasi Blog ke Google Webmaster Tools.

Sepertinya tidak usah saya jelaskan mengenai Bing Webmaster Tool, karena sama saja dengan Google Webmaster Tool

Bing Webmaster Tool menjadi pilihan kedua setelah Google Webmaster Tool, Bing menjadi mesin pencari terpopuler kedua setelah Google di dunia.

Baca juga: Cara Submit URL Postingan ke Google Dan Bing

Bing juga berkerjasama dengan Yahoo. Jadi apabila kalian daftar dan verifikasi Blog ke Bing Webmaster Tool, maka secara otomatis Blog kalian juga akan terindex ke mesin pencari Yahoo.

Berikut Cara Daftar Dan Verifikasi Blog ke Bing Webmaster Tools dibawah ini:

- Langsung menuju halaman Bing Webmaster Tools

- Geser kebawah, klik Sign Up

- Isi semua kolom untuk proses pembuatan akun

- Masukan kode verifikasi (kode verifikasi akan dikirim lewat sms di nomor telepon yang baru saja kalian daftarkan)

- Cek email kalian, untuk konfirmasi

- Selesai, klik Ok

- Klik ADD YOUR SITE

- Isi semua kolom, lihat screenshot

- Copy kode verifikasi, pastekan diatas kode </head>, klik Simpan.

- Kembali ke halaman Bing Webmaster Tools, klik VERIFY

- Selesai, untuk sementara masih Pending, tunggu dalam waktu beberapa hari, sementara pihak dari Bing Webmaster Tools akan memprosesnya.

- Ini contoh Blog k0k0h.blogspot.com yang sudah di konfirmasi dan sukses

Cara Daftar Dan Verifikasi Blog ke Google Webmaster Tools

Tutorial Cara Daftar Dan Verifikasi Blog di Google Webmaster Tools

Singkat saja tanpa menggunakan bahasa yag terlalu tinggi, saya akan langsung menjelaskan ke intinya saja. Jadinya mendaftar dan verifikasi Blog di Google Webmaster Tool adalah suatu hal yang wajib untuk menaikkan trafic suatu Blog, kkhususnya Blog yang baru saja dibuat.

Baca juga: 
Cara Daftar Dan Verifikasi Blog ke Bing Webmaster Tools

Cara Submit URL Postingan ke Google Dan Bing 

Salah satu dampak tidak terdaftarnya+verifikasi Blog di Google Webmaster Tool adalah artikel/postingan yang dishare akan sangat lama terindex oleh mesin  pencari nomor satu dunia "Google". Sebaliknya jika Blog yang terdaftar+verifikasi maka artikel/postingan yang baru saja di share akan sangat cepat terindex oleh mesin pencari Google + dengan syarat Submit URL ke Google (tanpa daftar dan verifikasi di Google Webmaster Tool tidak akan bisa).

Mengingat Google adalah mesin pencari nomor satu dunia dan mesin pencari yang paling banyak digunakan oleh pengguna internet untuk mencari informasi.

Berikut Cara Daftar Dan Verifikasi Blog ke Google Webmaster Tools di bawah ini:

- Langsung menuju halaman Google Webmaster Tool (pastikan kalian sudah punya akun gmail yang aktif, jika belum punya daftar dulu di https://gmail.com)


- Masukkan alamat Email dan Passwoard kalian, setelah sudah login, nanti kalian akan langsung dibawa kehalaman pendaftaran, masukan alamat Blog kalian, kemudian klik Tambahkan Properti

- Klik Metode Alternatif
- Pilih Tag HTML
- Copy kode verifikasi
- Login ke Blogger.com
- Langsung menuju menu Template/Edit HTML, cari kode <head> (gunakan CTRL F)
- Pastekan tepat dibawah kode <head>
- Klik Simpan
- Kembali ke halaman Google Webmaster Tool, klik Verifikasi

- Berhasil, klik Lanjutkan

 

Cara Membuat Random Post Ringan Responsive Berdasarkan Label di Blog

Tutorial Cara Membuat Random Post Ringan Responsive Berdasarkan Label di Blog

Kalau mendengar kata Ringan Responsive, pasti bisa menggambarkna seperti apa. Nah pada kesempatan kali saya akan share Cara Membuat Random Post Ringan Responsive Berdasarkan Label di Blog. Setelah sebelumnya saya juga share Cara Membuat Recent Post Dan Random Post Ringan Responsive di Blog.

Ringan berarti Widget ini Teks  sangat sederhana, bahkan tanpa Gambar/Thumbnail, jadi sangat tepat bagi kalian yang ingin membuat tampilan Blog sederhana dan juga tidak membat LOAD Blog menjadi membengkak.

Berikut Cara Memasang Random Post Ringan Responsive Berdasarkan Label di Blog dibawah ini:

- Login ke Blogger.com

- Langsung menuju menu "Tata Letak/Tambahkan Gadget/Tambahkan HTML/JavaScript"

- Copy kode dibawah ini

<script type="text/javascript"> function showrecentposts(json) { for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }} posttitle = posttitle.link(posturl); if (standardstyling) document.write('<li>'); document.write(posttitle);} if (standardstyling) document.write('</li>'); } </script><br /><script type="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="/feeds/posts/default/-/namalabel?orderby=published&alt=json-in-script&callback=showrecentposts" type="text/javascript"></script>

- Ganti "namalabel" dengan label/kategori kalian
- var numposts = 5, jumlah postingan yang akan ditampilkan secara acak, ganti no 5-nya saja
Pastekan didalam kolom yang sudah di sediakan.

- Terakhir klik Simpan.

Cara Membuat Widget Tombol Share Melayang di Samping Blog

Tutorial Cara Membuat Widget Tombol Share Melayang di Samping Blog

Sepertinya saya share postingan Cara Membuat Widget Tombol Share Melayang di Samping Blog ini sudah sangat terlambat, karena di mesin pencari Google sudah sangat banyak, tetapi tidak apa-apa karena disini saya hanya melengkapi postingan saya saja.

Berikut Cara Memasang Widget Tombol Share Melayang di Samping Blog dibawah ini:

- Pertama-tama login ke Blogger.com

- Langsung menuju menu "Tata Letak/Tambahkan Gadget/Tambahkan HTML/JavaScript"

- Copy kode dibawah ini

<b:if cond='data:blog.isMobileRequest == "false"'><!--Widget Share like FB tweet google plus digg Button Melayang Start--><br /><style> #pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solidblack; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style><div id='pageshare' title="bagikan ke teman anda"><div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div><div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div><div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div><div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div><div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br /><div style="clear: both;font-size: 8px;text-align:center;"><a href=" http://k0k0h.blogspot.com/" target="blank"><font color="blue"><font></font></font></a></div></div><!--Widget Share like FB tweet google plus digg Button Melayang End--></b:if>

- Ganti "k0k0h" dengan alamat Blog kalian

- Pastekan didalam kolom yang sudah di sediakan.

- Terakhir klik Simpan.

Cara Membuat Recent Post Dan Random Post Ringan Responsive di Blog

Tutorial Cara Membuat Recent Post Dan Random Post Ringan Responsive di Blog

Postingan ini adalah episode dari toturial saya sebelumnya yang berjudul Cara Membuat Recent Post Dan Random Post Dengan Thumbnail di Blog (Work 100%).

Jadi tanpa saya jelaskan tentu kalian sudah mengetahui Recent Post dan Random Post, karena sudah saya jelaskan di postingan sebelumnya.

Berikut Cara Memasang Recent Post Dan Random Post Ringan Responsive di Blog dibawah ini:

- Login ke Blogger.com

- Langsung menuju menu "Tata Letak/Tambahkan Gadget/Tambahkan HTML/JavaScript"

- Copy kode dibawah ini

RECENT POST

<script src="http://id-pemula-javascript.googlecode.com/files/artikel-terbaru.js"></script><br /><script>var numposts = 5; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script><br /><script src="http://k0k0h.blogspot.co.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script

RANDOM POST
<script type="text/javascript">var randarray = new Array();var l=0;var flag; var numofpost=5;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script><script src="http://k0k0h.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=5&max-results=300&callback=randomposts" type="text/javascript"></script>

RECENT POST
- Ganti "k0k0h" dengan alamat Blog kalian
- var numposts = 5, jumlah postingan yang ditampilkan, ganti nomor 5-nya saja

RANDOM POST
- Ganti "k0k0h" dengan alamat Blog kalian
- var numofpost=5; adalah jumlah postingan yang  ditampilkan, ganti nomor 5-nya saja

- Pastekan didalam kolom yang sudah disediakan

- Terakhir klik Simpan.

Cara Mudah Membuat Menu Navigasi Drop Down Responsive di Blog

Cara Mudah Membuat Menu Navigasi Drop Down Responsive di Blog

Apa yang dimaksud dengan Menu Navigasi Drop Down? Menu Navigasi Drop Down adalah Menu Navigasi menurun, Menu Navigasi Drop Down sangat membantu bagi kalian yang ingin memasang kategori/label Blog di bawah header atau bisa juga meletakkan label tertentu seperti Blog saya ini contohnya.

Banyak cara membuat/memasang Menu Navigasi Drop Down di Google, tetapi tidak semuanya work saat di terapkan di Blog, kebanyakan hasilnya GATOT alias gagal total. Parahnya lagi saat sudah menambahkan kode Menu Navigasi Drop Down dan menyimpan Template Blog tiba-tiba Template Blog menjadi error. Alasannya hanya satu karena tidak cocok dengan Template Blog.

Kalau dari pengalaman saya sendiri mencari kode Menu Navigasi Drop Down di mesin pencari mbah Google selalu berujung gatot, kemudian saya berinisiatif sendiri dan mengutak atik Template dari Blog saya yang satunya, kebetulan Blog saya yang satunya Menggunaakan Menu Navigasi Drop Down, jadi saya copy kode Menu Navigasi Drop Down pada Template Blog saya yang satunya tadi, kemudian saya edit dan saya coba pasang di Blog saya yang ini, hasilnya ternyata sukses.

Cara pemasangannya pun tidak ribet seperti tutorial yang ada di mesin pencari. Penasarankan? baiklah langsung saja simak Cara Mudah Memasang Menu Navigasi Drop Down Responsive di Blog dibawah ini:

- Pertama-tama login ke Blogger.com

- Langsung menuju menu Template/Edit HTML

- Cari kode Menu Navigasi Blog kalian, Contoh:

- Ganti dengan kode dibawah ini

<div class='clear'/>
<input type='checkbox'/>
<label>&#8801;<span>Navigasi&#160;Menu</span></label>
<ul>
<li><a href='/'>Home</a></li>
      <li><a href='URL'>ANDROID <font size='1'>&#9660;</font></a>
        <ul class='menus'>
    <li><a href='URL'>GAME</a></li>
    <li><a href='URL'>APLIKASI</a></li>
    <li><a href='URL'>LAUNCHER</a></li>
    <li><a href='URL'>TUTORIAL</a></li>
    <li><a href='URL'>EMULATOR</a></li>
    <li><a href='URL'>CHEAT</a></li>
    <li><a href='URL'>SAVE DATA</a></li>
        </ul>
    </li>
<li><a href='URL'>PC <font size='1'>&#9660;</font></a>
        <ul class='menus'>
    <li><a href='URL'>GAME</a></li>
    <li><a href='URL'>SOFTWARE</a></li>
    <li><a href='URL'>EMULATOR</a></li>
    <li><a href='URL'>TUTORIAL</a></li>
        </ul>
    </li>
    <li><a href='URL'>BLOGGER <font size='1'>&#9660;</font></a>
        <ul class='menus'>
    <li><a href='URL'>TUTORIAL</a></li>
    <li><a href='URL'>JAVASCRIPT</a></li>
    <li><a href='URL'>SUB MENU</a></li>
    <li><a href='URL'>SUB MENU</a></li>
        </ul>
    </li>
   <li><a href='URL'>TIPS DAN TRIK <font size='1'>&#9660;</font></a>
        <ul class='menus'>
    <li><a href='URL'>FACEBOOK</a></li>
    <li><a href='URL'>TWITTER</a></li>
    <li><a href='URL'>INSTAGRAM</a></li>
        </ul>
    </li>
    <li><a href='URL'>NEWS <font size='1'>&#9660;</font></a>
        <ul class='menus'>
    <li><a href='URL'>INFORMASI TERBARU</a></li>
    <li><a href='URL'>JADWAL</a></li>
    <li><a href='URL'>PREDIKSI DAN HASIL</a></li>
        </ul>
    </li>
    <li><a href='URL'>UNCATEGORIZED <font size='1'>&#9660;</font></a>
        <ul class='menus'>
    <li><a href='URL'>GAME JAVA</a></li>
    <li><a href='URL'>GAME SYMBIAN</a></li>
    <li><a href='URL'>DOWNLOAD MP3</a></li>
    <li><a href='URL'>TEMA JAVA</a></li>
    <li><a href='URL'>VIDEO</a></li>
    <li><a href='URL'>FOTO LUCU</a></li>
    <li><a href='URL'>REQUEST</a></li>
        </ul>
    </li>
    <li><a href='URL'>CERPEN</a></li>
   </ul>
</nav>

- Bisa juga kalian edit terlebih dahulu sesuka hati kalian

- Hasilnya

Cara Mengatasi Widget Yang Tidak Bisa di Sembunyikan di Blog Versi Mobile

Tutorial Cara Mengatasi Widget Yang Tidak Bisa di Sembunyikan di Blog Versi Mobil

Widget yang tidak bisa di sembunyikan di Blog versi Mobile biasanya seperti Widget penghitung jumlah Online pengunjung, tombol Share dan masih banyak lagi.

Biasanya ini terjadi pada Template yang tidak Resvonsipe. Jadi jika di sembunyikan dengan kode "mobile=yes/no" maka tidak akan berhasil, dan yang ada akan menjadikan Template menjadi error saat disimpan.


Berikut Cara Mengatasi Widget Yang Tidak Bisa di Sembunyikan di Blog Versi Mobile dibawah ini:

- Copy kode dibawah ini

<b:if cond='data:blog.isMobileRequest == "false"'>JavaScript yang ingin di sembunyikan</b:if>

- Setelah itu Login ke Blogger.com, langsung menuju menu Template/Edit HTML, cari kode JavaScript yang tidak bisa disembunyikan sebelumnya.

- Jika sudah menemukan kodenya, langsung pastekan.
Contoh:

<b:if cond='data:blog.isMobileRequest == "false"'><br><script type='text/javascript'>var switchTo5x=true;</script><br><script id='st_insights_js' src='http://w.sharethis.com/button/buttons.js?publisher=3238d6b6-229c-414d-a155-698292a40f92' type='text/javascript'/><br><script type='text/javascript'>stLight.options({publisher: "3238d6b6-229c-414d-a155-698292a40f92", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script><br><span class='st_fblike_hcount' displayText='Facebook Like'/><br><span class='st_facebook_hcount' displayText='Facebook'/><br><span class='st_twitter_hcount' displayText='Tweet'/><br><span class='st_googleplus_hcount' displayText='Google +'/><br><span class='st__hcount' displayText=''/><br><span class='st_sharethis_hcount' displayText='ShareThis'/><br></b:if>

Cara Menghilangkan Mengenai Saya/About Me di Blog

Tutorial Cara Menghilangkan Mengenai Saya/About Me di Blog

Sebenarnya Mengenai Saya atau About Me tidaklah begitu mengganggu, tetapi jika kalian ingin tetap menyembunyikan itu hak kalian, walaupun sebenarnya tidak ditampilkan/dihapus juga bisa haha, ok lupakan.


Berikut Cara Menghilangkan Mengenai Saya/About Me di Blog dibawah ini:

Login ke Blogger

- Langsung menuju Template/Edit HTML

- Cari kode

 <b:widget id="Profile1" locked="false" title="Mengenai Saya" type="Profile">
(Gunakan CTRL F untuk pencarian lebih cepat)

- Setelah ketemu langsung hapus, kemudian save/simpan kembali Template

- Selesai, sekarang Mengenai Saya/About Me/Profil sudah tidak ada lagi

Cara Menampilkan Dan Menyembunyikan Widget di Blog Versi Mobile

Tutorial Cara Menampilkan Dan Menyembunyikan Widget di Template Blog Versi Mobile

Untuk Blog versi Mobile diusahakan jangan terlalu banyak menampilkan Widget-Widget, apalagi Widget itu tidak terlalu penting, karena akan membuat loading dari Blog tersebut akan sangat lama. Jadi berhati-hatilah.
Tapi bukan berarti Widget untuk Template Blog versi Mobile harus tidak ditampilkan sama sekali. Widget yang penting untuk Template Blog versi Mobile menurut saya sendiri adalah, Popular Posts, Recent Post, Random Post dan Widget-Widget yang menampilkan postingan, tapi ingat! Jangan berlebihan.

Maka dari itu saya akan share Tutorial Cara Menampilkan Dan Menyembunyikan Widget di Blog Versi Mobile


Berikut Cara Menampilkan Dan Menyembunyikan Widget di Template Blog Versi Mobile dibawah ini:

- Buka menu Tempalte/Edit HTML

- Cari widget yang mau di sembunyikan atau di tampilkan di versi Mobile, untuk mempermudah pencarian gunakan CTRL F.

- Kemudian copy kode dibawah ini, pastekan di Widget di yang ingin di tampilkan atau di sembunyikan.
Menampilkan
mobile='yes'

Menyembunyikan
mobile='no'

Contoh:
Untuk menampilkan Widget Blog versi Mobile
<b:widget id='HTML1'  mobile='yes' locked='false' title='Recent Posts' type='HTML' visible='true'>

Untuk menyembunyikan Widget Blog versi Mobile
<b:widget id='HTML1' mobile='no' locked='false' title='Recent Posts' type='HTML' visible='true'>

Jadi untuk menampilkan dan menyembunyikan Widget di Template Blog versi Mobile adalah hanya dengan menambahkan kode mobile='yes' untuk menampilkan dan untuk menyembunyikan ganti yes ke no.

Cara Membuat Komentar Pop-up Comment di Blog

Tutorial Cara Membuat Komentar Pop-up Comment di Blog

postingan ini hanya untuk melengkapi postingan saya yang berjudul  Inilah 4 Cara Mengatasi Kolom Komentar Tidak Muncul di Blog Versi Mobile dikarenaka saat saya sedang bikin postingan yang berjudul "Inilah 4 Cara Mengatasi Kolom Komentar Tidak Muncul di Blog Versi Mobile" sedang mengalami error, saat menuliskan poin terakihr yaitu berjudul "Cara Membuat Komentar Pop-up Comment d Blog"


Jadi langsung saja menuju ke KTP dibawah ini:

Langsung menuju ke sumbernya Cara Membuat Komentar Pop-up Comment di Blog

Inilah 4 Cara Mengatasi Kolom Komentar Tidak Muncul di Blog Versi Mobile - See more at: http://k0k0h.blogspot.co.id/2016/11/inilah-4-cara-mengatasi-kolom-komentar_18.html#sthash.l5q4hjHn.dpuf

Inilah 4 Cara Mengatasi Kolom Komentar Tidak Muncul di Blog Versi Mobile - See more at: http://k0k0h.blogspot.co.id/2016/11/inilah-4-cara-mengatasi-kolom-komentar_18.html#sthash.l5q4hjHn.dpuf

Inilah 4 Cara Mengatasi Kolom Komentar Tidak Muncul di Blog Versi Mobile - See more at: http://k0k0h.blogspot.co.id/2016/11/inilah-4-cara-mengatasi-kolom-komentar_18.html#sthash.l5q4hjHn.dpuf

Inilah 4 Cara Mengatasi Kolom Komentar Tidak Muncul di Blog Versi Mobile

 Inilah 4 Tutorial Cara Mengatasi Kolom Komentar Tidak Muncul di Blog Versi Mobile

Kolom kometar yang tidak muncul biasanya karena  "#comment-editor" tidak 100%, jadi jangan kurang atau lebih, jadi yang harus dilakukan adalah mencari kode  "#comment-editor"  (gunakan CTRL F), jika lebih/kurang dari 100%, maka gantilah menjadi 100%.  

1.
➜ Caranya:
➜ Langsung menuju menu Tata Letak/Template/Edit HTML
➜ Cara kode seperti dibawah ini

#comment-editor{width:100%!important;

Jika width kurang dari 100% atau lebih, ubahlah menjadi 100% seperti kode diatas


Jika tetap tidak muncul, sekarang coba cara yang kedua.

2.
➜ Caranya:
➜ Langsung menuju menu Tata Letak/Template/Edit HTML
➜ Copy kode dibawah ini

.blogger-iframe-colorize {display: block !important; }

Letakkan tepat diatas kode
(Gunakan CTRL F)

3.

Masih tidak muncul juga?
Berikut cara yang ketiga
Langsung menuju menu Tata Letak/Template/Edit HTML


Copy kode dibawah ini:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

Cari kode "style='display:none'"  (Gunakan CTRL F) kemudian hapus, pastekan kode diatas yang baru saja di copy.

Apa? masih tidak muncul juga. Jalan satu-satunya adalah dengan membuat "Pop-up Comment"

4.
Caranya:
Selengkapnya, langsung menuju link dibawah ini:

Cara Membuat Komentar Pop-up Comment d Blog

Cara Membuat Widget Berdasarkan Label di Blog

Tutorial Cara Membuat Widget Berdasarkan Label di Blogger

Widget berdasarkan label memang sangat penting untuk suatu Blog, apalagi Blog khusus share Game Android, tentu sangat dibutuhkan.

Biasanya Blog khusus Game Android akan menyediakan label posting khusus "Game Android Paling di Cari, Game Android Terpopuler" dan masih banyak lagi.

Untuk Blog yang bukan khusus share game juga bisa, terserah bebas mau Blog yang tidak berkategori seperti Blog saya saat ini juga sangat bisa.

Cara Memasang Widget Berdasarkan Label di Blogspot dibawah ini:

-  Copy terlebih dahulu kode Widget dibawah ini

<style><br>img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style><br><script><br>function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){<br>if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}<br>if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)<br>{<br>s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){<br>thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';<br>}<br>var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write(' <li class="clearfix">');<br>if(showpostthumbnails==true)<br>document.write('<img class="recent_thumb" src="'+thumburl+'"/>');<br>document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');<br><br>    if ("content" in entry) {<br>      var postcontent = entry.content.$t;}<br>    else<br>    if ("summary" in entry) {<br>      var postcontent = entry.summary.$t;}<br>    else var postcontent = "";<br>    var re = /<\S[^>]*>/g;<br>    postcontent = postcontent.replace(re, "");<br>if (showpostsummary == true) {<br>      if (postcontent.length < numchars) {<br>          document.write('<i>');<br>         document.write(postcontent);<br>          document.write('</i>');}<br>      else {<br>          document.write('<i>');<br>         postcontent = postcontent.substring(0, numchars);<br>         var quoteEnd = postcontent.lastIndexOf(" ");<br>         postcontent = postcontent.substring(0,quoteEnd);<br>         document.write(postcontent + '...');<br>          document.write('</i>');}<br>}<br><br>var towrite='';var flag=0;<br>document.write('<br><b>');<br><br>if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}<br><br>if(showcommentnum==true)<br>{<br>if (flag==1) {towrite=towrite+' | ';}<br>if(commenttext=='1 Comments') commenttext='1 Comment';<br>if(commenttext=='0 Comments') commenttext='No Comments';<br>commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';<br>towrite=towrite+commenttext;<br>flag=1;<br>;<br>}<br><br>if(displaymore==true)<br>{<br>if (flag==1) towrite=towrite+' | ';<br>towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more»»</a>';<br>flag=1;<br>;<br>}<br>document.write(towrite);<br>document.write('</b></li>');<br>if(displayseparator==false)<br>if (i!=(numposts-1))<br>document.write('<hr color="#d9f1fa" size=0.5>');<br>}document.write('</ul>');<br><br>}<br></script><br><script><br>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;<br></script><script src="http://k0k0h.blogspot.com/feeds/posts/default/-/Game%20Android?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"><br></script><div class="clear"/></div>

Ganti "k0k0h" dengan alamat Blog kalian masing-masing.
Ganti "Game%20Android%20Terpopuler" dengan nama label/kategori kalian (jangan dihapus %20 jika nama label kalian hanya satu kata).
"var numposts = 5" adalah jumlah posting yang ditampilkan, jadi ganti no 5-nya saja.

- Kemudian menuju menu Tata Letak.

- Klik Tambahkan Gadget.

- Setelah itu tambahkan HTML/JavaScript.

- Terakhir pastekan kode Widget yang kalian copy diatas tadi didalam kolom yang sudah disediakan, klik Simpan.

Cara Membuat Recent Post Dan Random Post Dengan Thumbnail di Blog (Work 100%)

Tutorial Cara Membuat Recent Post Dan Random Post Dengan Gambar di Blogspot (Work 100%)

Recent Post/Artikel Terbaru dan Random Post/Posting Acak memang menjadi salah satu Widget penting di Blog, tentu suatu kewajiban untuk di pasang di Blog.

Widget Recent Post dan Random Post memang sudah banyak di share oleh para Blogger, tetapi tidak semua cocok untuk dipasang, biasanya jika template tidak cocok dengan Widget tersebut maka tidak akan tampil juga Recent Post atau Random Post-nya. Maka dari itu saya tambahin di akhir judul artikelnya dengan kata "Work 100%", karena ini memang Work 100%, bahkan tampilannya pun akan menyesuaikan Template Blog.

Contohnya seperti Widget yang saya pasang saat ini di Blog k0k0h.blogspot.com

Berikut Cara Memasang Recent Post Dan Random Post Dengan Thumbnail di Blog (Work 100%) dibawah ini:

Copy kode dibawah ini! kemudian letakkan di Gadget Sidebar di Blog kalian
Caranya:
➞ Langsung menuju menu Tata Letak-Tambahkan Gadget-HTML/JavaScript
➞ Copy kode dibawah ini, kemudian pastekan didalam kolom yang sudah disediakan (jangan lupa beri judul).

RECENT POST
<style><br>img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style><br><script><br>function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){<br>if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}<br>if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)<br>{<br>s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){<br>thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';<br>}<br>var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write(' <li class="clearfix">');<br>if(showpostthumbnails==true)<br>document.write('<img class="recent_thumb" src="'+thumburl+'"/>');<br>document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');<br><br>    if ("content" in entry) {<br>      var postcontent = entry.content.$t;}<br>    else<br>    if ("summary" in entry) {<br>      var postcontent = entry.summary.$t;}<br>    else var postcontent = "";<br>    var re = /<\S[^>]*>/g;<br>    postcontent = postcontent.replace(re, "");<br>if (showpostsummary == true) {<br>      if (postcontent.length < numchars) {<br>          document.write('<i>');<br>         document.write(postcontent);<br>          document.write('</i>');}<br>      else {<br>          document.write('<i>');<br>         postcontent = postcontent.substring(0, numchars);<br>         var quoteEnd = postcontent.lastIndexOf(" ");<br>         postcontent = postcontent.substring(0,quoteEnd);<br>         document.write(postcontent + '...');<br>          document.write('</i>');}<br>}<br><br>var towrite='';var flag=0;<br>document.write('<br><b>');<br><br>if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}<br><br>if(showcommentnum==true)<br>{<br>if (flag==1) {towrite=towrite+' | ';}<br>if(commenttext=='1 Comments') commenttext='1 Comment';<br>if(commenttext=='0 Comments') commenttext='No Comments';<br>commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';<br>towrite=towrite+commenttext;<br>flag=1;<br>;<br>}<br><br>if(displaymore==true)<br>{<br>if (flag==1) towrite=towrite+' | ';<br>towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more»»</a>';<br>flag=1;<br>;<br>}<br>document.write(towrite);<br>document.write('</b></li>');<br>if(displayseparator==false)<br>if (i!=(numposts-1))<br>document.write('<hr color="#d9f1fa" size=0.5>');<br>}document.write('</ul>');<br><br>}<br></script><br><script><br>var numposts = 10;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;<br></script><script src="http://k0k0h.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"><br></script><div class="clear"/></div><br>
RANDOM POST
<style><br>#random-posts img{float:left;margin-right:10px;<br>width:65px;height:50px;background-color: #F5F5F5;padding: 3px;}<br>ul#random-posts {list-style-type: none;}<br></style><br><ul id='random-posts'><br><script type='text/javaScript'><br>var rdp_numposts=5;<br>var rdp_snippet_length=150;<br>var rdp_info='yes';<br>var rdp_comment='Comments';<br>var rdp_disable='Comments Disabled';<br>var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};<br></script><br><script type='text/javaScript'><br>function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1HJJKvMkl-WX4rsBaexVwZdXsyOvTv_VYrjyuh3CFYaXiifzlDBkUqydzdoqBDIUE6UxFXFNOrHW-yzIjgPLn_BG4BN5E6tUTsSVYx7-tvnKEJNvXRVlN5VHoEu9U9f_4AGiZP1nar-Y/s1600/no_thumb.png"}}};document.write(' <li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};<br></script><br></ul>

Recent Post
Ganti tulisan "k0k0h" dengan alamat blog kalian dan jumlah postingan yang ingin ditampilkan "var numposts = 10" (tanpa tanda petik)

Random Post
Untuk Random Post tanpa mengganti alamat Blog dan hanya mengganti jumlah posting yang ingin ditampilkan "var rdp_numposts=5" (tanpa tanda petik)