Cara Membuat Widget Recent Post / Artikel terbaru slideshow yang cantik
Berikut akan saya ulas tentang bagaimana cara memasang Widget Slide Show postingan terbaru yang cantik di blog. Cara ini relatif mudah dan tidak berisiko karena tidak mengubah kode html inti. Kalau tidak bisa jalan atau kurang bagus tinggal delete saja. Jika menggunakan edit html dasbor, resikonya sangat besar bisa-bisa template kita jadi rusak.
Berikut langkah-langkahnya :
1. Login ke akun blog Anda
2. Pilih Tata Letak
3. Kemudian Klik Tambahkan Gadget
4. Pilih HTML/javascript
5. Copy Kode di bawah ini dan pastekan di HTML/javascript tadi.
<style type="text/css">
ul.drdsr-feat-posts *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.drdsr-feat-posts{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.drdsr-feat-posts,ul.drdsr-feat-posts li{margin:0;padding:0;list-style:none;position:relative}
ul.drdsr-feat-posts{width:320px;height:300px}
ul.drdsr-feat-posts li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.drdsr-feat-posts li:nth-child(1),ul.drdsr-feat-posts li:nth-child(2),ul.drdsr-feat-posts li:nth-child(3),ul.drdsr-feat-posts li:nth-child(4){display:block}
ul.drdsr-feat-posts img{border:0;width:100%;height:100%}
ul.drdsr-feat-posts li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.drdsr-feat-posts li:nth-child(2){left:0;top:50%}
ul.drdsr-feat-posts li:nth-child(3){left:50.5%;top:50%}
ul.drdsr-feat-posts li:nth-child(4){width:100%;left:0;top:75%}
ul.drdsr-feat-posts .overlayx,ul.drdsr-feat-posts 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.drdsr-feat-posts .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-color: #000;
color: #fff;
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .2;
text-align:justify;background-position:100% 50%;background-repeat:repeat-x}
ul.drdsr-feat-posts
ul.drdsr-feat-posts li:nth-child(1) .overlayx{background-position:50% 25%}
ul.drdsr-feat-posts .overlayx:hover{-ms-filter:Alpha(Opacity=90);filter:alpha(opacity=10);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
ul.drdsr-feat-posts h4{position:absolute;bottom:2px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:"Segoe UI",Verdana,"Trebuchet MS",Times,"Times New Roman";font-weight:normal}
ul.drdsr-feat-posts h4{color:#fff;background-color:#000; filter:alpha(opacity=60); opacity:.6;}
ul.drdsr-feat-posts li:nth-child(1) h4{position:absolute;bottom:30px;font-size:230%;color:#fff;background-color:#000; filter:alpha(opacity=70); opacity:.7;}
ul.drdsr-feat-posts li:nth-child(4) h4{font-size:170%}
li:nth-child(2) h4{font-size:120%}
li:nth-child(3) h4{font-size:120%}
ul.drdsr-feat-posts .label_text{position:absolute;bottom:10px;left:10px;z-index:2;font-size:120%;color:#fff;font-weight:normal;background-color:#000; filter:alpha(opacity=60); opacity:.6;}
.label_text .autname{color:#fff;right:2px;padding:2px;}
ul.drdsr-feat-posts li:nth-child(2) .autname,ul.drdsr-feat-posts li:nth-child(3) .autname{display:none} li:nth-child(3) .label_text{display:none}
li:nth-child(2) .autname{display:none} li:nth-child(2) .label_text{display:none}
li:nth-child(4) .label_text{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:124px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:128px}
</style>
<div id="featuredpostside"></div>
<script src="http://feat-posts.googlecode.com/svn/widgetjs"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.serietno.blogspot.co.id",
MaxPost:10,
idcontaint:"#featuredpostside",
ImageSize:200,
interval:8000,
autoplay:true,
tagName:false
});
//]]>
</script>
Keterangan:
1. Edit warna merah sesuai dengan ukuran widget sobat
2. Ganti warna kuning dengan Url blog sobat