Related Post Dengan Thumbnail Gambar Dan Berjalan di Blog New Update

Share this Article now on :

Related Post Dengan Thumbnail Gambar Dan Berjalan di Blog New Update-Anaktimor-17 Blog kali ini akan share posting terbaru cara menhias blog dengan memasang Related Post dengan Thumbnail gambar berjalan .  Seperti yang ada di blog ini , biasanya keyword yang di cari di google yaitu You might also like  . Berikut caontohnya :

Sudah tau kan sob. oke deh ane gak akan lama", langsung saja kita mulai
caranya seperti dibawah ini :

1.      Login ke Blogger> Dashboard > Template > Edit HTML > lanjutkan .

2.      Saya sarankan Anda untuk mendownload terlebih dahulu template Anda , unutk berjaga-jaga.

3.      Anda centang EXPAND WIDGET TEMPLATES

4.      Lalu cari kode ini </head>

5.      Ganti kode </head> dengan kode dibawah ini :

<!--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:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

 

Kalau sudah cari kode dibawah ini :

<div class='post-footer-line post-footer-line-1'>

atau

<p class='post-footer-line post-footer-line-1'>

jika sudah ketemu silahkan copykan code dibawah ini
di bawah salah satu kode tersebut

1.Contoh Related Post dengan gambar tanpa marquee (berjalan)

 <!-- 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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

                                                             
 var maxresults=5;

Untuk mengganti title, kita bisa mengedit kode ini:

var relatedpoststitle="Related Posts"; 



2. Contoh Related Post dengan gambar pakai marquee (berjalan)

kalau sobat ingin marquee yang berjalan cari lagi kode seperti
tadi contoh scriptnya di bawah ini :

<div class='post-footer-line post-footer-line-1'>

atau

<p class='post-footer-line post-footer-line-1'>

Kalau sudah ketemu selanjutnya copykan code dibawah ini
di bawah salah satu kode tersebut.

<!-- Marquee Serbablog 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>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=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

silahkan pilih jumlah berapa gambar yang ingin sobat tampilkan di kode yang

warna mereh var maxresults=10;         

Lalu pilih salah satutips di atas contoh 1 ataupun 2.

jangan pasang ke-2 contoh tersebut ya.hehe

kalau di pasang sih tidak apa" cuma kalu ke-2nya kebanyakan dan rada berat.

Terakhir, Simpan template

SILAHKAN COPAS ARTIKEL INI ASAL MAU MENGHARGAI TULISAN DENGAN CARA MENAMPILKAN SUMBERNYA.

Salam ide kreasi,
Semoga berhasil dan bermanfaat,

Anda sedang membaca artikel tentang Related Post Dengan Thumbnail Gambar Dan Berjalan di Blog New Update dan anda bisa menemukan artikel Related Post Dengan Thumbnail Gambar Dan Berjalan di Blog New Update ini dengan url http://sailkomodo-2013.blogspot.com/2012/02/related-post-dengan-thumbnail-gambar.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Related Post Dengan Thumbnail Gambar Dan Berjalan di Blog New Update ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Related Post Dengan Thumbnail Gambar Dan Berjalan di Blog New Update sebagai sumbernya.Dan baca juga Privacy Policy Anaktimor17 Blog dengan url http://anaktimor-17.blogspot.com/2012/11/privacy-policy-for-httpanaktimor.html.

Rating Artikel : 5 Jumlah Voting : 99480 Orang