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.



{ 18 comments.. read them below or add one }

akuanakpahang akuanakpahang 8:12 PM
Terima kasih dulu ada bender nie dah hilang .. skg dah jumpa semula TQ
zulkbo zulkbo 9:36 PM
salam..
ermm..hari tu nak juga yang lama
dah tak sesuai bila tukar www.
sekarang saya nak cuba yang ni
pula..harap menjadi :)
Nescafe ais Nescafe ais 11:56 PM
@akuanakpahangDah boleh pasang semula benda ni :)
Nescafe ais Nescafe ais 11:57 PM
@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 :)
Kazen Kazen 2:45 AM
@Nescafe ais
haha patutlaa byk kali ak cuba xjadi sbb gune www?

Entri Terkini | Google +1 Ganti Google Friends Connect
Nong Nong 1:30 AM
tq..try pasang lu..
kakyong kakyong 2:22 PM
dah pasang di blog ibualiya.blogspot.com

tp kenapa gambor tumbnail x keluor.. ??
Nescafe ais Nescafe ais 2:08 AM
@kakyongSaya tak pasti sebab apa boleh error macam tu. Mungkin problem ni berkaitan dengan script template yang digunakan
HafizRahman.com HafizRahman.com 2:01 AM
cantik....tpi napa movement dia mcm xsmooth ek? yg lama lagi smooth
Syed Zulfaizzuan Aljufri Syed Zulfaizzuan Aljufri 7:23 PM
kod warna nak carik kat mna
Fifie Hirano Fifie Hirano 2:00 AM
Thanks.. Entry yg sangat menarik..
om sam budy om sam budy 9:15 PM
mantapo gan, makasih.
visit back y, heeee
http://omsambudy.com
Princess Momoy Princess Momoy 11:16 AM


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
[email protected]
.::: Princess MOMOY :::. .::: Princess MOMOY :::. 3:02 AM
terima kasih banyak2 bro tolong momoy =)
blog dah sangat2 ok sekarang. happyyyyy
Admin Admin 12:14 AM
Thank you for sharing this info
Hedi Putra Hedi Putra 9:53 AM
Sangat membantu saya dalam mencari tutorial, ada banyak cara untuk pasang recent PostS di blog . Salam kenal dari Indonesia