 |
| Widget Artikel Sesuai Label |
Sudah lama sudah tidak posting sekarang ini kita akan sedikit menyimak tentang tutorial Membuat Widget Artikel Sesuai Label di Blog, nah... sebenarnya artikel ini adalah hasil request dari teman saya yang bertanya tentang cara ini, jadi mari kita bahas bersama-sama cara memasangnya.
Widget ini bisa di samakan dengan widget recent post, tapi ada juga widget yang seperti ini tapi berfungsi untuk menampilkan artikel terupdate berdasarkan kategori, contohnya seperti widget yang ada di sidebar kanan blog Kang Fandi ini.
Caranya Sebagai Berikut :
1). Pergi ke Blogger > Dashboard > Template > Edit HTML.2). Kemudian cari kode ini
3). Dan copy CSS di bawah ini lalu pastekan tepat di atas kode tadi.
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{}Keterangan :
- Kode di atas bisa sobat edit sendiri sesuai dengan yang di inginkan.
5). Setelah itu sobat cari lagi kode
<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/AVvXsEjzOa1UsoRFPSSSyh26tuBqlXBB9t7DDPbTUvGgJwlwkAzS3sR8ATehQIa8pzQlUvfl26VzSOZjiO314jo7IqzzedXwmJz9ZpJCBq9NljTl5k5rIpSb0OV3nwhtO5KJdoFZZXSTJCdT93BY/';}
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>6). Nah.. setelah sobat selesai melakukan langkah-langkah di atas, sekarang untuk membuatnya tampil di blog, sobat tinggal men-copy Javascript di bawah ini kemudian paste di widget HTML/Javascript yang ada di blog sobat.
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/NAMA LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>Keterangan :
- Ganti tulisan yang berwarna biru dengan nama label yang ingin di tampilkan.
- Kode di atas juga bisa sobat ubah dan sesuaikan dengan yang sobat inginkan.
- Jika label di blog sobat terdiri dari 2 kata / lebih contohnya 'Tutorial Blog', sobat harus mengganti spasi dengan kode ini
%20 , Jadi hasilnya akan seperti di bawah ini, dan jika hanya satu kata penulisannya tetap.
<script type="text/javascript" src="/feeds/posts/default/-/Tutorial%20Blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>Terimakasih.. semoga artikel dari Kang Fandi kali ini dapat bermanfaat bagi Sahabat Blogger.
Terima kasih telah membaca artikel Cara Membuat Widget Artikel Sesuai Label di Blog . Jika Anda ingin copy-paste / menyalin sebagian ataupun keseluruhan dari artikel ini, harap anda mencantumkan link berikut Cara Membuat Widget Artikel Sesuai Label di Blog sebagai sumbernya atau anda bisa copy permalink dibawah ini.
0 comments "Cara Membuat Widget Artikel Sesuai Label di Blog", Baca atau Masukkan Komentar
Post a Comment