Cara Memasang Slider Recent Post Di Blog

    Halo sobat Caritahu, apa kabar hari ini? Hari ini Caritahu akan berbagi Cara Memasang Slider Recent Post Di Blogger. Adapun slider tersebut akan dipasang pada sidebar blog sehingga semakin mempercantik tampilan blog. Slider tersebut akan berganti-ganti warna setiap beberapa detik.

Berikut screen shot dari slider recent post tersebut di bawah ini :

Slider recent post di blog

Untuk bisa membuat slider recent post seperti itu, caranya gampang koq.

1. Masuk ke akun Blogger sobat.

2. Setelah itu masuk ke Tata Letak --> Tambahkan Gadget lalu pilih HTML/Javascript.

Baca juga : Survey Online dibayar dollar

3. Kemudian sobat copy kode berikut di dalam kotak HTML/Javascript tersebut.

 <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/AVvXsEjbnCmuFHDcq42dNUkTVPcn2goRqW06XrlmhON7p0n1pud5ALunG9AecAL1wcESeTSH0hio8gFuMDxpQkpLih8ZCnnnI5BCeVCER8a0A3bN9lWnrSq-odistngO9DeMawg_27R2snAyPhE/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://blogziip.blogspot.com", MaxPost:30, idcontaint:"#featuredpostside", ImageSize:300, interval:5000, autoplay:true, tagName:false }); //]]>
</script>
</div>

4. Ganti kode berwarna merah tersebut dengan URL blog sobat.

5. Klim Simpan Template dan lihat hasilnya.

                                                                    * * * * * * * *

Sumber : Makingdiferent