Cara Membuat Recent Post Thumbnail Dengan Per/Label !


Cara Membuat Recent Pos/Artikel Terbaru Pada Blogger  Per Label ! - Recent Pos adalah widget yang menampilkan artikel terbaru pada sebuah Blogger. Tapi yang akan dipostingkan kali ini adalah membuat Recent Post per/label. Recent Post bisa dibilang sih sama kaya Popular Post. Karena Fiturnya sama bedanya kalo Popular Post adalah Artikel yang paling sering dikunjungi. Sedangkan Recent Post adalah menampilkan artikel sebagian atau bisa dibilang per/label. Widget recent post ini tidak hanya menampilkan judul saja tetapi juga thumbnail (Gambar) dan Sinepet (Ringkasan) isi postingan terbaru blog. Oke langsung saja kita praktekan ...

Cara Pertama :

1. Buka Blogger - Login Akun!
2. Dashboard - Tata Letak/Layout!
3. Tambahkan Gadget - Pilih HTML Java Script.
4. Copy - Paste kode berikut ini.

<style>
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>
<script>
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++){
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='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
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('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><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('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

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">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');

}
</script>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;
</script><script src="http://maycyber-download.blogspot.com/feeds/posts/default/-/Template?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

Var Numpost = 5 : Mau berapa Artikel yang akan ditampilkan.
Ganti URL saya dengan Alamat Blogger Anda.
Feed/post/default/-/Template : Silakan Ganti label apa yang akan mau ditampilkan.

5. Simpan Widgets.

Kurang lebih segitu saja. Sekian dari saya semoga Bermanfaat! Thank's For Reading . Thank's Visited ..

Happy Blogging^.^

Related Post

3 Responses to "Cara Membuat Recent Post Thumbnail Dengan Per/Label !"

  1. asem gimana mau copy kodenya gak bisa ptotected by copyscape

    ReplyDelete
  2. Haha ini niat ngasih tutorial apa enggak ya? Kodenya pun ikut tidak bisa di copy =D

    ReplyDelete
    Replies
    1. Maaf mas, sebelumnya ada pembaruan kotak script, hanya kotak script haightligt saja yang bisa di copy, sedangkan kotak script diatas masih saya block copy-paste. Nanti saya usahakan di update artikelnya...

      Delete