Laman

Translate

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Senin, 28 Juni 2010

Membuat Artikel Terkait (Related Post)

Sebelumnya saya telah membuat artikel tentang membuat related post (artikel terkait) yang menggunakan gambar atau thumbnail. Seperti niat saya dalam artikel tersebut untuk membuat artikel terkait yang tanpa gambar, sekaranglah saat yang tepat untuk membahasnya. Ikuti langkah berikut ini:

1. Masuk Rancangan lalu Edit HTML

2. Centang Expand Template Widget

3. Cari kode </head>

4. Paste script dibawah ini tepat diatasnya

<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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WhQXjyLFC756gqKi36cBq3AJOasdaWdrSU9Wkxfugs6rIW930DnZ0K4TPUyhtvAk0BoDfhARfs6Ifu803dOIBUpecUj5MvyWtJVHtaUCXTxRRc6JgpBBQPej7XaDhij2hFIdL7ZwDWQ/&quot;) 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;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post_hack.js' type='text/javascript'/>


5. Cari kode <p><data:post.body/></p> atau <div class='post-body> (tergantung template yang anda pakai)

6. Masukkan script dibawah ini tepat dibawahnya

<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>


6. Simpan

* Warna biru silahkan ganti sesuai kebutuhan anda, contoh bisa dilihat pada Artikel Terkait yang saya pakai

===@@@===

Baca Juga



Tidak ada komentar:

Posting Komentar