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

11.6.17
Blogger Slayt Tasarımlı Son Yayınlananlar Widget'i

Blogger Slayt Tasarımlı Son Yayınlananlar Widget'i - Bu yazımızda blog sitelerinin sidebar (kenar çubuğu)'da Slayt Tasarımlı Son Yayınlananlar Widget'i oluşturma ile ilgili ipuçları paylaşacağım. Slider Son Yayınlananlar Widget'i, otomatik olarak çalışan, yayın resimleri ve slayt efektlerle son yayınları bir liste halinde slayt sunumunu yapar. Oldukça ilgi çekici olan widget'in diğer bir özelliği de etiket duyarlı olmasıdır. Blog sitenize bulunan etiketlere ait yayınları görüntülemek için düzenleyebilirsiniz.

Bknz: Son Yayınlananlar Mesajı Navigasyonu

Widget boyutları sidebar'a uygun olarak ayarlanmış durumda, uygun olmaması durumunda CSS kodlarında düzenmeleme yapabilirsiniz. Widget'i eklemek için aşağıdaki adımları takip edin.

Blog Kenar Çubuğuna (Sidebar) Yeni Yayınlar Slayt Widget'i Ekleme


1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Yerleşim > Gatget Ekle (Sidebar) yolunu takip ederek bir HTML/JavaScript oluşturun. Aşağıdaki kodları kopyalayarak HTML/JavaScript içerisine ekleyin ve kaydedin.

<style scoped="" type="text/css">
ul.rcnslider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcnslider{font-size:11px}
ul.rcnslider,ul.rcnslider li{margin:0;padding:0;list-style:none;position:relative}
ul.rcnslider{width:100%;height:500px}
ul.rcnslider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcnslider li:nth-child(1),ul.rcnslider li:nth-child(2),ul.rcnslider li:nth-child(3),ul.rcnslider li:nth-child(4){display:block}
ul.rcnslider img{border:0;width:100%;height:auto}
ul.rcnslider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcnslider li:nth-child(2){left:0;top:50%}
ul.rcnslider li:nth-child(3){left:50.5%;top:50%}
ul.rcnslider li:nth-child(4){width:100%;left:0;top:75%}
ul.rcnslider .overlayx,ul.rcnslider li{transition:all .4s ease-in-out}
ul.rcnslider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;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% 50%;background-repeat:repeat-x}
ul.rcnslider .overlayx,ul.rcnslider img{margin:3px}
ul.rcnslider li:nth-child(1).overlayx{background-position:50% 25%}
ul.rcnslider .overlayx:hover{opacity:.1}
ul.rcnslider h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}
ul.rcnslider li:hover h4{bottom:30px}
ul.rcnslider li:nth-child(1)h4,ul.rcnslider li:nth-child(4)h4{font-size:150%}
ul.rcnslider .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}
ul.rcnslider li:hover .label_text{bottom:20px;opacity:1}
ul.rcnslider li:nth-child(2).autname,ul.rcnslider li:nth-child(3).autname{display:none}
.rcnslider-btn{margin:5px 0 0}
.rcnslider-btn a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.rcnslider-btn a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #444 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.rcnslider-btn a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="rcnsliderpost"></div>
<script type='text/javascript'>
function rcnsliderpost(a){(function(e){var h={blogURL:"",MaxPost:8,idcontaint:"",ImageSize:100,interval:5000,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 d=h.MaxPost*200;g.html('<div class="slidercn"><ul class="rcnslider"></ul></div><div class="rcnslider-btn"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');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+'"/><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).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .slidercn li:first").before(e(h.idcontaint+" .slidercn li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .slidercn li:last").after(e(h.idcontaint+" .slidercn li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .slidercn li:first").before(e(h.idcontaint+" .slidercn li:last"));e(h.idcontaint+" .slidercn").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
rcnsliderpost({
  blogURL: "http://saglikveguzellikonerileri.blogspot.com",
  MaxPost: 8,
  idcontaint: "#rcnsliderpost",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>


2- Widget ayarları

blogURL: http://bloggereklentileri.blogspot.com yerine kendi blog URL'nizi ekleyin.
MaxPost: Widget'te kaç adet yayının tekrarlanarak gösterileceğini belirler.
interval: Zaman olarak slayt hareketliliğini belirler. Yani ister hızlı olmasını ister yavaş olmasını belirleyebilirsiniz.
autoplay:ture: Otomatik kaydırma çubuklarının sağ ve sola hareket ettirilmesini sağlıyor.
tagName: Gerçek zamanlı yeni içeriklerin widget içerisinde gösterilmesini sağlıyor. Yukarıda da açıkladığımız gibi widget'i etiket duyarlı olarak da kullanabilirsiniz. Etiket duyarlı kullanmak için, örneğin tagName: "Blogger Temaları" gibi blogunuzda bulunan etiketleri ekleyerek kullanabilirsiniz.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

7 yorum

süper süper

Cevap

Hocam bunun rastgele yazılar şeklinde yani randompost olanı olursa veya benzer yazılar çünkü bloglara bant şeklinde olanı ekledik sabırsızlıkla beklemekteyiz

https://denkgelirse.blogspot.com.tr/

Cevap

çok teşekkürler işime yaradı http://www.klobis.cf/

Cevap

Hocam neden siz sitenize eklemiyorsunuz bu eklentiyi? Sitenizde bir sürü güzel eklenti ve tma var ama siteniz çok basit ve sade? Böyle olması daha mı iyi. Aklıma taklıdı. Bende sizin sitenin temasını kendi siteme yapmayı düşünüyorum bu yüzden.

Cevap

Ben sitede bulunan tüm eklentileri blogunuza ekleyin demedim. İhtiyaca göre kullanılmasını zaten belirtiyorum. Evet blog sitem sade, sence yetersiz mi? Gereksiz hiç birşeye gerek yok.

Cevap

Sade olması SEO açısından veya buna benzer teknik durumlar için yarar sağlıyor mu? Bunu sormaya çalışıyorum. Yanlış anlamayın lütfen.

Cevap

Tabiki blog siteniz ne kadar sade ve anlaşılır olursa o kadar avantaj. Hem bloğunuz hızlı çalışır hem de Google sıralamasında daha iyi seviyelere ulaşırsınız.

Cevap