Jumat, 28 Januari 2022
Cara Membuat Recent Post Berdasarkan Kategori Label Dengan Thumbnail
Fungsi dari fitur ini adalah untuk lebih memudahkan pembaca agar menemukan artikel yang dicarinya. Karena tampilannya disertai dengan gambar thumbnail, maka pengunjung akan lebih tertarik untuk melihat isi dari artikel postingan tersebut secara lengkapnya.
Lihat, nanti hasilnya akan seperti ini:
Jika tertarik, silahkan ikuti langkahnya berikut ini:
1.Login ke akun Blogger
2.Klik Template > Edit HTML
3.Cari kode ]]></b:skin> lalu simpan script berikut di atasnya:
2.Klik Template > Edit HTML
3.Cari kode ]]></b:skin> lalu simpan script berikut di atasnya:
/*** Fitur Kategori ***/
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 {}
4. Cari kode </head> , letakkan script berikut di atasnya:
<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/AVvXsEjl5DLVqNXMZHDk7Gf7C2fNXf5nrRp7717ijgxviCclbhHYAnNGX8etCpfcIYTsVX3U0Aaold8feOVd3KPFty3oM9m1xdOlCu5HvrdNjOBFc_L4F5DkNIB7Qz3tmFMQriVCMmZji_M6jmRV/';}
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>
5.Simpan Tempelet
6.Terakhir, masuk ke menu Tata Letak >Pilih Tambah Gadget >pilih HTML/JavaScript 7.Pastekan Kode dibawah lalu simpan
Catatan:
var numposts = 5 adalah Jumlah daftar isi label atau kategori yang di tampilkan. Silahkan Anda ganti nilainya sesuai dengan keinginan.var numchars = 50 adalah Jumlah karakter ringkasan isi posting yang di tampilkan. Silahkan Anda ganti nilainya seperti keinginan.true adalah Kode perintah untuk di tampilkan.false adalah Kode perintah untuk tidak di tampilkan.BISNIS%20ONLINE adalah Label yang isinya akan di tampilkan. Silahkan Anda ganti dengan label atau kategori blog Anda yang ingin isinya di tampilkan. (Besar kecil huruf harus sama dengan label atau kategori blog Anda, Gunakan %20 jika label atau kategori Anda ada space atau spasinya.
Semoga artikelnya bermanfaat.
<script type="text/javascript" src="/feeds/posts/default/orderby=updated&alt=json-in-script&callback=labelthumbs"></script>