Cara Membuat Recent Post Berdasarkan Kategori Label Dengan Thumbnail

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:


/*** 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/AVvXsEirKJgiSxvLxvrJzPttdjOp9-YENUOBWRMsfDeXBYUKC1R6mDZiipR8IeE5j8VddikVZ7ADot0IAfoEK8ssyJa1-ZAwAmJN1DPxa-5LkOVGWBWY4Fuxwh1FVoK8ia8rIaKNxuLZpHCYOSbG/';}
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 Template
6. Terakhir, masuk ke menu Tata Letak > pilih Tambah Gadget > pilih HTML/JavaScript
7. Pastekan Kode berikut:


<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 50;</script>

<script type="text/javascript" src="/feeds/posts/default/-/BISNIS%20ONLINE?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

8. Simpan Template

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.

tags: #cara membuat recent pos berdasarkan kategori label # cara membuat recent post dengan thumbnail # cara membuat label kategori tertentu

Semoga artikelnya bermanfaat. Cek di bawah ini untuk tutorial blog lainnya:

Artikel Terkait

Cara Membuat Recent Post Berdasarkan Kategori Label Dengan Thumbnail

4/ 5

Oleh Bonita Benz