Cara Pasang Recent Post Thumbnail Menurut Label (Jquery)

Khairul Abdal-16 Juni 2012 Hey kawan kita ketemu lagi, apa kabar semuanya? pasti sehatkan? disini saya akan membawa postingan terbaru dan terhangat.

Cara memasang recent post thumbnail label di blog. Sebelumnya CPB pernah Posting Artikel tentang Cara Membuat Recent Post Jquery nah kali ini CPB akan ngasih tutorial mengenai recent post menurut label.
Sobat blogger pasti sudah tidak asing lagi mendengar kata-kata recent post atau artikel terbaru atau mungkin sudah bosen mendengar kata-kata tersebut atau mungkin sobat blogger beranggapan artikel ini sudah basi,sudah terpendam bersama artikel-artikel yang sudah basi lainnya.Tetapi apa mungkin sobat blogger yang baru ataupun newbie tahu tentang artikel semacam ini..??saya kira tidak.Oleh karena itu saya ingin memberi artikel ini buat yang masih newbie termasuk saya sebagai admin blog ini pokoknya yang baru tahu artikel kaya gini aja dech..hehe.

Recent post ini menurut saya lebih lengkap dari pada yang lainnya karena fiturnya yaitu menampilkan artikel terbaru dengan thumbnail (gambar) dan juga kita bisa mengatur artikel terbarunya berdasarkan label atau kategori artikel.saya rasa widget blog ini cocok buat template yang banyak menampilkan artikel terbaru dengan kategori yang berbeda.

Untuk lebih jelasnya cara memasang recent post dengan thumbnail berdasarkan label ini sobat bisa ikuti langkah-langkah di bawah ini.

1. LOGIN Blogger
2. Didasbor sobat pilih RANCANGAN/DESIGN >> 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('<ulclass="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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
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>

apabila nama labels atau kategori lebih dari satu kata maka penulisannya disisipkan %20.contoh : Tutorial blog maka di label penulisannya Tutorial%20Blog dan seterusnya apabila sampai 2 kata lebih.

11. kemudian pilih SAVE

Untuk menambah artikel terbarunya berdasarkan kategori lainnya sobat cukup COPAS kode no.10 dan sesuaikan nama ketegorinya.

Sumber:http://copybinpaste.blogspot.com/2011/08/cara-recent-post-thumbnail-label-blog.html

 Senang telah berbagi informasi dan ilmu kepada kawan dan semuanya... Terima kasih telah berkunjung hari ini,untuk membaca sebuah Artikel yang tiada artinya Wassalamualaikum....

Share :

Tweet

More

Related Post