Cara Membuat Recent Post Berdasarkan Label dan Thumbnail

Cara Membuat Recent Post Berdasarkan Label dan Thumbnail - Pada tutorial kali ini, Saya akan berbagi cara membuat recent post berdasarkan label dan thumbnail. Widget ini akan otomatis menampilkan update posting kita hanya pada label/kategori yang tentunya bisa sobat pilih sendiri. Contoh bisa sobat lihat pada gambar di samping ini.

Nah kalo sobat blogger tertarik buat masang widget ini, gampang koq. Tinggal ikuti tutorial berikut ini…

1. Seperti biasa, login ke akun blogger sobat
2. Pergi ke tab rancangan >> edit html
3. EXPAND TEMPLATE WIDGET
4. cari kode ]]></b:skin>.

(*Gunakan F3 di keyboard untuk mempermudah pencarian)

5. Copy paste kode di bawah ini sebelum kode No.4

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

6. Scroll ke bawah dan temukan kode </head>
7. Copy paste kode di bawah ini sebelum kode No.5

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_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++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWGscXt3KG99YQS4RAEjwp5SencOxIvD1aoBpf3uwZreHHdbA76vSjaq7oJ8QqMbKPueIz4F5Dt0YkKRlDiXgDCfyp_vSoSGuy_hbqpMp1Vo8m_dAFzq7_sY5Xh06cvdDOiusGUeSn6ll/';}
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">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

8. SAVE template.sampai disini belum selesai.
9. masih di menu DESIGN >> PAGE ELEMENTS >> ADD GADGET >> HMTL/javaScript
10. Masukkan kode di bawah ini kedalam contents

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/NAMA LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

11. Untuk kategori/label yang berspasi seperti Belajar SEO Blogspot, Blog SEO dsb, ganti lah spasi dengan kode %20. Contoh penulisan lengkap:
http://daw-xp.blogspot.com/feeds/posts/default/-/Belajar%20SEO%20Blogspot
atau,
http://daw-xp.blogspot.com/feeds/posts/default/-/Blog%20SEO
12. Jika sudah selesai masukkan kodenya, jangan lupa sobat blogger masukkin judul/title widgetnya.
13. Klik Save / Simpan.
14. Selesai! Semoga bermanfaat…


Jika ada yang kurang dimengerti, silahkan tanyakan dengan tinggalkan komentar.

Selayaknya Dibaca:

• Cara Membuat Recent Post Dengan Slideshow
• Cara Menambahkan Recent Posts Dengan Bullets

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Widget

• Cara Membuat/Memasang Widget Top Komentator Berbentuk Cloud
• Cara Menambah Tombol Google +1
• Membuat Navigasi Breadcrumb Di Blogspot
• Cara Membuat Widget Top Komentator
• Cara Membuat Widget Translator Berbentuk Bendera
• Membuat Kotak Berlangganan Via Email
• Cara Membuat Recent Post Dengan Thumbnails
• Cara Membuat Kotak Blogroll dan Efek Marque
• Cara Membuat dan Memasang Shoutbox di Blog
• Menambahkan Random Posts Widget
• Cara Menambahkan Recent Posts + Comment Dengan Javascript
• Recent Artikel Blog di Facebook Melalui NetworkedBlogs
• Menambahkan Artikel Populer Pada Sidebar
• Cara Membuat Tab View Widget Pada Sidebar

Blog

• Ribuan Backlink Gratis dari IMTalk
• Cara Memasang Tweetmeme di Setiap Postingan
• Cara Mendaftarkan Blog ke DMOZ
• Cara Membuat Short URL Google Plus
• Cara Daftar Google Plus (Google+)
• Google Update Pagerank Juli 2011
• Cara Menghapus dan Mengecek Broken Link Pada Blog
• Apa itu Google Plus (Google+) ?
• Tips Menghadapi Komentar Negatif
• Menambah Meta Tag Untuk Perkuat Postingan Kontes SEO
• Kontes SEO, Berbahaya!
• Pentingnya Menjawab Setiap Komentar di Blog
• Kenali Pengunjung Blog Anda
• 10 Artikel Terbaik Bulan Juni 2011
• Metode On Page dan Off Page SEO
• Cara Membuat Link Internal di Setiap Postingan
• Siapa Pengunjung Setia di Blog Anda?
• Tips Mendapatkan Pengunjung Setia di Blog
• Favicon Generate - Fitur Baru Blogger
• Cara Menambah Tombol Google +1
• DAW-XP Toolbar - Akses Cepat Menuju DAW-XP
• Cara Membuat Toolbar Alexa Sendiri
• Cara Memasang Alexa Widget
• Manfaat Alexa Toolbar
• Apa itu Alexa Rank?

Anda sedang membaca artikel tentang Cara Membuat Recent Post Berdasarkan Label dan Thumbnail dan anda bisa menemukan artikel Cara Membuat Recent Post Berdasarkan Label dan Thumbnail ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-recent-post-berdasarkan.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Recent Post Berdasarkan Label dan Thumbnail ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Recent Post Berdasarkan Label dan Thumbnail sumbernya.