jQuery Fitur / Recent Posts Slider Widget untuk Blogger

Widget

Memasang Featured post/slide di blogger memang bukan hal baru, dengan widget ini kita bisa membuat sebuah kelompok/unggulan posting yang ingin di tampilkan dalam bagan tersendiri. sebagai contoh jika Anda ingin menampilkan posting dari 1 kategori "Blogger" maka semua posting akan ditampilkan dari kategori "blogger". atau Anda dapat menggunakannya sebagai kelompok posting terbaru / posting fitur, Anda juga dapat menentukan berapa banyak posting yang Anda ingin tampilkan di widget, yang berarti widget ini sepenuhnya bisa Anda sesuaikan dengan keinginan, lihat demo dibawah ini:





01Bagaimana menginstal widget ini ke blogger?

seperti biasa masuk ke blogger-> Layout-> add gadget
Pilih HTML / javascript dari daftar
Copy dan paste kode di bawah ini di dalamnya dan simpan

<style type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
ul.rcentside{width:100%;height:500px}
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
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:block}
ul.rcentside img{border:0;width:100%;height:100%}
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcentside li:nth-child(2){left:0;top:50%}
ul.rcentside li:nth-child(3){left:50.5%;top:50%}
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
ul.rcentside .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8zXCjRGYxrpkRl_OVPGlW8LmQ2Gqk6Mn_TXh7iCqsrFputDAmgYRsV86djnu2CeIwPl7ORa4Nk8Hpp1QENzAghx270-Z3dp-O4XFAosRDOwzPkxF2dXgATw3cB6Qf_79DkJ8VrtzD8o/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-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{background-position: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{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height: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{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size: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;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></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://defandaky.blogspot.com",
 MaxPost:10,
 idcontaint:"#featuredpostside",
 ImageSize:300,
 interval:5000,
 autoplay:true,
 tagName:false
});
//]]>
</script>

02Cara setting/pengaturan widget

Anda hanya butuh 1 kali pengaturan.

blogURL      = url blog/web anda
MaxPost       = total maksimal posting yang dimunculkan
ImageSize    = ukuran img yang anda inginkan
idcontaint    = id/class dari pemanggil css ( biarkan saja jika anda belum mengerti )
Interval         = Waktu yang dibutuhkan untuk mengubah posisi slide dalam milidetik
autoplay        = Menulis true atau false untuk mengatur slide berjalan secara otomatis/tidak.
tagname        = jika anda ingin menampilkan posting dengan tag / label, seperti tag Blogger, maka akan ditulis sebagai tagname: “Blogger”

Selamat mencoba, jika ada pertanyaan silahkan tulis di form komentar...

Artikel Terkait

  • Tool font size di posting blogger
    Fluid Text widget Resizer adalah tool yang berguna untuk merubah ukuran font di posting dan script ini saya adopsi dari drive dinamis. Ini akan muncul tepat di bawah judul posting Anda dan akan memungkinkan pengunjung Anda untuk mengubah ukuran teks untuk kenyamanan mereka. Ukuran teks pada seluruh blog Anda akan diperbesar Dari sidebar samp…
  • Widget tabview dengan jQuery dan CSS
    Tab view adalah salah satu widget yang cukup berguna terutama untuk menghemat halaman blog anda, Widget ini sifatnya seperti menyembunyikan widget yang kemudian bisa tampil kembali jika kita mengkliknya. jika blog anda memiliki banyak gadget sebaiknya gunakan menu tabview ini untuk sedikit mengurangi tempat pada halaman blog anda yang terpakai…
  • Membuat Daftar Isi Otomatis di Blogger/Blogspot
    Banyak script javascript untuk membuat daftar isi di blogger secara otomatis dengan memanfaatkan atau memanggil direktori feed default blogger. namun terkadang javascript ini terlalu berat saat memuat atau proses loader content sehingga membuat pengunjung malas untuk membuka. contoh seperti kode javascript di bawah ini yang bisa sobat coba...…
  • jQuery Fitur / Recent Posts Slider Widget untuk Blogger
    Memasang Featured post/slide di blogger memang bukan hal baru, dengan widget ini kita bisa membuat sebuah kelompok/unggulan posting yang ingin di tampilkan dalam bagan tersendiri. sebagai contoh jika Anda ingin menampilkan posting dari 1 kategori "Blogger" maka semua posting akan ditampilkan dari kategori "blogger". atau Anda dapat menggunakan…
  • CSS widget popular post Blogger
    Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik. Silakan masuk pada akun blogger Anda Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja. langkah di atas d…
  • Membuat Widget Floating Sosial Sharing Bar
    Ketika saya berkunjung di blog tetangga, ada sebuah widget yang menarik yang saya lihat yaitu sosial sharing dengan gaya melayang/floating di atas header. untuk kali ini, jika sobat ingin memiliki widget ini { lihat gambar dibawah ini} langsung saja kita baca trik membuatnya. Tambahkan Plugin JQuery! Jika blog Anda telah memiliki sebuah plug…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...