Seo Teknikleri ve Blog İpuçları

Blogger Slider Manşet Eklentisi

Share:
blogger-etikete-duyarlı-slayt-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 != &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)  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 != &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://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 != &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>

Kaynak: Blogger Eklentileri

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

15 yorum:

  1. Benim temamda slider eklenti yeri yok header e yapsam olur mu ki? birde bunu mobil gizleyebilirmiyiz ki?

    YanıtlaSil
    Yanıtlar
    1. Bu kodu istediğiniz yerde kullanabilirsiniz. Etkili olduğu yer blog kayıtlarının üst tarafıdır. Eklentileri mobilde gizlemek için şablonunuzda gizleyeceğiniz eklentiyi bulun ve içindeki locked='false' kodunda sonra mobil="no" kodunu ekleyerek yapabilirsiniz.

      Sil
  2. Olmuyor çalıştıramadım hepsini sizin dediğiniz gibi yaptım deneme bloğumda da denedim yardımcı olurmusunuz?

    YanıtlaSil
    Yanıtlar
    1. Blog linkinizi eklediniz ve gadget olarak ikinci alternatifi de denediyseniz çalışması lazım. Daha önce kullandığım bir kod.

      Sil
    2. Tamam şimdi ekleyebilirsiniz..Kod kutusunda sorun vardı sanırım.

      Sil
    3. Yorumunuzu yeni gordum tamamdir yarin ekliycem insallah çalışir 🙏

      Sil
    4. Hocam maalesef header e koydum olmadı blog yazılarının üstüne koydum olmadı çalışmıyor.

      Sil
    5. O zaman temayla alakalı olabilir. Yazıda gösterdiğim gibi bir alan olması lazım demek ki.

      Sil
    6. Tamamdır başka sliderlere bakayım o zaman teşekkür ederim :)

      Sil
  3. hocam bu eklenti güzel denedim ama mobilde gözükür mü bu sizce yada mobilde esnek şekilde gözükür mü birde sitenizde yan tarafda olan kategoriler eklentisi var mı

    YanıtlaSil
    Yanıtlar
    1. Aynı yazıyı senin sayfanda da gördüm. Deneyip görmüş olman gerekmez mi? O kategoriler eklentisi temanın kendisinde vardı.

      Sil
    2. yazıyı yeni ekledim hocam ne olur ne olmaz diye silersem eklentiyi kodlar lazım olacak diye ama ben aynısının tek html eklenen kısmını buldum o daha kolay olacak ama oda jquery herhalde siteyi yavaşlatır mı sizce

      Sil
    3. Yavaşlamasına yardımcı olur tabi ki..Slayt eklentisinin bir çok yolu var. Güzel ve kullanışlı görünen çoğu eklenti yavaşlatıyor zaten.

      Sil
  4. Hocam herşeyi denedim ama olmadı yani problem bendemi koddamı anlamadım ama mutlaka eklemem lazım bu eklentiyi

    YanıtlaSil
    Yanıtlar
    1. Kod çalışıyor tabi ki..3 yere de eklenecek kodları doğru olarak uyguladıysanız çalışması lazım. Belki temadan kaynaklı olmayabilir.

      Sil

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.

Seo ve Blog ipuçlarını alarak daha fazla ziyaretçi ve en yüksek verimi hedefleyin.