Cari Artikel

Selamat datang! di blog The Kampoeng Blogger , silahkan tinggalkan pesan di kolom komentar bila terdapat kode yang error.

March 22, 2013

Memasang Related Post (Artikel Terkait) Sederhana di Blog

Anda mungkin sudah membacar artikel saya sebelumnya yang berjudul memasang related post (artikel terkait) bergambar di blog. Nah, saya akan melanjutkan pembahasan mengenai related post, kali ini saya akan membahas tentang memasang related post (artikel terkait) sederhana di blog. Related post yang satu ini hanya berupa daftar list artikel yang berhubungan dengan postingan anda. Meskipun sederhana,  related post ini masih tetap terlihat keren dengan latar biru dan garis biru di awal list.

related post

Memasang Related Post (Artikel Terkait) Sederhana di Blog

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode </head>
<!--Awal Kode Related Posts-->
<!--Hapus--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}

#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://the-kampoeng-blogger.googlecode.com/files/relatedpostsederhana.js' type='text/javascript'/>
<!--Hapus--></b:if>
<!--Akhir kode Related Post-->
Catatan!
Anda dapat memodifikasi warna background dan border dari list/daftar related post dengan mengganti kode warna yang berwarna biru dengan kode warna yang lain (Lihat kode warna HEX dan RGB HTML)

Step 3

Letakkan kode berikut tepat di atas kode <div class='post-footer'>
<!-- Awal Kode Related Post-->
<!--Remove-->
<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> </div> <!--Remove--></b:if> <!-- Akhir Kode Related Post-->
Catatan!
Anda dapat mengganti jumlah list berdasarkan label dengan mengganti  maxresults=5 dengan jumlah list yang anda inginkan.

Step 4
Klik Save Template

Semoga bermanfaat.
Wassalam. 

Written by: Rysmah Zainal Arifin
The Kampoeng Blogger, Updated at: 11:40 PM

1 comments :

Anonymous said...

thanks banget gan, seperti ini yang ane cari..

Tinggalkan Komentar Anda di Sini:

Komentar yang mengganggu, berbau SARA, porno, mengandung iklan dan mencantumkan link aktif akan segera kami hapus.
Terimakasih atas perhatiannya.