Widget Sederhana Related Posts Untuk Blogger

Widget Sederhana Related Posts Untuk Blogger

Dalam tutorial terakhir, kita telah melihat bagaimana

Artikel Terkail :Cara Membuat Widget Related Posts Dengan Thumbnail  Untuk Blogger 

yang akan menampilkan posting terkait dengan thumbnail dari kategori yang sama, berdasarkan pada label yang diberikan, yang akan muncul hanya di akhir posting blog Anda.

Namun, mungkin beberapa dari Anda  lebih suka versi sederhana dari posting terkait widget yang akan menampilkan hanya judul posting.

Widget Sederhana Related Posts Untuk Blogger

Jika Anda ingin menambahkannya, ikuti langkah-langkahnya di bawah ini:

Cara Menambahkan Widget Related Posts Untuk Blogger                              

Langkah 1. Pergi ke 'Template' dan tekan tombol 'Edit HTML'.

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

</head>

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

Klik Untuk Melihat Code

<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/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![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>

Menyesuaikan Widget Related Posts Untuk Blogger  Sederhana Mungkin

- Untuk mengubah ukuran (27px) dan warna (# fff) judul 'Posting terkait', mengubah nilai-nilai merah.

- Untuk posting warna link terkait, ganti nilai # 949494 hijau.

- Untuk mengubah warna latar belakang, menggantikan #f9f9f9 warna hex merah (Anda dapat menggunakan kode ini Generator Warna untuk memilih warna favorit Anda).

- Untuk warna latar belakang pada mouseover, mengubah nilai # F4F4F4 merah.

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

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

Langkah 5. Ketika Anda menemukannya, klik tanda panah ke samping untuk memperluas kode dan gulir ke bawah sampai Anda menemukan </ b: includable>                                  
- Lihat screenshot untuk bantuan lebih lanjut:

Dashboard blogger

Langkah 6. Tepat di atas </ b: includable> paste kode di bawah ini:

<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/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Simple Related Posts Widget</a></div></b:if>

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

Langkah 7. Simpan perubahan dengan mengklik tombol 'Save Template' dan kunjungi  blog Anda - klik salah satu  posting Anda untuk melihat posting terkait widget sederhana untuk Blogger .

Nikmati! Saya tunggu anda dikomentar :)