Cara Membuat News Ticker Recent Post dengan Thumbnail

Minggu, 12 Desember 2010 ·

Membuat news ticker dengan gambar tidaklah sulit cara membuatnya tidak perlu mengedit template yang sangat membingungkan. Anda hanya perlu menaruhnya pada element halaman blog

Berikut cara membuatnya :

1. Login ke Blogger
2. Masuk ke "Tata Letak - Elemen Laman"
3. Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
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://javasriptcode.googlecode.com/files/rpplusimgnt-v1.0.js.txt"></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>



5. Klik tombol Simpan

Artikel Menarik Lainnya



6 komentar:

Tepoe mengatakan...
24 Desember 2010 06.56  

terima kasih om..
ijin save yah.. hehehe.. :D

Darana-xp mengatakan...
6 Februari 2012 15.25  

Nice Share & Salam kenal, mampir sob ke Blog saya

BitInspiration mengatakan...
19 Februari 2012 13.12  

Makasih sharingnya mantabb...pake kode yang lain ga jalan di template saya, pake ini OK...Izin copas sekalian gan...

eflianda mengatakan...
23 Juli 2012 20.15  

aku coba dulu sob..

Anonim mengatakan...
4 Oktober 2012 13.36  

gak bisa keluar

Keiruchan Agatha mengatakan...
27 Oktober 2012 22.40  

wew, mantep...

Posting Komentar

Komentar Klasik Klik di sini

Artikel Populer

Postingan Terakhir

Komentar Terakhir

Tukeran Link

<a href="http://belajartrikblog.blogspot.com">target="new"><strong>Belajar Trik Blog</strong></a>

Mengenai Saya

Foto saya
Saya adalah pemula di dunia blogging