![]() |
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:

padding: 0px;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</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>
- 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:
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:
Langkah 6. Tepat di atas </ b: includable> paste kode di bawah ini:
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 :)
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</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 == "item"'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </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 :)
EmoticonEmoticon