Sebelum menggunakan trik ini, Saya menggunakan recent post bawaan dari blogger yang bisa kita ambil di settingan widget dan mengaturnya berdasarkan tata letak. Tapi karena merasa ingin ada yang berbeda, Saya mencoba membuat modifikasi pada tampilan widget berdasarkan label.
Label yang saya gunakan saat ini adalah 'trends', yang lebih kepada fokus pada berita-berita terbaru. Anda bisa mengganti label tersebut sesuai keinginan anda.
oke baiklah, kita lanjut ke triknya yah. Silakan di ikuti:
1. Buka Template>Edit HTML
2. Letakkan kode berikut ini diatas kode ]]></b:skin>
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px} img.label_thumb:hover{background:#f7f6f6} .label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0} ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
3. Copas kode berikut ini diatas kode </head>
<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/AVvXsEi8Y5SMyB1eRXBTf4BnjkwEKVtAIdnCUNA5OzGqUkT0xoE9yy31zqCrnjyOArZ0plaoFoT29yaqT6dXZzJaLuyryN3prMRm2LWVJX5Wv-SC8Xm_NmlCuLae-XcFc9DtCJEYkaHSm-XE6QKs/';} 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>
4. Save Template!
5. Klik "Layout" untuk menambahkan widget
6. Klik "Add a Gadget" > pilih "HTML/Javascript"
7. Copas kode berikut ini kedalamnya :
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 0;</script> <script type="text/javascript" src="/feeds/posts/default/-/trends?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> <script type="text/javascript"> function recentpostslist(json) { document.write('<ul>'); for (var i = 1; i < json.feed.entry.length; i++) { for (var j = 1; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); } </script> <script src="/feeds/posts/summary/-/trends?max-results=6&alt=json-in-script&callback=recentpostslist"></script> <a href="/search/label/trends" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
8. Save! Dan hasilnya akan seperti ini
Script yang tertulis dengan warna MERAH adalah label yang bisa anda ganti sesuai label yang ada di blog anda. Contohnya label Traveling, Tips, Hot News, atau lainnya.
Oke selesai tulisan sore ini. itulah Trik Modifikasi Tampilan Widget Recent Post dengan Label Trending Topic yang bisa saya bagikan.
Tutorial ini diambil dari Blog Maskolis dan diberikan sedikit modifikasi pada beberapa bagiannya. Terima kasih.
