Rabu, 30 Mei 2012

Cara Membuat Artikel Terkait Dengan Thumbnail / Gambar




Terinspirasi oleh bawaan template ini sudah ada fiturArtikel Terkait dengan Thumbnail atau gambar  saya coba otak atik untuk mencari script fitur artikel Terkait dengan Thumbnail , dan akhirnya setelah ngoprek beberapa jam di temukan juga script tersebut , saya coba pisahkan script JS dan di simpen di google code , maksudnya biar loading blog ga terlalu berat...heheh betul atau tidak saya jg blom terlalu tahu...soalnya yng saya tahu biar kode HTML pada halaman beranda ga terlalu banyak..

Cara Buat Artikel Terkait Dengan Image / Thumbnail

Berikut langkah-langkahnya yang saya lakukan dan di implementasikan jika Anda tertarik lanjutkan!

1. Masuk Blogger.com
2. Pilih icon "Go to post list" ->> Template
3. Back up template
4. Pilih Edit HTML ->> Proceed ->> Centang "Expand Widget Templates"
5. Tekan Ctrl+F untuk mencari cepat kode </head>
6. Letakkan kode berikut tepat di atas kode tersebut

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:center;text-transform:none;height:100%; width:auto;min-height:100%;padding-top:5px;padding-left:5px}#related-posts h2{font-size:1.6em;font-weight:bold;color:black;font-family:Georgia,&#8220;Times New Roman&#8221;,Times,serif;margin-bottom:.75em;margin-top:0;padding-top:0}#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=&quot;http://3.bp.blogspot.com/-GjRXkpoPySA/T6E5f4DMs_I/AAAAAAAAFrA/SH5wX-IESx8/s320/icon_ebook.jpg&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='http://herlanlesmana.googlecode.com/files/artikel%20terkait.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7. Lalu cari kode <div class="post-footer-line post-footer-line-1"&gt; Kalo ga ada bisa cari kode <data:post.body/> letakkan kode berikut ini tepat di bawah kode tersebut, atau sesuaikan dengan template blog Anda

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
8. Pratinjau, jika tidak ada error lanjutkan
9. Simpan template

Keterangan:
Untuk kode yang bercetakkan ini bisa Anda rubah.
Link gambar:
http://3.bp.blogspot.com/-GjRXkpoPySA/T6E5f4DMs_I/AAAAAAAAFrA/SH5wX-IESx8/s320/icon_ebook.jpg
adalah gambar thumb jika postingan blog tidak menggunakan gambar, maka gambar tersebut akan muncul pada artikel terkait, lihat gambar yang Saya lingkari.
Untuk Maxresults=7; adalah jumlah artikel yang ingin di tampilkan.
Artikel Terkait: Bisa di ubah menjadi Related post dan lain sebagainya sesuai keinginan.

Oke selamat mencoba semoga berhasil
◄ Newer Post Older Post ►