membuat recent post berdasarkan label dan thumbnail. Widget ini akan otomatis menampilkan update posting anda hanya pada label/kategori yang tentunya bisa anda pilih sendiri sesuai selera. Sebagai contoh sederhana bisa andat lihat pada gambar di samping ini.
Jika anda Tertarik untuk memasang widget ini Silahkan anda. ikuti tutorial berikut ini…
- Seperti biasa, login ke akun blogger anda
- Pergi ke tab rancangan >> edit html
- Centang EXPAND TEMPLATE WIDGET terlebih dahulu
- Jangan lupa Download Template, untuk menghindari kerusakan saat pengeditan
- Cari kode ]]></b:skin>
- (*Gunakan F3 di keyboard untuk mempermudah pencarian)
- Copy paste kode di bawah ini sebelum kode ]]></b:skin>
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{}
- Temukan kode </head> dengan cara... (*Gunakan F3 di keyboard untuk mempermudah pencarian)
- Copy paste kode di bawah ini sebelum 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/AVvXsEjsmojE8svjYVXk21EqeEEQ9HFRWmApiqiKW2sP5XRyWKaluV1zOSw4BfrSu2cFXhPgpBhmeaiOZ9e9DmGW9Av9dRhKDU_VsIh6jyAPlK8v10ydflVduSwciLCxOEfXh8hsNREMASY4TfCY/';}
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>
- Jangan lupa SAVE template terlebih dahulu
- Masih di menu DESIGN >> PAGE ELEMENTS >> ADD GADGET >> HMTL/javaScript
- 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>
- Untuk kategori/label yang berspasi rubahlah spasi dengan kode %20.
- Jika sudah selesai masukkan kodenya, jangan lupa anda masukkin judul / title widgetnya.
- Lalu Save / Simpan.
- Selesai! Semoga menuai manfaat… Ngihuiiii...
Tags:
Belajar BLOG