Cara Memasang Slider Recent Post Di Blog

0
56 views
    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 :
Memasang slider recent post di blog
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.
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(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 #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

Kami menjual penirum asli, obat pembesar penis terbaik. Cocok untuk kamu kaum pria yang ingin memperbesar penismu dengan aman, sehat dan terpercaya. Silakan beli di jualpenirum.com

Penirum Asli Obat Pembesar Penis Terbaik
SHARE

LEAVE A REPLY

Please enter your comment!
Please enter your name here