Bikin Recent Post by Label With Thumbnail Script

Kali ini Bli Tyan akan mengangkat topik Cara Membuat Recent Post by Label With Thumbnail di blogger (yaitu Recent Post yang akan menampilkan artikel yang berada di dalam label tertentu yang di sertai dengan gambar).

Dengan menggunakan script recent post by label with thumbnail ini teman bisa menampilkan deretan artikel di sidebar blog teman dengan artikel yang teman inginkan.

Misalnya Bli Tyan ingin menampilkan deretan artikel terbaru tentang blogger tutorial atau Ebook Motivasi maka Bli Tyan bisa menggunakan script ini.

Berikut Demo Script Recent Post by Label With Thumbnail (Khusus Blogger Template)

Nah gambar di atas adalah contoh hasil kerja dari script recent post by label with thumbnail ini, cara pasang widget ini gampang kok.

Cara Pasang Recent Post by Label With Thumbnail di Blogger
Seperti biasa langkah yang harus di lakukan adalah :

1. Login ke Dashboard Blogger
2. Klik Rancangan/Design/Tata Letak

Jika teman sudah berada di halaman Rancangan silakan pilih widget HTML/JavaScript kemudian masukkan script berikut:

<style>
/*** RECENT POST BY LABEL ***/
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:75px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}
</style>

<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/AVvXsEjgeUS99DQHR0IhPidl-M03M63e6xDQVsqgmX6HksUoCzC_B7duR4H3bhv6jKq758hugPz8_EB27FTG8uAz74lVjNVQdYXJZAiU90ZJj2K1FddUYUOhAqqFk9Nd__Hk__Z1wJEE939dp6CF/';}
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>
');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('
');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>
<script type='text/javascript'>var numposts = 5;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="UrlBlogAnda/feeds/posts/default/-/Nama Label?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Ket:

numposts = 5 (Angka 5 adalah jumlah recent post yang akan di tampilakn, silakan ganti sesuai keinginan teman)
UrlBlogAnda = Ganti dengan Url blog teman lengkap dengan http:// (contoh http://blog.ahmadrifai.net)
Nama Label = Isi dengan Nama Label yang artikelnya ingin di tampilkan ( contoh blogger%20template) biasanya label yang pakai spasi di pisahkan dengan %20.

Nah itulah panduan cara pasang script recent post by label with thumbnail

Selamat mencoba dan semoga berhasil : ) sampai jumpa di posting blogger tutorial Bli Tyan berikutnya.


Please subscribe, leave a comment, follow this blog and share this article with your friends and colleagues.
by: http://blityan.blogspot.com

Share This On :

Tweet

Related Post :