Blogger Slider Manşet Eklentisi

merhaba arkadaşlar bugun css ve jquery ile yapılmış güzel bir slider manşet eklentisi sunucağız bu  eklentyi ister sidebar kısmında istersenizde blog kayıtlarının üstünde kullana bilirsiniz. bu  eklentiyi sadece bloğunuzun  yerleşim bölgesinden gadget ekle  diyip Html/Javascript seçip ekleme yapıyorsunuz. sizin yapmanız gereken aşağıdaki kod içersindeki http://www.tolgagonul.net/ yerine kendi sitenizin linkini eklemek
Demo

<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 {
display: none;
background-color: white;
padding: 4px;
border: 1px solid #CECECE;
-webkit-border-radius: 3px;
margin-top: 0;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
position: absolute;
}
#slides li:nth-child(1) .overlayx {
background-position: 0 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 {
position: absolute;
top: 0;
left: 0;
border: 4px solid white;
width: 100%;
height: 100%;
z-index: 2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC6GFpsqPh81TJuSe70fuEeiexQQbuNbz7QyTvLuxMOSAbN9NOm7wPsWbYY1Z_U_nB9VN9VARgGTYqZzmZAIq7giKzCsK69LAu4-taiqR67b5Fc5cp6swp0W1JbHh2IHLLI0jpd_2sCZkC/s0/linebg-fade.png);
background-position: 70% 70%;
background-repeat: repeat-x;
-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 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:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";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:"";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 {
position: absolute;
top: 0;
left: 0;
border: 4px solid white;
width: 100%;
height: 100%;
z-index: 2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC6GFpsqPh81TJuSe70fuEeiexQQbuNbz7QyTvLuxMOSAbN9NOm7wPsWbYY1Z_U_nB9VN9VARgGTYqZzmZAIq7giKzCsK69LAu4-taiqR67b5Fc5cp6swp0W1JbHh2IHLLI0jpd_2sCZkC/s0/linebg-fade.png);
background-position: 60% 60%;
background-repeat: repeat-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>
<script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.tolgagonul.net",
MaxPost:15,
idcontaint:"#featuredpost",
ImageSize:300,
interval:7000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Continue Reading