Nah kawan-kawan sekalian agar postingan kita lebih menarik, kita akan mencoba membuat sebuah "Raleted Post" atau bisa disebut "Artikel Terkait". jadi pada setiap postingan anda bagian bawah akan ditampilkan sebuat postingan yang terkait dengan postingan yang dibuka, sehingga akan memudahkan bagi para pembaca.
Lebih lajutnya ikuti langkah-langkah di bawah ini :
Sign in ke dalam Blogger anda - masuk ke Dasbor kemudian pilih Rancangan - pilih Edit Html - dan Centang dahulu "Expand Widget Template" Setelah sudah lakukan pencarian script </head>, untuk mempermudah pencarian gunakan CTRL+F.
Copy Script dibawah ini dan letakan di atas script </head>
Copy Script dibawah ini dan letakan di atas script </head>
<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove -->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts { float:center; text-transform:none; height:100%;
min-height:100%; padding-top:5px; padding-left:5px; }
#related-posts h2{ font-size: 1.6em; font-weight: bold;
color: black; font-family: Georgia, “Times New Roman”,
Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; }
#related-posts a{ color:black; } #related-posts a:hover{ color:black; }
#related-posts a:hover { background-color:#d4eaf2; }
</style>
<script type='text/javascript'> var defaultnoimage=
"http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/
yL95WlyTqr0/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2";
var relatedpoststitle="Baca Juga Artikel Berikut:"; </script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
|
NB :
- var maxresults=5 ini adalah jumlah related post yang ditampilkan, silahkan ganti sesuai dengan keinginan anda.
- var relatedpoststitile="Baca Juga Artikel Berikut:" adalah title dari related post, silahkan rubah sesuai dengan keinginan anda.
selanjutnya cari kode <div class='post-footer-line post-footer-line-1'> dan biasanya terdapat dua kode <div class='post-footer-line post-footer-line-1'> yang sama pada template, pilih kode yang pertama, dan letakan kode script dibawah ini tepat di bawah kode <div class='post-footer-line post-footer-line-1'>
<!-- Related Posts with Thumbnails Code Start--> <!-- remove --> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End--> |
Setelah selesai Klik Simpan Template dan Lihat hasilnya.
0 komentar:
Posting Komentar