Cara pasang Recent Posts Slider versi 2


Recent posts slider versi 2 seperti yang boleh anda lihat pada blog ini (sila klik) sememangnya widget yang sangat menarik. Widget tersebut akan memaparkan tajuk post beserta thumbnail (image) yang berefek slider.

Untuk memasang widget recent post slider ini pada blog anda, sila ikut beberapa langkah di bawah.

Langkah 1

Log in blog > Dashboard > Layout > Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin kod di bawah dan paste pada ruang Content HTML/Javascript (rujuk langkah 1).


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 4500;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
<style type="text/css">
#listticker{
height:277px;
width:280px;
margin-bottom:15px;
padding:0px;
overflow:hidden;
}
#listticker li{
background:#FDE1E1 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -100px!important;
border: 1px solid #C6C6C6;
list-style:none;
line-height:0.90em;
height:46px;
margin:3px;
padding:2px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
#listticker li a{
font-family: 'arial';
text-transform:normal;
text-shadow:0 1px 2px rgba(0,0,0,0.6);
letter-spacing:0.05em;
overflow:hidden;
}
#listticker img{
float:left;
margin:3px 3px 4px -7px;
padding:0px;
border:#EAE7E7 solid thin;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
#listticker img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[1] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[2] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[3] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
imgr[4] = "http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png";
showRandomImg = true;
tablewidth = 250;
cellspacing = 0;
borderColor = "";
bgTD = "#";
imgwidth = 35;
imgheight = 35;
fntsize = 12;
acolor = "#262626";
aBold = true;
icon = "";
text = "no";
showPostDate = false;
summaryPost = 0;
summaryFontsize = 0;
summaryColor = "#";
icon2 = "";
numposts = 15;
home_page = "http://maribinablog.blogspot.com/";
</script>
<script src="http://javscript-code.googlecode.com/files/recent_posts_slider.js" type="text/javascript"></script>



Sila edit kod yang berwarna biru mengikut kesesuaian blog anda.

width:280px;  (lebar kotak)
tablewidth = 250 (lebar teks pada kotak)
background:# FDE1E1;  ( background kotak)
acolor = "#262626";  (Warna teks)
numposts = 15;  (Bilangan tajuk post yang ingin dipaparkan)
home_page = "http://maribinablog.blogspot.com/";  ( URL blog anda)

Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.

Cara pasang Recent Posts Slider versi 2

Terima kasih dulu ada bender nie dah hilang .. skg dah jumpa semula TQ

salam..
ermm..hari tu nak juga yang lama
dah tak sesuai bila tukar www.
sekarang saya nak cuba yang ni
pula..harap menjadi :)

@akuanakpahangDah boleh pasang semula benda ni :)

@zulkboYang dulu guna google site. Blog yang guna domain sendiri memang tak jadi kalau pasang benda ni. Sekarang ni guna dah google code pulak. Harap-harap ok :)

@Nescafe ais
haha patutlaa byk kali ak cuba xjadi sbb gune www?

Entri Terkini | Google +1 Ganti Google Friends Connect

tq..try pasang lu..

dah pasang di blog ibualiya.blogspot.com

tp kenapa gambor tumbnail x keluor.. ??

@kakyongSaya tak pasti sebab apa boleh error macam tu. Mungkin problem ni berkaitan dengan script template yang digunakan

cantik....tpi napa movement dia mcm xsmooth ek? yg lama lagi smooth

Thanks.. Entry yg sangat menarik..

mantapo gan, makasih.
visit back y, heeee
http://omsambudy.com



Assalamualaikum bro,

Saya nak minta tolong dari bro sangat-sangat.
bro bagaimana nak kembali kepada PROFILE BLOGGER ?
semalam saya terklik 'google + follower' di blog baru buat (blogshop) dan semuanya terjadi
peliks selepas tu.


- orang tak jumpa link belog saya
- saya sendiri tak jumpa dashboard blog


Mohon bantuan bro sangat-sangat. Sangat-sangat tertekan =(

url blog (personal): http://www.momoy-blogirl.blogspot.com


Terima kasih bro .



MOMOY
syalyx_00@yahoo.com

terima kasih banyak2 bro tolong momoy =)
blog dah sangat2 ok sekarang. happyyyyy

Thank you for sharing this info

Sangat membantu saya dalam mencari tutorial, ada banyak cara untuk pasang recent PostS di blog . Salam kenal dari Indonesia