jQuery Feature / Recent Posts Slider Widget untuk Blogger

jQuery Feature / Recent Posts Slider

Hai teman blogger semua,apa kabar yang pastinya sehatkan dan hari ini saya ingin membantu sebagian para blogger yang kesusahan saat ingin menampilkan post dengan sangat interak tif dan mudah,sebagai contoh jika Anda ingin menampilkan posting dari 1 kategori " Blogger " maka semua posting akan ditampilkan dari " blogger " kategori . atau Anda dapat menggunakannya sebagai posting terbaru / menampilkan tulisan , juga Anda dapat memilih berapa banyak posting yang Anda ingin menunjukkan ke widget , itu berarti widget ini sepenuhnya disesuaikan dan disesuaikan untuk Anda.
Ikuti langkah-langkah di bawah ini setelah menambahkan widget silakan berbagi pengalaman dan saran kepada kami dengan memberikan komentar di bawah ini...

Demo

Tutorial

• Seperti biasa masuk ke blogger-> Layout-> add gadget
• Pilih HTML / javascript dari daftar
• Copy dan paste kode di bawah ini di atasnya

<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/AVvXsEheUNbt7TgqBD8qGdoCQIk6nXGR2P8Ht3dhtp8qpfTc0BwnSg7x7jQR7odrwkAyzee1bZEIhci3iT5BMe19rDMdPU99wXfgI4-A3bK2dq3J8ehfWXps1o6QIKgYshPrbvslMdh54PCTCRo/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="https://googledrive.com/host/0B9digw99CXk0c0t5dGpQSndQQ0E/dc.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://devilz-cod3.blogspot.com",
 MaxPost:30,
 idcontaint:"#featuredpostside",
 ImageSize:300,
 interval:5000,
 autoplay:true,
 tagName:false
});
//]]>
</script>

Catatan: Hapus (JQuery) diatas jika ditemplate anda sudah ada...

Pengaturan

blogURL = URL blog Anda di sini
MaxPost = Total no. posting di slider
Interval = Waktu yang dibutuhkan untuk mengubah posisi slide dalam milidetik
autoplay = Menulis benar atau salah dalam Anda ingin / tidak ingin slide untuk mengubah secara otomatis.
tagname = Jika Anda ingin menampilkan artikel berdasarkan tag / label, seperti tag Blogger, maka akan ditulis sebagai tagname: "Blogger"

• Sekarang menyimpan widget dan lihat hasilnya: D