Sidebar Featured Post dengan CSS dan jQuery

Kode Iklan Di Sini

Sidebar Featured Post dengan CSS dan jQuery
Sidebar Featured Post dengan CSS dan jQuery  , Anaktimor17 Blog - Sobat  pada featured post ini untuk diletakkan pada bagian sidebar.Script yang digunakan sedikit berbeda agar dapat digunakan pada sidebar. Karena biasanya bila diletakkan pada sidebar tidak hanya untuk artikel terbaru tapi juga untuk label-label tertentu.
Bagi anda yang tertarik untuk memasang diblog anda bisa ikuti cara berikut ini:

Menambahkan gadget HTML dan Script Featured Post

  1. Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget yang ada pada sidebar
  2. Setelah itu scroll kebawah hingga menemukan HTML/JavaScript lalu klik tombol tambah yang ada disudut kanan
  3. Kemudian Masukkan Kode berikut:



 
<style scoped="" 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(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #2E8DCE;-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://ivyth.googlecode.com/svn/js/featuredpostside.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://anaktimor-17.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>



·  NB: Jika di template Anda sudah ada script jQuery, Anda tidak perlu menambahkan script berwarna merah diatas/dihapus saja(<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>). Karena pemasangan lebih dari 1 jQuery Library dapat membuat error.
·  Klik Simpan



Keterangan

Opsi-Opsi
Deskripsi
blogURL
Isikan dengan link blog anda misal:http://anaktimor-17.blogspot.com
MaxPost
Maksumal jumlah post/artikel yang ingin ditampilkan
idcontaint
ID tempat slideshow akan ditampilkan
ImageSize
ukuran gambar yang ingin ditampilkan
interval
Waktu pergantian slide. satuan dalam milidetik
autoplay
Jika ingin menampilkan slide yang bergerak secara otomatis: pilihan true atau false
pBlank
Backup gambar jika artikel tidak memiliki gambar
MonthNames
Tulisan pada nama bulan. Defaultnya seperti ini: MonthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
tagName
Jika ingin menampilkan artikel berdasarkan tag/label, misalnya tag blogger maka ditulis seperti ini : tagName:"blogger"

Sekian artikel tips blogger tentang Sidebar Featured Post dengan CSS dan jQuery .Selamat mencoba, dan jangan lupa kasi komentarnya ya :)



Sumber: http://mkr-site.blogspot.com/2013/03/sidebar-featured-post-css-jquery.html

You Might Also Like:

Disqus Comments