[Tutorial] Cara membuat Widget Related Posts atau Artikel Terkait di blogger

-[Tutorial]  Cara membuat Widget Related Posts atau Artikel Terkait di blogger


Salam sapa untuk para blogger.... :D
Apa kabarnya neh?? Do'a kebaikan selalu untuk sobat sekalian.

Untuk menambah minat pembaca blog diperlukan suatu Widget yang dapat mengarahkan pengunjung kepada artikel yang terkait atau memiliki padanan isi dengan yang sedang dibaca. Artikel yang berkaitan itu mengikuti kategori atau label entri artikel tersebut. Nah... untuk itu pada kesempatan kali ini telah ada Widget yang dapat memberikan pelayanan seperti itu. MAU ??

Jika berkeinginan membuatnya, ana ingin mengulas mengenai  Cara membuat Widget Related Posts atau Artikel Terkait di blogger. Agar lebih aman, backup dulu ya template nya. Langkah-langkahnya adalah

1. Seperti biasa Log in blog sobat => Dashboard => Template => Edit HTML=> Lanjutkan.
(Jangan lupa untuk terlebih dahulu mencentang pada kotak Expand Widget Templates)

2. Kemudian cari kode </head>.
(Untuk memudahkan pencarian, dengan menggunakan keyboard tekan CTRL+F dan kemudian masukkan kode yang dicari)

3. Copy dan pastekan kode dibawah ini, dan letakkan di atas atau sebelum kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related.js' type='text/javascript'/>
</b:if>


NOTE : kata "Related Posts" dapat sobat ganti dengan kata pilihan sobat.

4. Kemudian cari kode  <data:post.body/> .
(Untuk mempermudah, gunakan cara seperti langkah no. 2)

5. Copy kode dibawah ini dan pastekan kode nya di bawah atau setelah kode <data:post.body/> .


<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=15&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>


6. Langkah terakhir, Lihat terlebih dahulu hasilnya dengan meng-klik Preview.
    Jika terdapat kesalahan pada kode dapat berkomentar di postingan ini. Dan jika berhasil tanpa ada error, klik SAVE.

Demikian Cara membuat Widget Related Posts atau Artikel Terkait di blogger.
Maaf jika terdapat kesalahan.
Semoga bermanfaat...
Salam Sukses.... :D

Share this

Related Posts

Previous
Next Post »

Berkomentar lah dengan yang sopan yang tidak mengandung unsur SARA, PORNOGRAFI, Dan TIDAK diperkenankan untuk PROMOSI selain Persetujuan dari ADMIN. Jika di lakukan, Maaf komentar akan DI HAPUS.

Untuk menggunakan Emoticon Komentar, Klik Emoticon yang akan di pasang. Akan muncul kode emoticonnya. Masukkan itu pada saat berkomentar. Terima Kasih
EmoticonEmoticon