Membuat Widget Recent Posts By Tag Untuk Blogger

Membuat Widget Recent Posts By Tag Untuk Blogger

Widget Recent Posts By Tag adalah widget yang dipilih berdasarkan label tertentu pada blogger. Jadi dengan adanya widget ini lebih memudahkan pengunjung dalam mencari artikel yang lebih spesifik. Silakan coba juga koleksi widget lainnya seperti Widget Recent Posts, Widget Random Posts dan Widget Most Commented.

Cara Memasang Widget Recent Posts By Tag Untuk Blogger

1. Pertama simpan dahulu CSS ini diatas kode ]]></b:skin> atau </style>
/*Recent Post By tag*/
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:16px;margin:10px 0 0}
2. Silakan salin dan simpan kode ini diatas kode </head>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger by Kang Mousir
// http://gplus.to/mousir - http://kang-mousir.blogspot.com
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.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!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xSn5IaDE_FtEEQaBR0BLnnghpzDHQea4M3an7MSGQzsoBaDQHrCn2MFHqFfBf45NYU4EsGCoNOjQZOdo5ibHL39qo1pLgeAGb7how2-JzOGTpUd9Dr4mAlDzEJ1CpKARXGd-dFXsdK6R/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>
3. Kemudian simpan kode ini pada widget blogger HTML/JavaScript.
<script>
document.write("<script src=\"/feeds/posts/default/-/Belajar%20SEO?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Pengaturan

IconTeks
var numPostsIsi dengan jumlah artikel yang ingin ditampilkan
var showpostthumbnailsPilih true jikn ingin menamapilkn gambar dan false untuk menghilangkannya
var showpostdatePilih true jika ingin menamapilkn tanggal dan false untuk menghilangkannya
Belajar%20SEOSilakan ganti dengan label yang di inginkan, bila lebih dari dua kata gunakan %20 sebagai pengganti spasi

Artikel Terkait

Komentar

Unknown
Alhamdulillah,akhirnya dapet Petromax di Blog ini kang ehhehe :D
Kang Mousir
Silakan dibawa pulang PERTAMAX nya haha :D
Hariyanto Wijoyo
tutorialnya sederhana banget..namun mudah dipahami..luarbiasa...keep happy blogging always...salam dari Makassar :-)
Kang Mousir
Terima kasih, salam juga dari blogger Garut :)
Unknown
kok error gini ya sob?? Kesalahan saat mengurai XML, baris 1217, kolom 29: Open quote is expected for attribute "src" associated with an element type "script".
Kang Mousir
Yang tahap ketiga jangan disimpan di editor template tapi disimpan di widget blogger
Unknown
oiyaa udah ketemu terimakasih buwanyaaak sob :P :P
Dian Anarchyta
Ini seperti yg di gunakan di template ini ya?
Loading'nya juga gak terasa sob dan tampilannya sederhana namun elegant.
Kang Mousir
hehe iya seperti yang dipakai di template ini :D
sdfsdfsd
mohon mmaaf kalo saya menggangu anda, saya hanya berminat pasang iklan di website anda, berupa link atau banner ? mohon dikirim harga pasang link di blog ini dan pasang banner di blog ini selama 1 bulan, jika harga murah kami akan pasang 2-3 link disini. :roll:
TERIMA KASIH ! :-d
Salam Hangat Dari ;)
http://www.jasaseoone.com
sdfsdfsd
Mohon maaf kirim ke email : csjasaseoone@gmail.com
mohon kerja samanya ^_^ :oops:
santika fadilah
aku otak atik sendiri meni susah, pas berhasil cakep sangat.. :D :-d
Kang Mousir
Sip, namanya juga belajar hehe :D
Unknown
Cara masang di bawah postingan agar jadi 2 (saling nempel) kayak blog ini gimana ya,..?
Mohon pencerahannya Thx.
Kang Mousir
Coba ambil kodenya di template Sang SEO aja :D
Unknown
Sukses mendarat di blog saya tutorialnya Kang Mousir. Akhirnya bisa juga setelah beberapa hari mencari di Google dan artikel atau tutorialnya salah. Semenjak mondar-mandir di Google akhirnya ketemu juga nih blognya Kang Mousir. Terima kasih banyak atas tutorialnya. Update terus yang seru-seru dan penuh tantangan tutorial blognya. :-d
Kang Mousir
hehe sama - sama gan. Pasti update terus kalau ada waktu hehe
abi
Kang... bisa berfungsi gak jika semua script di atas dimasukkan dalam 1 kotak widget ? biar lebih praktis gitu ? :roll:
Payara P.AIN
kang aku ga bisa, ga bisa aktif coba ceks usaha-budidayaikan.blogspot
Payara P.AIN
aku pakai template bagas31, tapi wingetnya ga bisa, mau cari buat bikin list label bingung pakai yang mana, banyakan eror ada saran ga? blognya masih uji coba bukan aslinya. coba diceks kang.
Koeli Online
ramuannya mantap kang
:-d
:-d
Unknown
kang cara hapus widget yang gak bisa di hapus itu gimana yak ??
Unknown
Untuk tampilan lurus kebawah gitu gimana ngaturnya ya kang ?
soalnya punyaku kebawah malah ngruncing.. apa itu udah bawaan ya
marrofi
pak, g bisa e, cuma muncul " }); ,
Rezz
bang gimana cara hilangin simbol bulat warna hitam ya di belakang gambar nya

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Batal