Blogger Slider Manşet Eklentisi
Blogger otomatik çalışan ve etikete duyarlı yazıları gösteren slayt eklentisi çok işinize yarayacak. En çok kullanılan blog yazarlığı platformu olan blogger için tasarlanmış güzel bir manşet eklentisi. Blogger ile blog kurmak avantajlı olduğu gibi eklenti konusundaki eksiklikleri nedeniyle bu tür çalışmalar yapmak zorunda kalıyoruz.
Blogger ile yaşadığınız bir çok sorunu yazılarımı okuyarak çözebilirsiniz. Arşiv niteliğinde yazdığım diğer eklenti yazılarını okumanızı tavsiye ederim. Slider eklentisinin sidebar alanı için olan iki versiyonunu da önceki yazılarımda bulabilirsiniz.
Blogger Slider Eklentisi Nasıl Kurulur?
Blog sayfanızın ana sayfasında göstereceğiniz slayt eklentisi hem daha profesyonel hava katacak hem de ziyaretçilerinize yardımcı olacak. Otomatik ilerlemeyi ayarlayarak ve istediğiniz etiket yazılarını göstererek diğer yazılarınızdan haberdar edebilirsiniz. Slider eklentisini kurmak için adımlar;
1) Blogger kumanda panelinden Tema/ HTML'i Düzenle yolunu takip ederek kod alanında CTRL+F yardımıyla </head> kodunu bulun ve hemen üstüne aşağıdaki kodu ekleyin.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type="text/css">
#myslidepost {margin:15px auto; width: 970px;}
#myslide *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#myslide ul,#myslide li{padding:0;margin:0;list-style:none;position:relative}
#myslide ul{height:320px}
#myslide li{width:50%;height:100%;position:absolute;display:none}
#myslide li:nth-child(1), #myslide li:nth-child(2), #myslide li:nth-child(3), #myslide li:nth-child(4), #myslide li:nth-child(5){display:block}
#myslide li:nth-child(1){left:0;top:0}
#myslide li:nth-child(2){left:50%;width:25%;height:50%}
#myslide li:nth-child(3){left:75%;width:25%;height:50%}
#myslide li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#myslide li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#myslide li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#myslide li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#myslide li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#myslide li:nth-child(1) span.dm {display:block;font-size:14px;background:#242424;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#myslide li:nth-child(1) span.dy, #myslide li:nth-child(1) span.msname{display:none;}
#myslide a{display:block;width:100%;height:100%;overflow:hidden}
#myslide img{display:block;width:100%;height:auto;border:0;padding:0;background:#242424;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#myslide li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#myslide .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAFACAYAAAB5k8bJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhhJREFUeNrslG1LVFEUhe/cGQtLfBlrECECIZEgDAlRCUEoUwQRIXWc/HmmJaIiKqIFCin1YQiFNDWTCKQPEhS9qGO6Vuwlxzs62cfiXnhg77Ofu845M44Rz/MqPXt8z3nCJmzCJmz+/cZ3m1+qfXfR1Xw3IKImAg7ZRFnoxQObRn1T8pQWAxlpGdMuKO0i2GOTD/a16a5N86VdAj/YFICf0r7btCBm8ZfBNxaFNv196q+mFetycfCFRSkLpX02La4rJLjIpgzsUIvaO5yW6Wzl4BOba2CbU2rFpl3XphXgI4sb4IPSikyrlFYF3qnYkKa0mzrbLbDKphq8CWq3pdWAJTa1YJnfhqvdkVYH0mzqwUvPvtxCm96N2UIDWKDWCBZ1U12hUVdoAi9Y3APz0pR2X9oD8JxFC3gWvEKzPt5WMMOmDUxLK7GQNmmcTvHFSTCuK+hs7dq0A0xwZRaMuRqfDn0gnZyymAMj0uKaalNqo1xZAMPSSmz6UGldnLJ4BYaCaV1KozbElTR4EtS6pXWDp1x57WqlZ2rLph1Su2paT5bGP6JBN82TxmmSISxWXE1pSaX1cMqVt2BA2hWbJpXWK23tNK1XadQeU1tn8WeNP5d+92z89/RIm/ZxLxabbpq0lNJSSsvSTt80t3ac9j54tr/QTpytX9rxpokzz3ZObSvn2XKnZZ9t63xXCLVQC7VQ+0+0IwEGAOg12Bw8IUYdAAAAAElFTkSuQmCC);background-position:50% 40%;background-repeat:repeat-x;}
#myslide h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#myslide .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#myslide li:nth-child(2) .msname,#myslide li:nth-child(3) .msname,#myslide li:nth-child(4) .msname,#myslide li:nth-child(5) .msname{display:none;}
#myslide .overlayx,#myslide li{transition:all .4s ease-in-out}
#myslide li:nth-child(1) .overlayx{display:none;}
#myslide li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#myslide li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#myslide ul{height:600px}
#myslide li:nth-child(1){width:100%;height:50%}
#myslide li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#myslide li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#myslide li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#myslide li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){#myslide li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
</b:if>
</b:if>
2) Daha sonra aynı kod alanından çıkmadan önce </body> kodunun hemen üstüne de aşağıdaki kodu ekleyin.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script>
//<![CDATA[
function myslidepost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#myslidepost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",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="myslide"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="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+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><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="msname">'+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("#myslide li:first").before(e("#myslide li:last"));return false});e("#nextx").click(function(){e("#myslide li:last").after(e("#myslide li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#myslide li:first").before(e("#myslide li:last"));e("#myslide").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();};document.write('')
//]]>
//<![CDATA[
$(document).ready(function () {
myslidepost({
blogURL: "https://dogushakanyilmaz.blogspot.com",
MaxPost: 8,
idcontaint:"#myslidepost",
ImageSize:500,
interval: 10000,
autoplay:true,
tagName: false
});
});
//]]>
</script>
</b:if>
</b:if>
3) Eklenti Ayarları
blogURL: https://dogushakanyilmaz.blogspot yazan yere kendi url adresinizi eklemeyi unutmayın.
MaxPost: 8, slider içerisinde kaç adte yazı gösterileceğini simgeler. Bu sayıyı değiştirebiliriniz.
interval: 10000, slaytın ilerleyeceği zamanı gösteriyor. Bu değeri yükselterek daha yavaş ilerlemesini veya daha da azaltarak hızlı geçiş yapmasını sağlayabilirsiniz.
tagName: false, ayar bu şekilde kaldığında son yazılarınız gözükür. Dilerseniz benimde kullandığım gibi belirlediğiniz etiket yazılarını gösterebilirsiniz. Etikete göre değiştirmek istiyorsanız tagName: "Seo Teknikleri" yerine kendi etiketinizi girebilirsiniz.
Not: Yazılarınıza verdiğiniz etiket küçük harfle başlıyorsa aynı şekilde eklemeyi unutmayın. Örneğin: "seo teknikleri" olarak verdiğiniz etiketi kod içinde SEO Teknikleri olarak kullanmayın aynı şekilde ekleyin.
4) Son olarak aşağıdaki HTML kodunu Gadget olarak Header ve Main arasına ekleyin.
Örnek Görüntü:
<div id="myslidepost"></div>
Blogger kullanıcılarının temaları farklı olduğundan bazılarında çalışmayabilir. Eğer son eklediğiniz kod çalışmazsa aşağıdaki kodu benzeri bir uygun yere ekleyerek deneyin.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:section class='myslider2' id='myslider2' maxwidgets='1' showaddelement='yes'/>
</b:if>
</b:if>
Kaynak: Blogger Eklentileri
✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵
