Slider Şeklinde Resimli Son Yayınlar Eklentisi

Yine blogger ile ilgili güzel bir eklenti. Bu eklenti sayesinde, blogunuz daha ilgi çekici olur ve diğer bloglardan faklı bir görünüm kazanır. Bu kodu alıp ister gadget olarak ekleyebilirsiniz istersenizde html kısmından istediğiniz bir yere eklersiniz.


alıntı: makingdifferent.com
<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/AVvXsEgYeBcW_kqvnasUx43M5EBhdbo6JbT_a5CRmQ7-NgyfD3Zjr4g6XBy1Jf3cn2Z1yU14lLjezyPkDdJYdUkWlpPaJtZ6E3N8SdnbdbjP-fRP9ROSAV9VSCJUJDUzoYKmCZD1Gr_hxbUJs3I/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://chhotu-motu.blogspot.com", MaxPost:30, idcontaint:"#featuredpostside", ImageSize:300, interval:5000, autoplay:true, tagName:false }); //]]> </script>

Related Post: