Cara Memasang Recent Posts Slider Versi 2

tksi000.blogspot.com - Recent posts slider versi 2 seperti contoh memang widget yang sangat menarik. Widget tersebut akan memaparkan tajuk post beserta thumbnail (image) yang berefek slider.

Cara pemasangan widget recent post slider ini , silahkan ikuti langkah-langkahnya....

Langkah 1
1. Login blog
2. Dashboard
3. Layout / Tata Letak
4. Add A Gadget
5. Click pada +HTML/Javascript.

Langkah 2
Salin kode di bawah dan paste pada ruang content HTML/Javascript.

<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:#FDE1E1url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQpMdR6l7o5Fw_Eckj7nONXrPECd7eMlG-2w9MwhJQSRl7xpZYWvgw_C8zCG9zwf1a1Yg-17U1iidYRttqHpi5dP-FrL0TYbRmRoZVzEn0Y8sPefw457E36UHOr_QcgdDQnzWLHpdx-_kZ/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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqmbb-Y4hZBJDiamxvyTw_1ajDjJPQaqUc4kFUBkE6h8dutf-P5pJq0DMhIFl3K1D7h7u6OOVk2reoTCpvrEiiOOThuZCv2pk9NtHBacW9vgLZQI0iIC6lQl_IBjkd_cJsA8MM8qUXRR5/";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqmbb-Y4hZBJDiamxvyTw_1ajDjJPQaqUc4kFUBkE6h8dutf-P5pJq0DMhIFl3K1D7h7u6OOVk2reoTCpvrEiiOOThuZCv2pk9NtHBacW9vgLZQI0iIC6lQl_IBjkd_cJsA8MM8qUXRR5/";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqmbb-Y4hZBJDiamxvyTw_1ajDjJPQaqUc4kFUBkE6h8dutf-P5pJq0DMhIFl3K1D7h7u6OOVk2reoTCpvrEiiOOThuZCv2pk9NtHBacW9vgLZQI0iIC6lQl_IBjkd_cJsA8MM8qUXRR5/";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqmbb-Y4hZBJDiamxvyTw_1ajDjJPQaqUc4kFUBkE6h8dutf-P5pJq0DMhIFl3K1D7h7u6OOVk2reoTCpvrEiiOOThuZCv2pk9NtHBacW9vgLZQI0iIC6lQl_IBjkd_cJsA8MM8qUXRR5/";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqmbb-Y4hZBJDiamxvyTw_1ajDjJPQaqUc4kFUBkE6h8dutf-P5pJq0DMhIFl3K1D7h7u6OOVk2reoTCpvrEiiOOThuZCv2pk9NtHBacW9vgLZQI0iIC6lQl_IBjkd_cJsA8MM8qUXRR5/";

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 = "URL BLOG SOBAT";

</script>

<script src="http://javscript-code.googlecode.com/files/recent_posts_slider.js" type="text/javascript"></script>

NB >>>>>> Silahkan sobat atuur saja yang saya beri BOLD

Lebar kotak -> width:280px;
Tinggi kotak -> height:277px;
Lebar teks -> tablewidth = 250
Background -> # FDE1E1;
Warna teks -> acolor = "#262626";
Post yang ingin ditampilkan -> numposts = 15;

Click Preview , jika tidak ada kesalahan atau eror, silahkan save.. thank you ^_^