Secara fisik memang penampilan related post sungguh menarik, namun jangan dinilai dari sisi estetikannya saja melainkan fungsi dan kegunaan serta manfaatnya yang jauh lebih dari sekedar kata menarik. Pada kesempatan ini admin pandaanku.com akan memberikan model related post sederhana yang berupa text tanpa thumbnails. Sengaja kita memberikan model ini dulu karena untuk model dengan thumbnails seperti linkwithin akan kita posting di postingan mendatang. Lihat screenshoot
Untuk mebuatnya sangat mudah kok, lihat caranya berikut:
1. Login ke Blogger
2. Klik Rancangan » Edit HTML
3. Back up dulu template anda dg klik "Download Template Lengkap"
4. Klik "Expand Template Widget"
5. Masukkan kode css berikut tepat atas kode ]]></b:skin>
<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/AVvXsEjBgHqWrZX_7tqoFM6mUVG23xQorpXDHeQEXCvYJPxrj9KWkVgZ9aHMgCZxgG2u3YJxpJ3PDnJG7srbt1K6_9dpSjzAVfFJTUkXMFwX-LctU0vRBG5hboPgehWlDWklBWsrV2l4x21m-cU/") 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://yourjavascript.com/19336213112/relate_post.js' type='text/javascript'/>
#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/AVvXsEjBgHqWrZX_7tqoFM6mUVG23xQorpXDHeQEXCvYJPxrj9KWkVgZ9aHMgCZxgG2u3YJxpJ3PDnJG7srbt1K6_9dpSjzAVfFJTUkXMFwX-LctU0vRBG5hboPgehWlDWklBWsrV2l4x21m-cU/") 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://yourjavascript.com/19336213112/relate_post.js' type='text/javascript'/>
6. Gunakan CTRL+F dan cari kode berikut : <data:post.body/>
7. Masukkan kode berikut tepat di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts To This Article : </b></font><font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'><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>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts To This Article : </b></font><font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'><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>
Tidak ada komentar:
Posting Komentar
jika sobat menemukan link yang rusak atau error tinggalkan komentar kami akan melakukan updated terhadap link yang rusak tersebut