Blogger Resimli Benzer Yazılar Eklentisi

Merhaba blogger severler... Benzer yazılar eklentisinin ne amaçla kullanıldığı ve ne işe yaradığı hakkındaki bilgileri Blogger Benzer Yazılar Eklentisi başlıklı makalemde anlatmıştım. O makalede paylaştığım eklentide yalnızca benzer yazıların başlıklarını sıralıyorduk. Burada vereceğim kodlarda ise hem başlık bağlantıları hemde yazılara ait resimler bir arada görüntülecek. Ayrıca eklenti içerisinde resim eklemediğiniz yazılar için otomatik tanımlanmış bir görsel de bulunuyor. Bu da kötü görüntü oluşmasını engelleyecektir.
Eklentiyi blogumda bende kullanıyorum. Önizleme için bu yazının en alt kısmına bakabilirsiniz. Ben direk anlatıma geçiyorum.

Resimli benzer yazılar eklentisi nasıl kurulur?

› Blogger paneline giriş yapın.
› Blogunuzu seçip sol menüden Şablon kısmına gelin.
› Açılan sayfada Ctrl+F komutu ile aşağıdaki kodu bulun.

</head>

</head> kodunun hemen üzerine aşağıdaki kodları ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px;} 
#related-posts h2{font-size: 16px; font-weight: bold; color: #5D5D5D; font-family: Verdana; margin-bottom: 15px;} 
#related-posts a{border-right: 1px dotted #DDDDDD; color:#5D5D5D;} 
#related-posts a:hover{color:black; background-color:#EDEDEF;} 
</style> 
<script type='text/javascript'> var defaultnoimage=&quot;http://4.bp.blogspot.com/-cQQoD4MoTpA/Uk1z0LXdNuI/AAAAAAAAATY/V4T2xOaRBRs/s1600/resim-yok.jpg&quot;; var maxresults=4; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Benzer Yazılar&quot;; </script> <script src='http://hitadam.googlecode.com/files/ayni.js' type='text/javascript'/></b:if> 

Şimdi tekrar Ctrl+F ile bir arama yapın ve aşağıdaki kodları bulun.

<div class='post-footer'>

Bu kodun hemen üzerine aşağıdaki kodları kopyalayıp yapıştırın ve bir önizleme yapıp hata alıp almadığınızı kontrol edin. Hata almadıysanız devam edin temanızı kaydedin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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=4&quot;' type='text/javascript'/></b:loop> 
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
</div><div style='clear:both'/>
</b:if>

Düzenlemeler

› Resim eklenmeyen yazılarda görünün önizleme resmi: http://4.bp.blogspot.com/-cQQoD4MoTpA/Uk1z0LXdNuI/AAAAAAAAATY/V4T2xOaRBRs/s1600/resim-yok.jpg
› Gösterilecek yazı adedini arttırıp azaltmak için: maxresults=5;

Hepinize iyi bloglamalar...

Bir önceki yazımız olan "Blogger Seo Dostu Breadcrumb Navigasyon Eklentisi" başlıklı makalemizde breadcrumb seo eklentisi hakkında bilgi edinebilirsiniz.

Devamı »

Blogger Seo Dostu Breadcrumb Navigasyon Eklentisi

Breadcrumb, botların ve ziyaretçilerin sayfanızda daha rahat gezinebilmesi için genelikkle yazı başlığının üst kısmında oluşturulmuş etiket linkleri ve başlıkların bulunduğu eklentinin ismidir. Türkçe karşılığı "Ekmek Kırıntısı" olan bu eklentide hiyerarşi düzeni hakim olduğundan Ana sayfa » etiket linki » başlık şeklinde görüntüleme yaparak hem botlar hem de ziyaretçiler için kaynağın ne olduğunu ve nereden geldiklerini bilmelerinde yardımcıdır.

Breadcrumb Eklentisinin Seo Açısından Faydaları

• Ziyaretçilere kategoriyi bulmalarında yardımcı olur.
• Ana sayfaya linki ile geriye dönüş kolaylaşır.
• Ziyaretçiler sitenizde daha fazla gezineceğinden blogun hemen çıkma oranı azalır.
• Botlara kategoriyi tanımlamada yardımcı olur.

Blogger Breadcrumb Eklentisi Nasıl Kurulur?

› Blogger paneline giriş yapın.
› Blogunuzu seçip sol menüden Şablon kısmına gelin
› Açılan sayfada klavyenizin Ctrl+F komutu ile aşağıdaki kodu bulun.

<b:includable id='main' var='top'>

Bu kodu aşağıdaki kodlarla değiştirin.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Anasayfa</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Anasayfa</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Anasayfa</a></span> &#187; <span>Etiketi yok</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span>Arşiv <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span>Tüm Yazılar</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Bir önizleme yapın ve hata alıp almadığınızı kontrol edin. Eğer hata vermediyse yerleşim kısmını tamamladınız demektir. Temayı kaydetmeden devam edin.

Şimdi ise aşağıdaki kodu bulun.

]]></b:skin>

Yukarıdaki kodun hemen üzerine aşağıdaki stil kodlarını ekleyin ve temanızı kaydedin.

.breadcrumbs {
font-size :13px;
font-style :italic;
border : 1px solid #d1d1d1;
border-radius : 5px;
margin-bottom :5px;
padding : 8px 6px 10px 6px;
}

