jQuery Featured / Recent Posts Slider Widget untuk Blogger

LIVE DEMO

Cara Memasang Widget Ini Di Blogger:

• Masuk ke Blogger → Dasbor
• Klik pada Drop Down Menu dan pilih  Layout
• Tambahkan  HTML / JavaScript  Gadget
• Rekatkan kode di bawah ini di dalamnya

<style type = "text / css">
ul.rcentside * {- ukuran kotak-moz: kotak-batas; -webkit-kotak-ukuran: kotak-batas; ukuran-kotak: kotak-batas}
ul.rcentside {font: normal normal 11px Verdana, Geneva, sans-serif}
ul.rcentside, ul.rcentside li {margin: 0; padding: 0; gaya daftar: tidak ada; posisi: relatif}
ul.rcentside {width: 100%; tinggi: 500px}
ul.rcentside li {height: 24.5%; posisi: absolut; padding: 0; lebar: 49.5%; float: kiri; overflow: tersembunyi; tampilan: tidak ada}
ul.rcentside li: nth-child (1), ul.rcentside li: nth-child (2), ul.rcentside li: nth-child (3), ul.rcentside li: nth-child (4) {display: blok}
ul.rcentside img {border: 0; lebar: 100%; tinggi: 100%}
ul.rcentside li: nth-child (1) {width: 100%; tinggi: 49,5%; margin: 0 0 2px; kiri: 0; atas: 0}
ul.rcentside li: nth-child (2) {kiri: 0; atas: 50%}
ul.rcentside li: nth-child (3) {kiri: 50.5%; atas: 50%}
ul.rcentside li: nth-child (4) {width: 100%; kiri: 0; atas: 75%}
ul.rcentside .overlayx, ul.rcentside li {-webkit-transition: all .4s easy-in-out; -moz-transition: all .4s easy-in-out; -o-transisi: all .4s easy-in -out; -ms-transisi: semua .4s kemudahan masuk; transisi: semua .4s mudah keluar}
ul.rcentside .overlayx {width: 100%; tinggi: 100%; posisi: absolut; z-indeks: 2; kiri: 0; atas: 0; gambar latar belakang: url (http: //1.bp.blogspot. com / -FtnGJHMcWH8 / UIV3IE-aaJI / AAAAAAAAGHs / WvLypnWxg5A / s1600 / linebg-fade.png); posisi latar belakang: 50% 50%; latar belakang-ulang: ulangi-x}
ul.rcentside .overlayx, ul.rcentside img {border: 4px solid # 000000; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px}
ul.rcentside li: nth-child (1) .overlayx {posisi latar: 50% 25%}
ul.rcentside .overlayx: hover {-ms-filter: "progid: DXImageTransform.Microsoft. Alpha (Opacity = 10)"; filter: alpha (opacity = 10); - khtml-opacity: 0.1; -moz-opacity: 0.1 ; opacity: 0,1}
ul.rcentside h4 {posisi: absolut; bawah: 30px; z-indeks: 2; warna: putih; margin: 0; lebar: 100%; bantalan: 0 10px; tinggi baris: 1.5em; font-family: Georgia, Times, "Times New Roman"; font-weight: normal}
ul.rcentside li: nth-child (1) h4, ul.rcentside li: nth-child (4) h4 {ukuran font: 150%}
ul.rcentside .label_text {position: absolute; bawah: 10px; kiri: 10px; z-indeks: 2; warna: putih; ukuran font: 90%}
ul.rcentside li: nth-child (2) .autname, ul.rcentside li: nth-child (3) .autname {display: none}
.buttons {margin: 5px 0 0}
.buttons a {display: inline-block; text-indent: -9999px; lebar: 15px; tinggi: 25px; posisi: relatif}
.buttons a :: before {content: ""; width: 0; tinggi: 0; border-width: 8px 7px; gaya perbatasan: solid; warna batas: transparan # 535353 transparan transparan; posisi: absolut; atas: 50 %; margin-top: -8px; margin-kiri: -10px; kiri: 50%}
.buttons a.nextx :: before {border-color: transparan transparan transparan # 535353; margin-left: -3px}
</style>
<div id = "Featurepostside"> </div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type = "text / javascript"> </script>
<script src = "http://makingdifferent.github.io/blogger-widgets/featuredposts.js" type = "text / javascript"> </script>
<script type = 'text / javascript'>
// <! [CDATA [
FeaturedPostSide ({
blogURL: "http://ajaxnavbar.blogspot.com/",
 MaxPost: 30,
 idcontaint: "# Featuredpostside",
 ImageSize: 350,
 interval: 5000,
 putar otomatis: true,
 tagName: false
});
//]]>
</script> 

Tambahkan URL blog Anda dan Anda selesai!