Blogger Etiket Bazlı Son Yazılar Widgeti - Blogger Arşivim - Blogger, Blogspot, Blogger Template, Blogger Widget

Blogger Etiket Bazlı Son Yazılar Widgeti

1. Blogger Kontrol Panelinizdeyken sırasıyla " Tema » HTML'yi düzenle " tıklayın.
2.  CTRL+F tuş kombinasyonu'nu kullanarak sayfada " </head> " aratın ve bu kodun bir kaç satır altına aşağıda verilen kodu ekleyin.;

<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:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.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. Şimdi bu kodu bulalım;
]]></b:skin>
4. Bulduğunuz bu kodun üst satırına aşağıda ki kodu kopyalayıp yapıştırın.
/* 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;}
5. Tekrar Blogger Kontrol Paneliniz'deyken Yerleşim Sekmesinden Gadget ekle>> HTML/JavaScript Ekle Gadget'ını ekliyoruz.
<script>
var arlina_thumbs = 72;
var arlina_title = true;
</script>

<script src="/feeds/posts/summary/-/BLOGGER?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>
6. En iyi sonucu alabilmek için Yeşil ile işaretlenmiş kodları kendinize göre düzenleyin.Yapılacak işlemlerin sonuna geldik. Şablonunuzu kaydedip kontrol edin.

Hiç yorum yok:

blogger (116) blogspot (19) ders (13) dersler (5) eklenti (30) free (1) gadget (2) hatasivecozumu (2) nedir (1) popular (20) popularposts (21) recent (1) recentposts (6) seo (2) sonsuz (1) SoraTech (1) tema (35) Teması (1) template (35) templates (1) theme (1) widget (50) yapimi (1)