Blogger Sidebar İçin Slider Eklentisi

   Farklı şekillerde olan hem yatay hem de dikey olmak üzere,diğer yatay şeklinde olanına BURADAN göz atabilirsiniz.

   Bu eklentimizde kenar kısmında kullanılan eklentinin kullanımı oldukça kolay ve sitenize eklemek de o kadar kolay ki her hangi başka css kodları veya tag şablon kodları gibi kodlarla uğraşmakta kalmayacaksınız.
Eklentimizi blogger Kumanda Paneli > Yerleşim > Gadget Ekle > HTML/Javascript ekle yolunu takip ederek aşağıdaki kodu açmış olduğunuz gadget içerisine yapıştırarak gerekli yerleri ve slider dönme saniye hızını kendinize göre ayarladıkdan sonra kaydederek işleminizi bitirmiş olacaksınız.Ayrıca bu eklenti'yi blogger hesabınızda istediğiniz yerde kullanabilirsiniz.

NOT: Kod İçerisinde yer alan http://etralibela-61.blogspot.com.tr/ linki yerine sizin sitenizin linkini eklemeyi unutmayınız.

<style scoped="" type="text/css"> /*trickstoo modified widget of abt slider widget*/ ul.abt-sidebar-slider *{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } ul.abt-sidebar-slider{ font:normal normal 11px embria } ul.abt-sidebar-slider,ul.abt-sidebar-slider li{ margin:0; padding:0; list-style:none; position:relative } ul.abt-sidebar-slider{ width:100%; height:500px } ul.abt-sidebar-slider li{ height:24.5%; position:absolute; padding:0; width:49.5%; float:left; overflow:hidden; display:none } ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){ display:block } ul.abt-sidebar-slider img{ border:0; width:100%; height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%; height:49.5%; margin:0 0 2px; left:0;top:0 } ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%} ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%} ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%} ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider 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.abt-sidebar-slider .overlayx{ width:100%; height:100%; position:absolute; z-index:2; left:0; top:0; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZOpLBnIqlHcq_QXdM_rwYoXiLzPUAVjQSV33MGj5yh1wI4Ll3uZCFO70LfXxDsAPe31UksavPQnjUqyJKPW6VJtG7735yDuHWg3bX7lHTm-Ic7eOEGTTEv6n0egme4KM9i8-7dPETaro/s1600/linebg-fade.png); background-position:50% 50%; background-repeat:repeat-x } ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{ border:4px solid #DEDEDE; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px } ul.abt-sidebar-slider li:nth-child(1) .overlayx{ background-position:50% 25% } ul.abt-sidebar-slider .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.abt-sidebar-slider h4{ position:absolute; bottom:30px; z-index:2; color:white; margin:0; width:100%; padding:0 10px; line-height:1.5em; font:embria; font-weight:normal } ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{ font-size:150% } ul.abt-sidebar-slider .label_text{ position:absolute; bottom:10px; left:10px; z-index:2; color:white; font-size:90%} ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider 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><br /> <div id="featuredpostside"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><br /> <script src="https://trickstoo-slider-recent-posts.googlecode.com/svn/trickstoo-slider.js" type="text/javascript"></script><br /> <script type='text/javascript'> //<![CDATA[ FeaturedPostSide({ blogURL:"http://etralibela-61.blogspot.com.tr/", MaxPost:8, idcontaint:"#featuredpostside", ImageSize:300, interval:6000, autoplay:true, tagName:false }); //]]> </script>


Bizi Takip Edin..
Pinterest>> Facebook>> Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.