Cara Membuat Artikel Terkait Thumbnail (Related Post) Pada Blog

Pada postingan yang ke-22 ini akan membahas tentang Cara Membuat Artikel Terkait Thumbnail (Related Post) Pada Blog
Sebenarnya tidak beda jauh dengan postingan saya sebelumnya yaitu Cara Membuat Artikel Terkait (Related Post) Pada Blog
Cuman perbedaannya yang sekarang tampilannya menggunakan Thumnail atau Gambar cuplikan (belum saya coba)

Bagi yang penasaran dan ingin segera mencobanya, silakah mengikuti tutorial di bawah ini


1. Login dahulu di Blogger
2. Masuk ke Dasbor > pilih blog yang akan diedit
3. Pilih Rancangan > pilih Edit HTML
4. Jangan lupa untuk centang pada kotak Expand Template Widget
5. Cari kode ]]></b:skin> dengan bantuan CTRL+F atau tekan F3 pada keyboard

6. Copy kode di bawah ini

/*** Featured Categories ***/<br /> img.label_thumb{<br /> float:left;<br /> padding:5px;<br /> border:1px solid #8f8f8f;<br /> background:#D2D0D0;<br /> margin-right:10px;<br /> height:55px;<br /> width:55px;<br /> }<br /> img.label_thumb:hover{<br /> background:#f7f6f6;<br /> }<br /> .label_with_thumbs {<br /> float: left;<br /> width: 100%;<br /> min-height: 70px;<br /> margin: 0px 10px 2px 0px;<br /> adding: 0;<br /> }<br /> ul.label_with_thumbs li {<br /> padding:8px 0;<br /> min-height:65px;<br /> margin-bottom:10px;<br /> }<br /> .label_with_thumbs a {}<br /> .label_with_thumbs strong {}

7. Kemudian paste DIATAS kode ]]></b:skin>
8. Cari kode </head> dengan bantuan CTRL+F atau tekan F3 pada keyboard
9. Copy kode dibawah ini

<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/AVvXsEhdYW8FfG6ocYiFkfUZkYXW-QEnuKhyphenhyphen8R0YzjMjc1Cqm3YphZeZFv9Fy7I_iPsEsqteoe9rm4oWFZ131nWetUV8vc3-JmLP3LsI_3t7CdlxHQ4BUgNasldht4rSUplqwPtUZUpwdXDqtXmS/';} 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>

10. Kemudian paste DIATAS kode </head>
11. Simpan
12. Pada pilihan Rancangan kita beralih pada pilihan Elemen Halaman
13. Anda tentukan akan menambahkan dimana letak munculnya dengan klik Tambah Gadget
14. Pilih Java script/HTML
15. Copy kode dibawah ini

<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> <br /> <script type="text/javascript" src="/feeds/posts/default/-/Gadget?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

16. Paste kode di atas dalam JavaScript/HTML tersebut

17. Simpan

Sekian tutorial tentang Cara Membuat Artikel Terkait Thumbnail (Related Post) Pada Blog

Sambung postingan selanjutnya

Selamat mencoba dan semoga sukses..Amin..

Ditunggu komentarnya ya..

Jangan Lupa Untuk Membaca Juga Yang Ini