Blogger Etikete Göre Son Yazı Eklentisi

Blogger sistemini her geçen gün daha çok sevmeye başlamadım desem yalan olmaz. Üstelik birçok ortak konudada çözümler belli.

Mesela bu kez blogger kullanılan sitelerde , sidebar da etikete göre resimli yazıları getireceğiz. Getireceğimiz etiketin ismide ERGEZER olsun. Yani yazılarımda ERGEZER etiketi kullandıklarımı sayfanın yan tarafında listeleyeceğim.

1- Blogger > Şablon > HTML'yi Düzenle
2-  CTRL yaparak açılan kutucukta </head>  kodunu bulalım ve hemen alt satırına aşağıdaki kodu yapıştıralım.

<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"https://lh3.googleusercontent.com/-Ao2l6EV66qE/WGOYH34-fmI/AAAAAAAAAsw/8wH5lo27y9wQJBIQLRF1MrG-Ozpx067EACLcB/h120/no%2Bfoto.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="ad-item">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>


3- CTRL yaparak açılan kutucukta ]]></b:skin>  kodunu bulalım ve hemen üst satırına aşağıdaki kodu yapıştıralım ve şablonu kaydedelim.

/* CSS son yazılar galerisi */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .ad-item{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .ad-item a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .ad-item .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .ad-item:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}

4- Son olarak Yerleşim > Gadget Ekle > HTML / Javascript ekleyelim ve aşağıdaki kodu yapıştıralım. Etiket olarak kırmızı alanda belirtilen ERGEZER kısmını kendi sitenize göre düzenleyin. Aşağıdaki kodda gördüğünüz Result=6 kısmında ise 6 adet yazı getireceğini belirtiyoruz. Buradaki sayıyı siz değiştirebilirsiniz.

<script>
var arlina_thumbs = 72; 
var arlina_title = true; 
</script>

<script src="/feeds/posts/summary/-/ERGEZER?max-results=6&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

Sitenin yan tarafında veya aşağıdaki resimdeki gibi bir sonuç almanız gerekiyor. Eğer alamadıysanız bir yerlerde hata yaptınız demektir. İşlem sırasını tekrar gözden geçirmenizde fayda var.





Blogger Etikete Göre Son Yazı Eklentisi Blogger Etikete Göre Son Yazı Eklentisi Reviewed by Doğan on 13:56 Rating: 5

Hiç yorum yok:

Blogger tarafından desteklenmektedir.