Kamis, 01 September 2011

Membuat Recent Post Animasi Tumbnail Versi 2

Pada dini hari ini saya akan memberikan tips Cara Membuat Recent Post Disertai  Animasi Tumbnail Versi 2, menarik bukan.. Oke, sebelumnya saya pernah membahas bagaimana Membuat Populer View dengan Thumbnail Bergerak Fungsi keduanya sama hanya saja pada tutorial kali ini lebih simple dari tutorial sebelumnya. Langsung ke TKB saja ya...!!!
  • Pilih Rancangan;

  • Klik tab Tambahkan Elemen;

  • Pilih HTML/JavaScript;

  • Copy paste kode dibawah ini kedalamnya;

<style type="text/css">
#kod_plus_img{height:377px;}
#kod_plus_img li {height:50px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #ccc;}
#kod_plus_img a{color:#000;}
#kod_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#kod_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kang-onk.googlecode.com/files/recentpost-v21.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
kodnewsticker();
interval = setInterval(kodnewsticker, pause);
});
</script>
<ul id="kod_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=kodthumbnt"></script>
</ul><small><a href="http://kang-onk.blogspot.com/2011/09/membuat-recent-post-animasi-tumbnail.html" target="_blank">pasang widget ini</a></small>
  • Klik Simpan 

  • Lihat Hasilnya.

Silakan modifikasi sesuai dengan template blog anda semua.
Semoga bermanfaat bagi anda seaklian dan jangan lupa komentarnya, terima kasih

Tidak ada komentar:

Posting Komentar