Cara Menciptakan Recent Post Menurut Kategori Label Dengan Thumbnail

Cara Membuat Recent Post Berdasarkan Kategori Label Dengan Thumbnail - Fungsi dari fitur ini yaitu untuk lebih memudahkan pembaca biar 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 alhasil akan menyerupai ini:

Jika tertarik, silahkan ikuti langkahnya berikut ini:

1. Login ke akun Blogger
2. Klik Template > Edit HTML
3. Cari isyarat ]]></b:skin> kemudian 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 isyarat </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/AVvXsEieUwqpD9JlMZOVhvh3uzjWkBDjPmSgKiC8xdLLnDzq7AsrCBqkD3GooGva_Y1otV-TlFq0Wm5BAIm4UdKP2uSp1cpgJhNHuClBtA62EHYDNZPgBo9w9spQqealuSB-hklvLN0mGvzHuLtj/';}
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+'" sasaran ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" sasaran ="_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+'" sasaran ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" sasaran ="_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 hidangan 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 yaitu Jumlah daftar isi label atau kategori yang di tampilkan. Silahkan Anda ganti nilainya sesuai dengan keinginan.
• var numchars = 50 yaitu Jumlah karakter ringkasan isi posting yang di tampilkan. Silahkan Anda ganti nilainya menyerupai keinginan.
• true yaitu Kode perintah untuk di tampilkan.
• false yaitu Kode perintah untuk tidak di tampilkan.
• BISNIS%20ONLINE yaitu Label yang isinya akan di tampilkan. Silahkan Anda ganti dengan label atau kategori blog Anda yang ingin isinya di tampilkan. (Besar kecil abjad harus sama dengan label atau kategori blog Anda, Gunakan %20 kalau label atau kategori Anda ada space atau spasinya.

tags: #cara menciptakan recent pos menurut kategori label # cara menciptakan recent post dengan thumbnail # cara menciptakan label kategori tertentu

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

Berbagi :