|
|
Pada postingan sebelumnya saya juga pernah membahas tentang cara 'Pasang Related Post (Artikel Terkait) Cantik Ala'. Nah kali ini saya akan coba membahas cara 'Membuat Artikel Terkait Disertai Thumbnails - Marquee (Berjalan)'.
Artikel terkait yang disertai thumbnail (gambar kecil) tidak hanya diam, tetapi berjalan kesamping, menampilkan thumbnail disertai dengan judul tulisan (artikel). Thumbnail Related Posts (artikel terkait bergambar) ini akan menghemat banyak temaptdi blog kita, ya memang karena artikel terkait bergambarnya dibuat berjalan sehingga kita juga bisa membuat lebih banyak artikel terkait bergambar yang ditampilkan.
Berikut cara Membuat Artikel Terkait Bergambar Berjalan
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya
<!--Related Posts with thumbnails Scripts and Styles Start-->
<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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
7. Lalu cari kode di bawah ini
<div class='post-footer-line post-footer-line-1'>
Atau jika tidak menemukannya cari kode berikut ini
<p class='post-footer-line post-footer-line-1'>
8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas.
<div class='post-footer-line post-footer-line-1'>
Atau jika tidak menemukannya cari kode berikut ini
<p class='post-footer-line post-footer-line-1'>
8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas.
<!-- Marquee ut2awebinfo Related Posts with Thumbnails Code Start-->
<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=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<!-- Marquee ut2awebinfo Related Posts with Thumbnails Code End-->
Keterangan.
Kita juga dapat menganti beberapa kode css, seperti berikut ini
var maxresults=10; --> Berarti artikel terkait yang akan kita tampilkan adalah 5
<h3><b>Related Posts</b></h3> --> Judulnya adalah Related Posts
10. Simpan Template jika sudah selesai.
Kita juga dapat menganti beberapa kode css, seperti berikut ini
var maxresults=10; --> Berarti artikel terkait yang akan kita tampilkan adalah 5
<h3><b>Related Posts</b></h3> --> Judulnya adalah Related Posts
10. Simpan Template jika sudah selesai.
Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan!
Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah..
thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...
Please rate this article:
{[['
', '
']]}
', '']]}{["Useless", "Boring", "Need more details", "Perfect"]}
Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!
terima kasih untuk informasinya
BalasHapusartikel yang menarik....terima kasih sudah berbagi, semoga dapat bermanfaat
BalasHapusmakasih bnyak udah share..
BalasHapus