Eklentiyi deneme amaçlı 5 farklı bloga ekledim ve tamamında sorunsuz çalıştı. Hem seo açısından fayda sağlaması hemde demo olması amacıyla yazıyı yazmadan hemen öncede kendim kullanmaya başladım. Arama sonuçlarında canlı olarak görmek isterseniz adres çubuğundaki linki alıp google arama kısmına yapıştırıp ararsanız bu yazıya ait breadcrumbu görebilirsiniz.
Bir sorun yaşayacak olursanız bildirmek için yorum formunu kullanabilirsiniz.

Bir önceki "Blogger Yorumlardaki Avatarları Küçülterek Sayfanızı Hızlandırın" başlıklı makalemizde sayfa hızınızı nasıl arttırabileceğiniz konusunda bilgi edinebilirsiniz.

Devamı »

Blogger Otomatik Devamını Oku Eklentisi

Bu anlatımın benzerlerine daha önce bir çok kez denk geldiğinize eminim. Hatta Hit Adam'ın önceki yayın döneminde bu konuya bende değinmiştim. Yalnız benimki de dahil anlatımların hiçbirinde resime tıklandığında yazıya gitme gibi bir özellik yoktu. Yani ya "yazının devamını oku" gibi bir bağlantı oluşturuyordunuz ya da başlığa tıklıyordunuz. Bu sefer tüm özellikleri içeren bir eklenti kuracağız.

Devamını oku eklentisi yerine < !--more-- > etiketini kullanarakta yazınızın belli kısmını gizlyebilirsiniz ancak bu kullanacağımız eklenti kadar düzenli bir görüntü yaratmayacaktır. Yani eklentimiz bütün yazıları ve yazılara ait resimler aynı ölçülerde görüntüleyecek ve her yazı için ayrı ayrı etiket girmemize gerek kalmayacak.

Eklenti Özellikleri

1. Statik sayfalarda etkili değildir bu sayede
2. Anasayfada görüntülenecek karakter sayısını ve resim boyutunu ayarlayabilirsiniz.
3. Blog anasayfasını optimize ederek sayfa hızını olumlu etkiler.
4. Anasayfada görütülenen resimlerdeki bağlantıya tıklayarak yazı sayfasına gidebilirsiniz.

Kuruluma başlamadan her ihtimale karşı temanızın yedeğini almayı unutmayın.

Devamını oku eklentisi nasıl kurulur?

Tema kodlarınız arasında aşağıdaki etiketi bulun

</head>

Hemen üzerine aşağıdaki kodları ekleyin

<script type='text/javascript'>
//<![CDATA[
  function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function masSummaryAndThumb(mas1,mas2){var div=document.getElementById(mas1);var imgtag="";var img=div.getElementsByTagName("img");var summ=250;if(img.length>=1){imgtag='<a href="'+mas2+'"><span style="float:left;margin-right:10px"><img src="'+img[0].src+'" width="220px" height="130px"/></span></a>';summ=250}var summary=imgtag+'<div class="entry">'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
//]]>
</script>

Kaydetmeden devam edin Ctrl+F ile aşağıdaki kodu bulun

<data:post.body/>

Yukarıda kodu aşağıdakilerle değiştirin ve şablonu kaydedin.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
masSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);
</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Resim boyutunu değiştirmek için 1. kod içerisindeki: width="220px" height="130px" değerlerini
Görüntülenecek karakter sayısını belirlemek için yine 1. kod içerisindeki: summ=250 (2 tane var siz 2.sini değiştirin) değerleri kullanabilirsiniz.

Hit Adam

Devamı »

Blogger Toplam Yazı ve Yorum Sayacı

Bloglamaya başladığımızdan beri ne kadar yazı yazıp ne kadar yorum aldığımızı bilmek istediğimizden, istatistikler her zaman önemli yer tutmuştur.
Blogların tepelerinde "Bu blogda 45 kategoride 55 makaleye yazılmış 65 yorum bulunmaktadır" gibi ibareler görebilirsiniz.

Bu yazıda sizlere bu istatistiği blogunuza nasıl kolayca entegre edebileceğinizi göstereceğim. Vereceğim kodlar yalnızca yazı ve yorum sayısını otomatik çekiyor ancak isterseniz yazar ve kategori sayılarını manuel olarak ekleyebilirsiniz.

Nasıl yapılır?

Blogger Kumanda Paneli ➜ Blog Adı ➜ Yerleşim kısmına gelin, Gadget Ekle deyip ➜ HTML/JavaScript 'i seçin ve aşağıdaki kodları "İçerik" kısmına ekleyip kaydedin.

<script>
function mbhTotalCount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
Toplam Yazı: <script src="http://www.hitadam.com/feeds/posts/default?alt=json-in-script&amp;callback=mbhTotalCount"></script>
Toplam Yorum: <script src="http://www.hitadam.com/feeds/comments/default?alt=json-in-script&amp;callback=mbhTotalCount"></script>

Not: Kırmızı ile işaretlediğim kısımları kendi blog adresinizle değiştirin.

Yukarıda anlattığım şekilde kodları blogunuza eklemeniz mümkün. Yine de bu yöntemin bir alternatifi olarak aşağıdaki "Add to Blogger" yazılı butona tıklayarak yine kodları eklemek istediğiniz bloga erişmeniz mümkün.

İşlemi tamamladıktan sonra blog adresini eklemeyi unutmayın.
Hepinize iyi bloglamalar...

Devamı »