Slider Şeklinde Resimli Son Yayınlar Eklentisi 2

Yeni bir eklenti daha paylaşmak istiyorum. Daha önce buna benzer bir eklenti paylaşmıştım ama bu biraz daha faklı. Kodun tamamını alıp gadget ile ekleyebilirsiniz. Eğer farklı bir yere eklemek istiyorsanız html kısmından istediğiniz yere ekleyebilirsiniz.
Not: Kod içerisindeki site adresini kendi site adresinizle değiştirmeniz gerekiyor.

alıntı: softglad.com
<style type="text/css"> #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:250px} #slides li{width:49.9%;height:100%;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%} #slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%} #slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%} #slides a{display:block;width:100%;height:100%;overflow:hidden} #slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} #slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal} #slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px} #slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none} #slides .overlayx,#slides 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} #slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1} #buttons{margin: 5px auto;text-align: center;background:#00BD79;width: 10%;} #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} @media only screen and (max-width:600px){ #slides ul{height:600px} #slides li:nth-child(1){width:100%;height:49.8%} #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%} #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%} #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%} } </style> <div id="featuredpost"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"http://softglad.com", MaxPost:8, idcontaint:"#featuredpost", ImageSize:300, interval:5000, autoplay:true, tagName:false }); }); //]]> </script>

Related Post: