jQuery News Ticker Recent Post Plus Thumbnails

Labels: •
Bismillahirrahmanirrahim, Alhamdulillah. Setelah melakukan trial and error yang cukup melelahkan, akhirnya blogger hack kali ini selesai dibuat dan Blogger Tune-Up persembahkan untuk para blogger. Blogger Tune-Up mendapat ide ini dari Blogger Plugins 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. Tidak lupa Blogger Tune-Up sangat berharap kritik, saran, cacian, makian, donasi dan atau apapun bentuknya untuk pengembangan lebih lanjut dan semua akan diterima dengan senang hati.
jQuery News Ticker Recent Post Plus Thumbnails

Gadget jQuery News Ticker Recent Post Plus Thumbnails

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>
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 :