Artikel Terbaru !!!

Selasa, 18 Januari 2011

Membuat Recent Post Jquery

Recent Post dengan Jquery sungguh sangat bagus dan indah, ditambah lagi dengan efek smooth yang menjadikan recent post bergerak dengan halus dari atas ke bawah, keren sekali, dengan tulisan awal di sebelah gambar, itu juga terdapat thumbnail yang menyertai judul, dengan pemrograman Jquery widget ini akan terasa lambat loading karena berat



Berikut caranya :

1. Masuk ke Rancangan > Elemen Laman > Tambah Gadget > HTML/JavaScript
2. Copy dan Paste Script 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://nuweblog.googlecode.com/files/Recent-by-Nuweb.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 250;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Mudah kan ? hanya tinggal copy dan paste


15 komentar:

admin wiki mengatakan...

Klo JQuery-nya kesamping kodenya gimana yah ?? hehehe... pengen bikin yg kesamping....

wikilead

Anshari Kurniawan mengatakan...

makasih infonya kawan aku sudah coba dan berhasil makasih yah infonya,.,.,

Dadang Herdiana mengatakan...

Sip dah,,, :D

ullet mengatakan...

keren.... :)

uncle hyree mengatakan...

terima kasih atas tips yg diberikan..uncle sudah aplly di blog uncle..

Giicha's Stories mengatakan...

kak makasi infonya...^^
uda berhasil
tpi...kak,
ko jadinya malah berantakan?
recent post yg di bwh jd ketindih ama recent post yg muncul d atasnya?
,gmn itu kak?

makasi

sop mengatakan...

nice sharing.. thx

Mbahyar mengatakan...

oke nih..

radiohotstation mengatakan...

ada embel2nya produk mas bro nya, jdi sya lepas lg ketauan niru

raiza faisal mengatakan...

sama, saya lepas, malah jadi pingin edit embelnya. yg .js yg goole code :)

iWaka91 mengatakan...

keren bro, makasih dah share :)

iWaka91 mengatakan...

untuk yang tumpang tindih postnya, silahkan kurangi angka pada

var numchars = 250;

semoga membantu :)

walfchild mengatakan...

salam kenal sobb.. mantap infonya ..thanks..

Admin Jos998 ~ JOSO mengatakan...

MAKASIH BANGET YA MAS BROOO Nuweblog emang TOPPPP

Jos998.blogspot.com

redzone-tm mengatakan...

makasih sob tutornya, hasilnya keren jd kpengen masang nih..
-keep blogging-

Posting Komentar