Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Blogger için Slider Manşet Eklentisi
#1
Merhaba arkadaşlar sizlerle sorunsuz çalışan ve güzel görünüme sahip slider - manşet  eklentisini paylaşacağım. slider üzerin de ufa tefek düzenlemeler yaptım. örn: tarih kısmını Türkçeleştirdim. güle güle kullanın. :)

Sliderimizi Gadget Ekle Kısmından Javascript olarak ekleyebilir ya da şablonumuz da dilediğiniz yere ekleyebilirsiniz.


QAWY7y.jpg

PHP Kod:
<style type='text/css'>
#top-main{position:relative}
#top-main .widget{border:0;padding:0 0 22px}
#top-main h2{position:absolute;left:-9999px}
#slides li {
displaynone;
background-colorwhite;
padding4px;
border1px solid #CECECE;
-webkit-border-radius3px;
margin-top0;
-
moz-border-radius3px;
-
o-border-radius3px;
border-radius3px;
positionabsolute;
}
#slides li:nth-child(1) .overlayx {
background-position0 0;
}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:20;margin:0;list-style:none;position:relative}
#slides ul{height:275px}
#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{width:100%;height:100%}
#slides .overlayx {
positionabsolute;
top0;
left0;
border4px solid white;
width100%;
height100%;
z-index2;
background-imageurl(http://1.bp.blogspot.com/-ZfBCBvgVmBs/UYMbpk2OF2I/AAAAAAAAIRs/SIa43KPHXAs/s000/linebg-fade.png);
background-position7070%;
background-repeatrepeat-x;
-
webkit-transitionall .4s ease-in-out;
-
moz-transitionall .4s ease-in-out;
-
o-transitionall .4s ease-in-out;
-
ms-transitionall .4s ease-in-out;
transitionall .4s ease-in-out;
}
#slides h4{position:absolute;bottom:25px;width:100%;padding:0 10px;margin:0 -5px;font-size:14px;z-index:3;color:white;text-shadow:0 1px 2px #918F8F}
#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:14px}
#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:&quot;progid:DXImageTransform.Microsoft. Alpha(Opacity=10)&quot;;filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 0px auto;text-align: center;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:&quot;&quot;;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%}
}
#slides .overlayx {
positionabsolute;
top0;
left0;
border4px solid white;
width100%;
height100%;
z-index2;
background-imageurl(http://1.bp.blogspot.com/-ZfBCBvgVmBs/UYMbpk2OF2I/AAAAAAAAIRs/SIa43KPHXAs/s000/linebg-fade.png);
background-position6060%;
background-repeatrepeat-x;
}
</
style>
<
div id='featuredpost'>
</
div>
<
script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'/>
<
script src='https://sliderpro.googlecode.com/svn/slidertr' type='text/javascript'/>
<
script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"BURAYASİTEADRESİNİZ",
MaxPost:15,
idcontaint:"#featuredpost",
ImageSize:300,
interval:7000,
autoplay:true,
tagName:false
});
});
//]]>
</script
Ara
Cevapla


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping