MEMBUAT RELATED POST BERJALAN

MEMBUAT ANIMASI RELATED POST BERJALAN SEPERTI SLIDE

Untuk posting kali ini saya akan menjelaskan bagaimana cara membuat menu related post seperti efek slide yang berjalan dari kiri  ke kanan...

http://sikkahoder.blogspot.com/
berjalan dari kiri kekanan

Jadi efek yang nampak adalah akan seperti efek slide..

Kalau di platform Wordpress mungkin lebih gampang lagi karena sudah tersedia wordpress related post slider plugin. Sementara untuk blogspot kita masih harus membuatnya secara manual.
  

GIMANA CARA MEMBUATNYA...?

1. Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget 
    template.
2. Cari kode </head>  pada template anda.
3. Letakkan kode CSS/JS dibawah ini diatas kode </head> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
.tooltip span.top{padding:20px 5px 0;background:url(http://4.bp.blogspot.com/-VdRo2rygD58/TsEfqdv2i_I/AAAAAAAAAHk/0XgrI8IM6TU/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(http://4.bp.blogspot.com/-VdRo2rygD58/TsEfqdv2i_I/AAAAAAAAAHk/0XgrI8IM6TU/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='http://4.bp.blogspot.com/-WQzi5hugHT8/TsEgEpZVEbI/AAAAAAAAAHs/Vq8oZLnRTVw/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>

4.  Kemudian cari kode <div class='post-footer-line post-footer-line-1'> pada 
     template anda. 
Letakkan kode HTML dibawah ini dibawah kode <div class='post-footer-line post-footer-line-1'> Jika template anda kodenya ada 2, maka letakkan kode HTML dibawah kode <div class='post-footer-line post-footer-line-1'> yang pertama.


<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>Related Posts</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>


5.  Preview dulu untuk melihat tampilan hasilnya.
6. Jumlah maksimum posting yang ditayangkan adalah 20. Silahkan ganti angka 10 yang saya tandai 
    merah jika anda ingin merubahnya.
7.  Save/Simpan template anda.







SLIMING CAPSUL
Suplement pelangsing terbaik. Lulus Standard GMP (Good Manufacturing Practice) dan uji tes SGS. Pesan sekarang Juga!!!
sikkahoder.blogspot
ABE CELL
(Jamu Tetes)Mengatasi diabetes, hypertensi, kanker payudara, mengurangi resiko stroke, meningkatkan fungsi otak, dll.
sikkahoder.blogspot
MASKER JERAWAT
Theraskin Acne Mask (Masker bentuk pasta untuk kulit berjerawat). Untuk membantu mengeringkan jerawat.
sikkahoder.blogspot
ADHA EKONOMIS
Melindungi kulit terhadap efek buruk sinar matahari, menjadikan kulit tampak lenih cerah dan menyamarkan noda hitam di wajah.
sikkahoder.blogspot
BIO GLOKUL
Khusus dari tanaman obat pilihan untuk penderita kencing manis (Diabetes) sehingga dapat membantu menstabilkan gula darah
sikkahoder.blogspot


ADVERTISE HERE Ads by Sikkahoder
Body Whitening
Mengandung vit C+E, AHA, Pelembab, SPF 30, Fragrance, n Solk Protein yang memutihkan kulit secara bertahap dan PERMANEN!!
Sikkahoder.blogspot
PENYEDOT KOMEDO
Dengan alat ini, tidak perlu lg memencet hidung, atau bagian wajah lainnya untuk mengeluarkan komedo.
Sikkahoder.blogspot
Obat Keputihan
Crystal-X adalah produk dari bahan-bahan alami yang mengandung Sulfur, Antiseptik, Minyak Vinieill. Membersihkan alat reproduksi wanita hingga kedalam.
Sikkahoder.blogspot
DAWASIR
Obat herbal yang diramu khusus bagi penderita Wasir (Ambeien), juga bermanfaat untuk melancarkan buang air besar dan mengurangi peradangan pada pembuluh darah anus
Sikkahoder.blogspot
TERMOMETER DIGITAL
Termometer digital dengan suara Beep. Mudah digunakan, gampang dibaca dengan display LCD dan suara beep ketika selesai mendeteksi suhu.
Sikkahoder.blogspot


ADVERTISE HERE Ads by Sikkahoder