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>

Ön İzleme

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.