Thank you for visiting my blog, if you want to find all my post, I suggest to see Daftar Tulisan, there you'll found all my posts. If there's a question, feel free to contact me. Happy Blogging...!!!

Selasa, 15 Maret 2011

Bikin Related Posts Yuk

Related posts atau yang sering disebut dengan 'artikel terkait' lumayan gampang juga membuatnya. Dari hasil blog walking ke sana-sini, ternyata banyak versi juga. Kita ambil yang gampang saja. Ini adalah metode dengan postingan yang serupa (similar post)... Yang ini diambil dari Blogger Help, memang butuh tehnik juga tapi masih gampang kok... :)
Kita langsung ke TKP saja:

1. Login ke akun Blogger >> Layout >> Edit HTML.
2. Klik Download Full Template. Template awal kita di back up dulu untuk mencegah hal-hal yang tidak diinginkan.
3. Centang kotak kecil disamping Expand Widget Template.
4. Cari kode </head> lalu letakkan kode berikut diatasnya:

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 95%;
margin-top: 20px;
margin-left: 5px;
margin-bottom: 20px;
font: 12px 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 {
color: #940f04;
font-size: 13px;
font-weight: normal;
margin: 5px 7px 0;
padding: 0px 0 5px;
}
#related-posts a {
color: #054474;
font-size: 12px;
text-decoration: none;
}
#related-posts a:hover {
color: #92002d;
text-decoration: none;
}
#related-posts ul {
border: medium none;
margin: 3px;
padding: 0;
}
#related-posts ul li {
display: block;
background: transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxghTBkWvgzR1EEC7LVxPLdYKGcVemyI3HNBB0BrJJ0w8lHksduCw766zsJNboCmZVQXPRZKeGTiPmHDDn6Oma23QHFz3OQ75JZCsDEXhxuIjvLyZXyoR5_RId_GlIZ5uVz5rwLCGyqd_X/s128/blockcontentbullets.png&#39;) no-repeat 0 0;
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 5px;
padding-left: 24px;
margin-bottom: 4px;
line-height: 1em;
border-bottom: 1px dotted #cccccc;
}
</style>

<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>

<script src='https://sites.google.com/site/situsbeus/lomari/RelatedPosts_ForBlogger.js' type='text/javascript'/>

<!--RelatedPostsEnds-->

Kode di atas ini masih perlu juga disesuaikan dengan kondisi template, jadi gunakan sedikit kepandaianmu. Paling juga cuman ganti warna, background, dan lain-lain... :) Kata yang berwarna biru dapat diganti sesuai keinginan, misalnya seperti yang ada dalam blog ini, yaitu "Baca juga Gan...", ya tinggal sesuai selera saja... hehehe...

5. Sebelum terakhir. Cari kode berikut:

<div class='post-footer-line post-footer-line-1'>

Kalau tidak ada, cari yang ini:

<p class='post-footer-line post-footer-line-1'>

Setelah ketemu, masukkan kode berikut dibawahnya:

<!-- Related Posts Code Start-->
<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><a href='' style='display:none'/>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts Code End-->

Angka 5 di atas juga bisa diganti dengan jumlah artikel yang akan ditampilkan, terserah mau berapa juga sesuai dengan selera.

6. Save template dan lihat hasilnya.

Demikian cara mengolah 'adonan' related posts, selamat mencoba...!!!.

0 comments:

Posting Komentar