Yazılarınızın Altına Resimli İlgili Yazılar ve Mail Abone Kutusu Ekleyin

Yazılarınıza renk katacak farklı bir uygulamayı size sunmak istiyorum.Önceki yazılarımdan da hatırlayacağını üzere sitenize gelen okuyucularınızın e-mail yoluyla sitenizi takip etmesini sağlayan widget blogunuza nasıl ekleyeceğimizi ve aynı zamanda yazılarınızın altında ilgili yazıları göstermenizi sağlayan ipucunu sizlerle paylaşmıştım.Şimdi ise bu ikisini farklı bir şekilde yazılarınızın altında nasıl gösterebilirsiniz onu paylaşacağım :

Blogunuzda bir değişiklik yapmadan önce şablonunuzu yedeklemekte fayda var.

Blogger sayfanızda Edit HTML kısmına gelerek şablonu genişlet kutucuğunu işaretleyin :

feedburner_ilgili yazılar

CTRL + F tuşları yardımıyla ]]></b:skin> kodunu arayın ve bu koddan hemen önce aşağıdaki kodları yapıştırın:

#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(http://lh3.ggpht.com/_pt7i0nbIOCY/SuPmf8r8eqI/AAAAAAAACXM/BYjbuwVwxas/FeedIcon-16_thumb.gif) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

Daha sonra <data:post.body/> kodunu arayın ve bu koddan hemen sonra aşağıdaki kodları yapıştırın:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage=&quot;http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/related.js’type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>                
</div>
<div class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/ehl-iblog' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://www.ehliblog.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ehl-iblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ehl-iblog'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/ehl-iblog'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/ehl-iblog?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>

Yukarıdaki renkli kısımları kendi blogunuza göre değiştirin.Şimdi şablonunuzu kaydedin.Herhangi bir yazı sayfanıza girdiğinizde değişikliği görebilirsiniz.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

9 yorum:

  1. bunun rengini ayarlayabiliyor muyuz? bir de Türkçe'ye çevirebilir miyiz?

    YanıtlaSil
  2. elbette rengini ayarlayabiliyorsunuz.1. kod blogunda color kodları var.Değiştirebilirsiniz.Aynı zamanda kırmızı renkli yazıdğım kısımlar yerine Türkçe olarak değiştirebilirsiniz.

    YanıtlaSil
  3. 2, kodu yapıştırdığımda bu yazıyı alıyorum ?

    XML, satır 1532, sütun 83 ayrıştırılırken hata oluştu: Element type "script" must be followed by either attribute specifications, ">" or "/>".

    sizin verdiğinizi de direkt yükledim dnemek için gene aynı - hani kendimkinde hatamı var diye?

    YanıtlaSil
    Yanıtlar
    1. kodu yanlış kopyalıyorsunuzdur dikkat edin.Ben denedim herhangi bir sorun bulamadım.
      birden fazla kodu olabilir dikkat edin

      Sil
  4. Benim bloğuma eklediğim resimler bloğumu google da arattığımda kesik kesik çıkıyor nasıl bir yanlış yapmış olabilirm eğer bu konuda bilginiz varsa yardımcı olabilir misiniz?
    İyi günler

    YanıtlaSil
    Yanıtlar
    1. Tam olarak naasıl bir sorun yaşadığınızı anlamadım.Resimli olarak gösterebilir misiniz?

      Sil
  5. Teşekkürler cevap için ama buraya resim nasıl eklenir?

    YanıtlaSil
    Yanıtlar
    1. resim yükleme sitelerine yükleyip adresini buraya yazabilirsiniz ya da iletişim bölümünden bana yazıp ben size mail ile döndüğümde de gönderebilirsiniz

      Sil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.