Membuat Related Post dengan gambar berjalan pada blogger

Membuat Related Post Dengan Gambar Berjalan Pada Blogger

RelatedPost berjalan mungkin terdengaran agak aneh tapi ini nyata......Relatedpost berjalan hampir sama seperti dengan linkwithin bedanya cuman kalau yang satu ini link post bisa berjalan kekanan dan ke kiri ya semacam slide show....Nah kalau penasaran silahkan anda coba sendiri berikut step by step tutorialnya

1. Step Pertama

Seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN
Anda klik Edit HTML
sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
Jangan lupa di centang Expand Template Widget
Kalau sudah kita mulai mengobok-ngobok kode html nya

Cari kode dibawah ini......!!! cara cepat nya tekan (Ctr + F pada keyboard) fokus pencarian pada huruf bercetak tebal

Cari Kode di bawah ini....

</head>

Jika sudah ketemu hapus dan ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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>

</head>

2. Step Kedua

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

Atau jika tidak menemukannya cari kode berikut ini

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

CATATAN : jika di templete blog sobat tidak di temukan kode yang berwarna merah maka cari kode yang berwarna biru,yang penting salah satu nya aja yang di gunakan untuk modifikasi.

Sudah Ketemu...copypaste semua kode di bawah ini dan letakan di bawah kode <div class='post-footer-line post-footer-line-1'> jangan salah tempat ya.... di bawah

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' 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="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
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://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>

Hasil nya kayak gini

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

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' 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="<data:post.url/>";

var maxresults=10;
var relatedpoststitle="";
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://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>

CATATAN :

Kode yang saya cetak tebal berwarna biru ..var maxresults=10; maksud nya gambar thumnail yang di tampilkan bisa 10,11 atau jumlah lain nya yang sobat inginkan.

3. Step Ketiga

Simpan Template

Sekarang Coba anda lihat hasil nya...semoga berhasil..

Comente Nesse Post »

0 komentar:

Posting Komentar

Langganan: Posting Komentar

TimeZone

Categorias