Cara Menciptakan Simple Related Post Di Blog

Dalam tutorial sebelumnya perihal Widget Related Post, kita telah menjelaskan bagaimana cara menambahkan Related Posts widget yang akan menampilkan related post dengan thumbnail dari kategori atau label yang sama, menurut pada label yang diberikan, ini akan muncul pada simpulan posting blog anda. Jika anda lebih suka memunculkan widget related post diatas postingan silahkan saja. Tapi kali ini kita akan memunculkannya di bawah postingan dengan versi yang sederhana dan menarik yang hanya akan menampilkan judul posting.

pic demo

Jika anda tertarik dengan kesederhanaan dari simple related post diatas dan ingin menambahkannya di blog anda, silahkan ikuti langkah-langkah dibawah ini dengan benar:

Cara menambahkan Widget Related Post untuk Blogger

Langkah 1. Terlebih dahulu masuk ke dashboard blogger, lalu masuk ke tab 'Template' dan tekan tombol 'Edit HTML'.

Langkah 1

Langkah 2. Setelah template editor terbuka, klik di mana saja pastikan di dalam area isyarat dan tekan tombol CTRL + F, lalu ketik tag berikut di dalam kotak pencarian ( tekan Enter untuk menemukannya):

</head>

Baca juga:

• Cara Menambahkan Font Awesome Ikon Sosial Di Blogger
• Membuat Efek Gambar Rollover (Mengubah Gambar Pada Mouseover)
• Widget Related Posts Dengan Thumbnail Dan Ringkasan Untuk Blogger

membuka kotak pencarian di editor template blogger

Langkah 3. Tepat di atas tag </ head>, tempelkan isyarat dibawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
margin: 15px 0px;
}
#related-posts h2 {
font-size: 27px;
font-weight: normal;
color: #fff;
text-shadow: 1px 0px 2px #888;
margin-bottom: 0.75em;
}
#related-posts a {
font-size: 13px;
color: #949494;
text-transform: capitalize;
border-bottom:1px dotted #E2E2E2;
display:block;
padding:13px;
text-decoration: none;
}
#related-posts a:hover {
color: #555;
background: #F4F4F4;
}
#related-posts ul {
padding: 0px;
list-style-type: none;
background: #f9f9f9;
border-left: 5px solid #f2f2f2;
}
#related-posts li {
padding: 0px;
}
</style>
<script type='text/j4vascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/j4vascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script></b:if>

Sesuaikan Widget Simple Related Posts untuk Blogger

• Untuk mengubah ukuran (27px) dan warna (#fff) pada judul 'Related Posts', ubah nilai-nilai yang berwarna merah. 
• Untuk warna link related posts, ganti nilai # 949494 hijau. 
• Untuk mengubah warna latar belakang, ganti warna #f9f9f9 hex warna ungu (Anda dapat memakai kode generator Color ini untuk menentukan warna favorit anda). 
• Untuk warna latar belakang pada mouseover/hover, ubah nilai # F4F4F4 berwarna biru. 

Langkah 4. Sekarang cari (CTRL + F) isyarat pada baris di bawah ini:

<b:includable id='postQuickEdit' var='post'>

Langkah 5. temukan tag </ b: includable> di atas isyarat yang kita cari dan kita temukan - lihat screenshot untuk derma lebih lanjut: 

Bantuan lebih lanjut

Langkah 6. Tepat di atas </ b: includable> pastekan isyarat di bawah:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/j4vascript'/></b:if></b:loop>
<script type='text/j4vascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 9px; color: #CECECE; float: right;" href=" " rel="nofollow" >Simple Related Posts Widget</a></div></b:if>

Catatan: Untuk mengubah jumlah related posts maksimum untuk setiap label, ubah "nilai 5 dari" max-results = 5 

Langkah 7. Simpan update dengan mengklik tombol 'Save Template', silahkan lihat blog anda dan klik salah postingan untuk melihat widget simple related post. Hanya itu!!!

Related Posts: Widget Related Posts dengan Thumbnail dan summary untuk Blogger

Jika ada error silahkan periksa dengan secama setiap langkah diatas!!!, jangan lupa untuk meninggalkan komentar anda di kolom komentar!!!

Sumber http://duniatutorials.blogspot.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: