Rabu, 20 November 2013
Cara membuat related post part 2
Pada postingan kali ini kita akan membuat related post atau artikel terkait yang berbeda dengan postingan sebelumnya maka pada postingan kali ini agak berbeda. Letak perbedaannya hanya ada pada penambahan icon sebagai pengganti bullets pada related post yang akan kita bahas sekarangn ini.
Untuk membuat related post tersebut ikuti tutorial berikut ini.
1. Login ke blogger atau klik di sini.
2. Pilih template.
3. Centang Expand widget templates.
4. Copy script di bawah ini dan letakkan di atas code </head>
tampilkan script
<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("http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png") 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. Copy script di bawah ini dan letakkan di bawah code<p><data:post.body/></p>
<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 != "true">,</b:if><b:if cond=data:blog.pageType == "item">
<script expr:src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5" type=text/javascript/></b:if></b:loop> </font>
<script type=text/javascript> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
6. Simpan template.
Catatan:
- Tulisan yang berwarna biru dapat sobat ganti dengan url gambar icon yang sobat inginkan
- Tulisan yang berwarna ungu dapat sobat ganti dengan angka atau jumlah related post yang akan ditampilkan.
Tidak ada komentar:
Posting Komentar