Cara Membuat Related Post Bergambar

Cara Membuat Related Post Bergambar-Sahabat Blogger pasti tahu donk apa itu related post ,,? yups related post adalah artikel yang menerkaitkan post satu dengan post yang lain dan masih dalam satu Kategori atau label . dengan cara membuat related post maka pengunjung dapat membaca artikel selanjutnya yang berhubungan postingan anda , Kali ini saya akan share kepada sahabat blogger cara membuat related post bergambar  dengan efek bergeser secara otomatis

DEMONYA SEPERTI DI ATAS

Berikut langkah-langkah Cara Membuat Related Post Bergambar dengan efek bergeser :

1. Login atau masuk terlebih dahulu ke akun Blogger anda
2. Pilih menu " Template " => EDIT HTML
3. Cari kode </head>  ( Gunakan CTRL+F untuk mempermudah pencarian )
4. Copy dan pastekan kode di bawah ini tepat di atas kode </head>

<!--Related Posts ahmadsuyadi.blogspot.com 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: #585858;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:#FFFFCC;

}

#related-posts a:hover{

color:#000000;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

<script src='https://bfcsarif.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>

</b:if>

<!--Related Posts ahmadsuyadi.blogspot.com with thumbnails Scripts and Styles End-->

5. Kemudian cari kode <div class='post-footer-line post-footer-line-1'> , setelah anda menemukan kode tersebut selanjutnya silahkan letakan kode di bawah ini setelah ( dibawah ) kode <div class='post-footer-line post-footer-line-1'>

<!-- Marquee ahmadsuyadi.blogspot.com 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=12&quot;' type='text/javascript'/></b:if></b:loop>

<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>

<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>

<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>

<script type='text/javascript'>

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

var maxresults=12;

var relatedpoststitle=&quot;&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script></marquee>

<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://sarifpbg.blogspot.com/2012/12/cara-membuat-related-post-bergambar-di.html' target='_blank'>widget</a></div> 

</div>

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

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

</b:if>

</b:if>

<!-- Marquee ahmadsuyadi.blogspot.com Related Posts with Thumbnails Code End-->

Keterangan :- Anda dapat menentukan jumlah hasil ( jumlah banyak ) related postnya dengan mengubah results=12- Anda dapat merubah kata Baca Juga Artikel Terkait Lainnya sesuai dengan selera anda 
6. Kemudian Klik Save ( Simpan ) Template , lihat hasil perubahanya ...!!DEmikian trick Cara Membuat Related Post Bergambar semoga panduan langkah-langkah Cara Membuat Related Post Bergambar ini bermanfaat bagi anda , apabila anda masih belum paham silahkan ajukan pertanyaan **SELAMAT MENCOBA**

Share This Article

Facebook +Google Twitter Digg Technorati Reddit

Sumber Berita Ini: Cara Membuat Related Post Bergambar

Riio Cyber-Art

Blog ini berisi informasi mengenai dunia blogging dan internet dari berbagai sumber, jika anda menyukai dan mau dapatkan Update berita terbaru, harap ikuti blog ini dengan memasukan Email anda atau mengikuti Twitter/Facebook, dengan begitu anda secara otomatis akan mendapatkan Update Berita terbaru disini.

• Rss
• Twitter
• FaceBook
• Follow This Blog

Baca Juga Artikel Terkait Lainnya

Berita Populer Lainnya