● Blogger için konu etiketli slider slayt kodu.
● Jquery Otomatik Reklam Slider.
● Blogunuza Jquery slider(manşet) eklentisi ekleyin.
1.Blogger Kumanda Panelinize gidin
2.Yerleşim tıklayın
3.Gadget/Widget Ekle
4.HTML / JavaScript seçeneğini seçin.
5.Aşağıdaki kodu kopyalayın ve yapıştırın.
<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#slides ul,#slides li{list-style:none;position:relative;margin:0;padding:0;}
#slides ul{height:250px;}
#slides li{width:49.9%;height:100%;position:absolute;display:none;}
#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;background-color:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:4px;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuzhLwKWo8o4WA-G3VuPfUixji-zyzNvpQvnzTRe6701V4rnJ_4tz_COK40javnW54xncXItGLdM3ZOD2DkZdKHUIbRVD5g3K8y5wzTDzdE5OknPV5DuYnbDPtXrPQLGfKhyphenhyphenTK5bD8DBK4/s1600/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #282c2f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
#slides h4{position:absolute;bottom:30px;font-size:18px;font-family:Arial;left:0;color:#FFF;z-index:3;line-height:20px;font-weight:400;margin:0;padding:0 10px;}
#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:#FFF;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute;}
#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{text-align:center;background:#282c2f;width:10%;margin:5px auto;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative;}
#buttons a::before{content:"";width:0;height:0;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%;border-color:transparent #fff transparent transparent;border-style:solid;border-width:8px 7px;}
#buttons a#nextx::before{margin-left:-3px;border-color:transparent transparent transparent #fff;}
.footer-widget-box-last,#mef-organic-tabs .nav li.last{margin-right:0;}
#header,#main,#footer,.clearfix,#slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4){display:block;}
#crosscol-wrapper,#PopularPosts1 h2,#BlogArchive1 h2,#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none;}
@media only screen and max-width600px {
#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 type="text/javascript">
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyn6E-1uiXQ8E_IjxefI4ASnEEsjpIDlWiSLAiLwHzdbybWdU7EUKAFaF-_PoH_7lZ7N1NZtEtSRpcEcDonJcuWnDGKXZEyco5_aLZ_7govFFCAUpGbTGMMlEfrGJYJSlnY8vzknF_x_b7/s1600/grey.gif",MonthNames:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx">prev</a><a href="#" id="nextx">next</a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'" alt="'+k+'" width="'+h.ImageSize+'px" height="'+h.ImageSize+'px"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click()}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://MeftunMede.Blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false});});
//]]>
</script>
Kodu denemek için Online html editor'ü kullanabilirsiniz.
Yukarıdaki kırmızı ile belirttiğim alanı kendi adınıza göre düzenlemeyi unutmayın! Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...
