Cara Membuat Related Posts dengan Icon

Sebelumnya saya pernah membuat postingan yang sama, dan tampilannya mungkin seperti itu (Read: Cara membuat related post dibawah postingan 2). Dan yang sekarang saya pos kan kembali dengan tampilan yang berbeda, yaitu dengan sentuhan icon (lihat gambar!)
Adapun caranya:

  • Pergi ke "Rancangan"/"Edit HTML" di Dasbor blog Anda (dengan sebelumnya jangan lupa login)
  • Back up Template yang ada sebelum membuat perubahan!
  • Pastikan untuk memeriksa "Expand Template Widget" kotak.
  • Cari tag </head>
  • Tambahkan kode berikut sebelum tag </head>

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2,
#related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0v66xOklzqcdzJoDqaIUAvTG0rSkvjEraOTGVY8bv7X_vgJqQTdPLgwsN96b_HgkJ__Z_3hoJ6hC0GP1HDFMmUXwJ4dFPGY9dUJwItuT9_q7Ex2WrSJ4dPaPAuo0oSg3aURGIkp1vfRs/") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
} </style>
<script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

  • Sekarang cari kode <data:post.body/> atau <div class='post-body>
  • Lalu tempatkan kode dibawah tepat dibawah/setelah kode di atas.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font>
<font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
<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=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

  • Simpan template, dan lihat bagaimana hasilnya!

Catatan, Pengaturan sama dengan related post yang pernah saya terbitkan.

0 komentar:

Posting Komentar

Cara menulis komentar
1. Ketik komentar Anda pada Kolom dibawah
2. Pilih account login Anda (Email)
3. Klik 'Poskan Komentar'
Saya harap Anda jangan berkomentar dengan bentuk SPAM, karena tidak akan dipublikasina. Jika Anda ingin menautkan link Blog, silakan be Follower (Baca:Cara menjadi followers blog)

Lebih diutamakan pada komentar yang bersifat ingin tahu (bertanya).