Jumat, 07 Juni 2013

Cara Membuat Related Post Gambar Thumbnail Di Blogspot

Setelah beberapa waktu yang lalu saya mencari Tutorial Cara Membuat Related Post dengan Gambar Thumbnail Di Blogspot dibeberapa ribu blog gak ngedapet yang saya inginkan akhirnya kemarin aku bertemu dengan beberapa rekan kerja eh... pas tanya akhirnya di beri tahu bagaimana cara membuat Realed Post di blogger. rupanya dan rupanya mudah sob.. namun bagi yang bisa otak-atik editor HTML hehehehe... bagi yang belum mahir seperti saya mah uangel bener...nah mungkin ini bisa memberi solusi dan juga ilmu baru buat pecinta blogger.
Seperti yang kita tahu dengan adanya Related Post visitor atau pengunjung secara mudah untuk melihat artikel-artikel postingan kita yang lainnya. dan juga ini akan memperbanyak lagi pageview yang bisa kita dapatkan dari visitor, seperti kata-kata master SEO jika suatu Blog atau website yang mempunyai pageview yang banyak maka blog tersebut bisa membanggun SEO dengan mudah. mungkin dari sobat blogger sudah tak sabar untuk mengikuti tutorial ini langsung saja yuk...!! ikuti panduanku dibawah ini.
Cara Membuat Related Post Gambar Thumbnail Di Blogspot

1.silahkan langsung saja kalian login ke blogger
2.menuju ke edit template HTML.
3. silahkan cari kode </head>. kalau sudah ketemu silahkan taruh kode dibawah ini tepat diatasnya.
<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.2em;
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://kodegigawatt.googlecode.com/files/thumbnail-gambar.js' type='text/javascript'/>
</b:if>
4. kalau sudah kalian taruh kodenya silahkan cari lagi kode <div class="post-footer-line post-footer-line-3"> yang seperti ini dan kalau sudah ketemu silahkan taruh kode dibawah ini tepat dibawahnya.
<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://giga-watt.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.kumpulanapk.com/' style='display:none;'>widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Postingan Terkait : <data:post.title/>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
5. kalau sudah kalian taruh kodenya silahkan cek dahulu sudah tepat apa belum cara menaruh kodenya seperti diatas. kalau sudah sekarang waktunya kalian Simpan dan lihat hasilnya.
6. nah kalau sudah berhasil ucapkan alhamdulillah. dan buat yang belum berhasil silahkan ulangi lagi kalau masih bingung silahkan komentar saja dibawah saya siap membantu kalian.
semoga bermanfaat... 

0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | SharePoint Demo