Jumat, 27 Juli 2012

Cara membuat Related Post with Thumbnail di Blog

Cara membuat Related Post with Thumbnail di Blog -
Sambil belajar modifikasi blog, tidak ada salahnya saya share tentang Cara membuat Related Post with Thumbnail di Blog. Sebelumnya juga saya pernah posting tentang cara membuat related post thumbail dibawah postingan, tetapi Kali ini tidak disertai dengan kotak berlangganan. Adapun Cara membuat Related Post with Thumbnail di Blog ini hampir sama caranya dengan membuat permalink di blog dan cara membuat related post thumbail. Adapun untuk Screenshotnya sobat bisa liat Gambar dibawah ini.


Related Post with Thumbnail

Nah, adapun cara membuatnya sobat ikuti langkah-langkah berikut:

1. Silahkan Masuk >>Login ke akun blog sobat
2. Lalu Klik >> Template>> kemudian >> (Cadangkan/pulihkan) Download template lengkap terlebih dahulu untuk mencegah Eror
3. Setelah itu pilih Edit HTML dan centang Expand Template Widget
4. Silahkan sobat Cari kode </head> gunakan CTRL+F untuk mempercepat pencarian.
5. Setelah ketemu, kemudian sobat letakkan semua kode berikut tepat di atas atau sebelum kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>


<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, &#8220;Times New Roman&#8221;, 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:#00FF00;


}


</style>


<script src='http://belajarblogging.googlecode.com/files/releatedimage.js' type='text/javascript'/>


</b:if>


<!--Related Posts with thumbnails Scripts and Styles End-->


7. Kalau sudah, silahkan sobat cari kode berikut:

<div class='post-footer-line post-footer-line-1'> gunakan CTRL+F untukmempermudah pencarian.

8. kemudian sobat letakkan kode di bawah ini tepat di bawah atau sesudah kode <div class='post-footer-line post-footer-line-1'>

<!-- Related Posts with Thumbnails Code Start-->

<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>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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:if></b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=7;

var relatedpoststitle="Related Post";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

9. Sebelum di simpan, silahkan sobat preview atau pratinjau terlebih dahulu.
10. Silahkan di SIMPAN atau Save, jika hasilnya sudah oke.
11. Simpan dan lihat hasilnya.

Keterangan:

- var maxresults=7; = angka 7 adalah related post yang akan di tampilkan, silahkan sobat ganti angkanya.

- background-color:#00FF00; = adalah warna Background bila tersentuh Mouse, silahkan sobat ganti kode warnanya seperti yang sobat inginkan.

Ok, jika sobat berhasil jangan Lupa di Like yahh ,,hehheheh..
Kalau Ada pertanyaan Silahkan Komentar dibawah postingan ini....



Ref: http://kuc0pas.blogspot.com/2012/04/cara-membuat-related-post-with.html
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Blogger Kendari

ads

Ditulis Oleh : Unknown Hari: 21.44 Kategori:

Comments
0 Comments

0 komentar:

Gambar Komentar

 

Yang Ngintip Disini

cbox