jQuery News Ticker Recent Post Plus Thumbnails

Liat Gadget Recent Post di sebelah kanan atas, Asal Pungut mendapat ide ini dari Modification.Blogspot.Com tentang gadget artikel terbaru yang mampu menampilkan gambar mini dan Ralf Geschke tentang News Ticker atau berita terbaru yang ditampilkan terus menerus dengan efek berjalan (slide). Dari kombinasi kedua script tersebut maka tersusunlah script kombinasi yang cukup menarik dan unik dan diberi nama jQuery News Ticker Recent Post Plus Thumbnails, berbasis JSON dan jQuery menjadikan gadget ini layak untuk teman-teman blogger coba. 

 

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 4
Masukan (copypaste) kode dibawah ini:

<style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;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://btuneup.googlecode.com/files/rpplusimgnt-v1.0.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 125;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

  Atau Download Kodenya di SINI

Judul Gadget terserah anda dan baca keterangan jika ingin memodifikasinya sesuai keinginan anda...
Langkah 5
Klik tombol "Simpan"

Keterangan:
Perhatikan kode-kode pada Langkah 4!

• Untuk membuang garis tepi ubahlah nilai 1px menjadi 0 pada kode border:solid 1px #585858; (Baris 2)
• Untuk mengubah background ubahlah nilai #2f2f2f pada kode background-color:#2f2f2f; atau jika tidak ingin menggunakan background buanglah kode tersebut (Baris 2)
• Untuk mengubah warna font judul artikel ubahlah nilai #FFF pada kode color:#FFF (Baris 6)
• Untuk mengubah warna font artikel ubahlah nilai #DEDEDE pada kode color:#DEDEDE (Baris 8)
• Untuk mengubah ukuran gambar mini ubahlah nilai 55px pada kode width:55px; dan kode height:55px; (Baris 9)
• Jika template blog anda telah terpasang framework jQuery sebelumnya buanglah kode pemanggilan jQuery (Baris 11)
• Ubahlah nilai 400 pada kode var speed = 400; untuk mengatur kecepatan (Baris 14)
• Ubahlah nilai 2500 pada kode var pause = 2500; untuk mengatur lamanya artikel tersebut tertahan (pause) sebelum diganti artikel berikutnya (Baris 15)
• Ubahlah nilai 10 pada kode var numposts = 10; untuk menentukan jumlah artikel yang akan ditampilkan (Baris 23)
• Ubahlah nilai 125 pada kode var numchars = 125; untuk menentukan jumlah karakter artikel yang akan ditampilkan (Baris 24)
• Feed harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh.

Special Thanks to :

•  http://modification-blog.blogspot.com/
• Aneesh from http://www.bloggerplugins.org/ for Recent Post Widget with Thumbnails
• Ralf Geschke from http://geschke.name/ for jQuery News Ticker

by Facebook Comment, Mau?

Artikel Lainnya