Membuat Artikel Terkait Versi 2.0
Artikel Terkait versi 2.0 kali ini merupakan pengembangan dari artikel terkait versi 1.0, karena script code yang digunakan masih tetap sama dengan sedikit modifikasi untuk menampilkan gambar dengan ukuran 72 x 72 pixel. Sehingga menurut bloggerplugins sebagai pengembangnya versi artikel terkait ini di beri nama Related Posts with Thumbnails. Dari segi tampilan yang hasilkan juga cukup menarik, karena ditambah gambar thumbnail yang diambil dari setiap halaman artikel. Sebagai contoh Blogger Tune-Up mencobanya di Kotretan Hendriono dan menghasilkan preview Artikel Terkait seperti dibawah ini. Merasa tertarik silahkan dicoba ...
Integrasi Artikel Terkait (Versi 2.0) di Blogger
Langkah 1
Login ke Blogger.
Langkah 2
Masuk ke "Tata Letak - Edit HTML".
Langkah 3
Checklist "Expand Template Widget".
Langkah 4
Cari kode dibawah ini.
Langkah 5
Login ke Blogger.
Langkah 2
Masuk ke "Tata Letak - Edit HTML".
Langkah 3
Checklist "Expand Template Widget".
Langkah 4
Cari kode dibawah ini.
Langkah 5
</head>
Langkah 6
Masukan kode CSS dibawah ini tepat diatas kode pada langkah 5 :
<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 src='http://hensblog.googlecode.com/files/rpthumbsv30.js' type='text/javascript'/>
</b:if>
Langkah 7
Cari kode dibawah ini:
<div class='post-footer-line post-footer-line-1'>
jika tidak ditemukan, coba cari kode dibawah ini :
<p class='post-footer-line post-footer-line-1'>
Langkah 8
Masukan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 7 :
<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>
<b:if cond='data:blog.pageType == "item"'>
<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:if>
</b:loop>
<a href='http://modification-blog.blogspot.com/2009/08/membuat-artikel-terkait-versi-30.html' style='display:none;'>Related Posts with thumbnails for blogger</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>
</b:if>
Langkah 9
Simpan template dan preview.
Keterangan:
- var maxresults=5; = Ubah nilai 5 untuk menentukan jumlah artikel terkait yang akan ditampilkan.
- var relatedpoststitle="Artikel Terkait"; = Ubah kalimat "Artikel Terkait" sebagai nama widget.
Categories:
Tutorial Blog
0 comments:
Post a Comment
Berkomentarlah dengan baik!