Blogger Otomatik ve Etiket Duyarlı Slider Widget Eklentisi

Blogger Otomatik ve Etiket Duyarlı Slider Widget Eklentisi - Blogcular için, blog yazmanın en iyi yer Google Blogger; en güzel yanı ise tamamen ücretsiz olmasıdır. Diğer bir özelliği de Google sunucuları üzerinde baındırıldığı için, sunucu kesinti süresi yoktur.

Blogger, bloglama platformları arasında en popüler olanı ve olmayada devam ediyor. Birçok blog yazarı blog siteleri için, tema ve widget gibi birçok özelliğe ihtiyaç duymakta ve blog siteleri için bir eklenti arşivi oluşturmayı da ihmal etmiyorlar. Dolayısıyla, blog sitenize bazı yeni özellikler eklemek isteyebilirsiniz, örneğin sidebar (kenar çubuğu)'a veya blogunuzun başka bir alana otomatik ve etkiket duyarlı slider widget özelliği eklemek isteyebilirsiniz. Blog sitemizde birçok widget özelliğine rastlayabilirsiniz.

Otomatik ve Etiket Duyarlı Slider Widget Kurulumu

Blog veya web sitelerinde ziyaretçilerin ilgisini çekebilecek bir çok widget eklentisi görebilirsiniz. Bu widget özellikleri sayesinde blog ziyaretçileri için blog içi dolaşımına da yardımcı olmuş oluyor. Widget'i eklemek için aşağıdaki adımları uygulayın.

1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Açılan sayfada CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> konun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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:&#39;Oswald&#39;;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:&#39;Oswald&#39;;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:&#39;Oswald&#39;;
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:&#39;Oswald&#39;;
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- Aşağıdaki javaScript kodunu blogunuzda bulunan </body> konun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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://saglikveguzellikonerileri.blogspot.com",
MaxPost: 8,
idcontaint:"#myslidepost",
ImageSize:500,
interval: 10000,
autoplay:true,
tagName: false
});
});
//]]>
</script>
</b:if>
</b:if>

3- Aşağıdaki HTML kodu, blogunuzda header ve main arasında olacak bir Gatget (HTML/javaScript) içerisine ekleyin.

<div id="myslidepost"></div>

Eğer blogunuzda istediğiniz gibi bir Gatget (HTML/javaScript) yoksa ve nasıl ekleyeceğinizi bilmiyorsanız aşağıdaki kodu header ve main arasında olacak şekilde uygun bir yere ekleyin ve şablonu kaydedin.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:section class='myslider2' id='myslider2' maxwidgets='1' showaddelement='yes'/>
</b:if>
</b:if>

Ön İzleme

Blogger sitelerinde kullanılan blog temaları birbirinden farklı olduğundan dolayı, tam olarak nereye ekleneceği konusunda net bir bilgi paylaşamıyoruz.

4- Widget ayarları

blogURL: "https://saglikveguzellikonerileri.blogspot.com" adresi yerine kendi blog adresinizi ekleyin.
MaxPost: 8, widget içerisinde kaç adet yayın bulunacağını göstermektedir.
interval:10000, Zamansal olarak widget slayt hareketliliğini belirler. İstediğiniz hız oranına uygun olarak ayarlayabilirsiniz.
tagName: false, Yeni içeriklerin gerçek zamanlı olarak widget içerisinde görünmesini sağlıyor. Bir kaç gün önce yayınladığımız;

Bknz: Blogger Slayt Tasarımlı Son Yayınlananlar Widget'i

Özellikleri arasında bulunan tagName: "Blogger Temaları" etiket duyarlı özelliği sayesinde blogunuzda bulunan etiketleri ekleyerek de kullanabilirsiniz.