Blog Personal tentang tips Blogging dan Internet

Membuat Widget Recent Posts By Tag Untuk Blogger

Recent Posts By Tag
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="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/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

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

39 Komentar untuk "Membuat Widget Recent Posts By Tag Untuk Blogger"

ABDI NEGARA

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 :-)

Kopen Gede

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

Terima kasih, salam juga dari blogger Garut :)

Kang Mousir

Yang tahap ketiga jangan disimpan di editor template tapi disimpan di widget blogger

Kopen Gede

ooow gtu,, dimana sob? baru belajar nih

Kopen Gede

oiyaa udah ketemu terimakasih buwanyaaak sob :P :P

Saya Arkham

Keren banget... style nya itu loh @@,

Dian AnaR-chyta

Ini seperti yg di gunakan di template ini ya?
Loading'nya juga gak terasa sob dan tampilannya sederhana namun elegant.

ABDI NEGARA

Udah dibawa pulang juragan, lumayan dituker solar nanti, soalnya solar udah mulai langka :lol:

Muhammad Setia Abdillah

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

Muhammad Setia Abdillah

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

Sudah saya kirim dan jawabnya pesannya via email

Kang Mousir

Sip, namanya juga belajar hehe :D

Kang Mousir

hehe iya seperti yang dipakai di template ini :D

Kang Mousir

Diamankan dahulu nanti dijual lagi

Kang Mousir

yang recent post by tagnya disimpan di widget HTML/JavaScript

Rozaq Abdul

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

Kang Mousir

Di template Sang SEO kan ada widget yang sama seperti di template ini, coba ambil aja kodenya dari template itu terus pasang di blogmu

Muhammad Rizky

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

Dadang Vulkanisir

:-d Terimakasih sudah saya pake..sekalian Template Sang Seo nya juga
Kutan teh ti Garut na ti mana Kang ?
sim kuring ge ti garut ti Cibatu,tapi ayeuna ngumbara di Medan..
Salam kanggo orang Garut

Kang Mousir

Abdi mah urang Tarogong Kang, tebih oge ngumbarana :)
Ditampi salamna Kang :D

abi

Kang... bisa berfungsi gak jika semua script di atas dimasukkan dalam 1 kotak widget ? biar lebih praktis gitu ? :roll:

Agi Hiroshi

kang aku ga bisa, ga bisa aktif coba ceks usaha-budidayaikan.blogspot

Agi Hiroshi

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

kang febby

kang cara hapus widget yang gak bisa di hapus itu gimana yak ??

kang febby

Untuk tampilan lurus kebawah gitu gimana ngaturnya ya kang ?
soalnya punyaku kebawah malah ngruncing.. apa itu udah bawaan ya

M. AINUR ROFIQ

pak, g bisa e, cuma muncul " }); ,

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 !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d