Etikete Bağlı Son Yayınlar Galerisi Yapımı

Ağustos 19, 2015
Etikete Bağlı Son Yazılar Galerisi Yapımı

Blogger Etikete Bağlı Son Yazılar Galerisi Yapımı. Daha önce blogger son yazılar eklentisini slider şeklinde vitrin olarak nasıl yapabileceğinizi şuradaki yazımda anlatmıştım. Şimdi sizlerle yine bloger için son yayınlar eklentisini paylaşacağım ama bunda biraz daha fark var:
1. Etikete göre son yazıları gösterir
2. Son yazıları galeri şeklinde gösterir.
Bu sayede blogunuz sidbarına rahatlıkla eklersiniz ve blogunuza şıklık ve kolaylık katarsınız.

Mesela yayınlarınız arasında "blogger" etiketine sahip yazılar var işte bunların son 9 tanesini veya sizin belirleyeceğniz adetini gösteren bir galeri yapacağız.

Blogger etikete bağlı son yayınları kutucuklar içerisinde satır ve sütunlara bölerek göstermek isterseniz buyurun anlatıyorum.


Blogger etikete bağlı son yazılar galerisi nasıl yapılır?

1. Blogger
2. Şablon
3. HTML'yi Düzenle
4. CTRL+F tuşlarına basarak </head> kodunu bulun ve hemen alt satırına aşağıdaki kodları yapıştırın.


<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>

5. Şimdi ]]></b:skin> kodunu bulun ve üst satırına aşağıdaki kodları 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;}

6. Şablonu kaydedin.
7. Şimdi Yerleşim-Gadget Ekle HTML/JawaScript yolunu takip ederek aşağıdaki kodları yapıştırın ve kaydedin.


<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>


BLOGGER etiketi yerine göstermek istediğiniz kendi etiketinizi yazın. 9 sayısı gösterilecek yazıyı belirler. 

Blogger bloglar için etikete bağlı son yayınları galeri şeklinde sidebarda göstermek için yapılması gerekenler bu kadar. Daha fazla blogger eklentisi ve blogger ipuçlarına ulaşmak için bloğumu izle ve yorumlarla katkıda bulun. İyi bloglamalar ;)

Kaynak: http://blogbakkali.blogspot.com.tr/2015/08/blogger-etikete-bagli-son-yayinlar-galerisi-yapimi.html

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

4 Yorum
avatar

Etiketi giriyorsun ve o etikete ait yazılar galeri şeklinde kutucuklada görünüyor bu çok güzel bir eklenti teşekkürler

Yanıtla
avatar

Çok teşekkür ederim ya. Blog film sitem için arıyordum böyle bir şey. Ne forumlar ne blogcular yarımcı oldu. Artık bloguunzun sıkı takipçisiyim. Birde bu resimlerin koyutlarını nereden ayarlıyoruz?

Yanıtla
avatar

Ben teşekkür ederim takip ettiğiniz için :) Yalnız resimlerin boyutlarıyla oynayamıyoruz. Bozuluyor.

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