 |
| Cara Menambahkan Widget Related Posts Untuk Blogger Dengan Thumbnail |
Berikut Cara Menambahkan Widget Related Posts Untuk Blogger / Blogspot
Sekarang di sini adalah cara yang indah untuk menampilkan posting blog Anda, bersama dengan thumbnail. Artikel terkait dipilih dari posting lain yang sama dalam kategori / label / tag. Dengan ini akan mengundang banyak pembaca Anda akan tetap di situs Anda untuk waktu yang cukup lama ketika mereka melihat posting terkait dengan kepentingan mereka.
Artikel Terkait :
Widget Related Posts Dengan Thumbnail
Adapun Langkah - Langkahnya Sebagai Berikut :
Langkah 1. Masuk ke akun
Blogger Anda pergi ke
Template >
Edit HTML
 |
| Dashboard Blogger |
Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F:
Langkah 3. Cari potongan kode ini dan tambahkan di dalam kotak pencarian (tekan Enter untuk menemukannya):
</head>
Langkah 4. Copy dan paste kode di bawah sebelum / di atas
</ head> tag:
Klik Untuk Melihat Code
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.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[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo12sNw9XJyv1FudgHxErn_nqatzyPSFvJ0kWq0yt1BfEG6jV3dM0jXzrHOmmL2h315iAzgn8FnlvKerchW7a6rePcLW8IhwbUUnJLkg-ZCZkIcHLkHini-VBp2Q7QgcJeXoG5VV-LpPqd/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Catatan:
- Untuk mengubah lebar dan tinggi thumbnail, memodifikasi nilai
110px dan
100px merah
- Untuk mengubah warna dan ukuran judul posting terkait, mengubah nilai warna
biru
- Menghapus baris warna
violet jika Anda ingin posting terkait yang akan ditampilkan di homepage dan halaman posting.
Langkah 5. Cari baris bawah (Anda akan menemukan dua kali, tetapi Anda perlu berhenti di yang pertama):
<div class='post-footer'>
Langkah 6. Tepat di atas
<div class = 'post-footer'> sisipkan kode ini:
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Catatan:
- Mengubah nilai
5 dari max-results = 5 dengan jumlah posting yang ingin anda ditampilkan.
- Jika Anda ingin posting terkait yang akan ditampilkan pada homepage juga, menghapus baris dalam
violet
Memperbarui! Jika Anda tidak dapat melihat widget related posts setelah menyimpan template, menambahkan kode (langkah 5) tepat di atas </ b: includable> tag yang dapat ditemukan di atas garis ini (CTRL + F untuk menemukannya):
<b:includable id='postQuickEdit' var='post'>
Untuk info lebih lanjut, klik gambar di bawah ini:
 |
| Dashboard Blogger |
Langkah 7. Simpan Template dan hanya itu. Sekarang Widget Related Posts akan muncul di bawah setiap posting blog yang memiliki label di atasnya.
Nikmati!
EmoticonEmoticon