Minggu, 08 April 2012

Membuat Related Post dengan Gambar Berjalan

Kira-kira bingung ga dengan maksud judul di atas?saya juga bingung gimana mau ngasih judul nya..mungkin kalau mau di sederhakan bahasa nya kira-kira kayak gini :
"Membuat artikel terkait  dalam bentuk gambar yang berjalan bolak- balik yang diletakan persis  di bawah postingan"
Screenshot
Maksudnya Realted Post Berjalan kekanan & kekiri bolak balik
Gimana sudah di lihat..??? nah jika sobat berminat mari kita belajar membuat nya...

1. Tahap 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
  • Kalau sudah kita mulai mengobok-ngobok kode html nya
CARI KODE DI BAWAH 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 kode di bawah 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>
2. Tahap 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

<!-- 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://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>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

Hasil nya kayak gini
<div class='post-footer-line post-footer-line-1'>
<!-- 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://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>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

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.Tahap KETIGA simpan templete

Sekarang Coba anda lihat hasilnya, Semoga artikel saya ini bermanfaat dan berguna bagi Sobat Blogger ^_^
Agen Bola online Agen Bola online

2 komentar:

  1. Boleh di coba nih... kapan2 aku pinjam tutorialnya yah... buat postingan... seeep

    BalasHapus
  2. @Becak Siantar Silahkan saja mas, asal Link sumber di cantumkan hehehe ...

    BalasHapus

 

Tutorial Vicahya' - Just Sharing © 2012 | Template by Bamz Display Pagerank