Web Günlüğü

18.09.2013

Blogger Birden Fazla Yazi Icin Toplu Etiket Ekleme Veya Kaldirma

Blogger'ın çok fazla göremediğimiz bir çok özellikleri mevcut. Bunlardan bir tanesi de birden fazla yazı için toplu etiket ekleme veya kaldırma özelliği. Bu özellik aslında bundan tam 2 yıl önce yani Blogger'ın yeni Kumanda Paneli tasarımına geçtiği günden beri bulunmakta. Ancak haberdar olmayanlar ve nasıl kullanıldığı ile ilgili fikir sahibi olmayanlar vardır diye hatırlatmada bulunmak istedim.

Yazı hazırlarken benim gibi etiket eklemeyi unutanlar veya fazla etiketlerden kurtulmak isteyenler için ideal bir özellik.

Blogger Birden Fazla Yazıya Toplu Etiket Ekleme

Resim yanıltıcı gelmesin ben kolaylık açısından Yeni Etiket ekleme özelliği ile toplu etiket eklemeyi göstermek istedim. Eğer daha önce kullanmış olduğunuz bir etiket varsa ve onu kullanmak istiyorsanız açılır kutudan onu seçip de ekleyebilirsiniz.



Blogger Birden Fazla Yazıdan Toplu Etiket Kaldırma

Birden fazla yazıdan hızlı bir şekilde toplu etiket kaldırmak için ise aynı etikete sahip ve etiketi kaldırılmak istenen yazılar sol tarafta bulunan işaret kutucuklarından seçim yapılıp daha sonra üstte bulunan etiket butonu tıklanılarak açılan listeden etiket kaldırılabiliyor. Uzun bir cümle oldu ama zaten okumaya üşenenler için resimler mevcut.

10.07.2013

Blogger etiket sayfasındaki yazı sayısı nasıl ayarlanır

Blogger'da etiketlere tıklanıldığında veya etiket-kategori sayfalarına girildiğinde temalardan kaynaklanan sebeplerden dolayı çok fazla sayıda yazı listelenmekte. Bu sorunu küçük bir kod parçasıyla çözmek mümkün. Ayrıca bu kod ile sadece etiketler-kategoriler bileşeninde yer alan etiketlere ait yazı adetlerini ayarlamanın dışında diğer sayfalarda bulunan veya yazı bilgisi kısmında bulunan etiketlere uygulamakta mümkün.


Blogger etiket-kategori sayfalarında gösterilecek yazı sayısını belirlemek veya ayarlamak için şablon editöründe alttaki kod veya kodlar bulunarak;

data:label.url

Aşağıdaki kod ile değiştirilmesi yeterlidir.

data:label.url + "?max-results=5"

Etiket-kategori bağlantıları bu şekilde düzenlendiğinde bağlantılar;
http://www.zaferzent.com/search/label/Blogger?max-results=5 bu şekilde düzenlenmiş olacak ve sayfalarda 5'er adet yazı listelenecektir. 5 sayısı isteğe göre değiştirilebilir.

07.07.2013

Blogger etiketleri nasıl iki sütun halinde gösterilir

Daha önceki kullandığım bazı blogger temalarının yapısı gereği kategorileri(etiketleri) iki sütun halinde gösteremiyordum. Şu an kullandığım temada bir sorun olmadığı için kategorileri çift sütun halinde göstermeyi tercih ettim bu sayede hem daha güzel bir görüntü sağladım hem de kategoriler widgeti (bileşeni) daha az alan kaplamış oldu.


Blogger için wordpress tarzı, kategorileri yan yana iki sütun halinde göstermek için kısa bir css kodu yardımı ile yapılan kolay ve hızlı bir işlem.

Blogger Kategorileri (Etiketleri) Yan Yana, İki Sütun Halinde Göstermek İçin Gerekli Css Kodu

#Label1 ul li{
width: 50%;
float: left; 
}

Genişlik ayarı temanıza göre değişebilmekte eğer %50 yaptığınız takdirde kategoriler yan yana listelenmiyorsa bu ayarı düşürebilirsiniz (49%, 45% gibi).

Ayrıca benim kullandığım gibi kategori bağlantılarının sol tarafına ikon koymak istiyorsanız alttaki kodları kullanabilirsiniz.

#Label1 ul li {background:url("ikon-bağlantısı") 0px 8px no-repeat;}
#Label1 ul li a{padding-left:10px}

Yine burada bulunanan 0px soldan boşluğu 8px ise yükseklik ayarı yapmayı sağlamakta. 0px li elementlerinin yerleşiminde sorun oluştuğu için ben direkt olarak a etiketine yani bağlantılara soldan 10px boşluk vererek çözdüm.

24.06.2013

Blogger Twitter Cards Ayarları

Blogger veya blogspot bloglar için Twitter Cards ayarlarına-yapılandırmasına geçmeden önce öncelikle Twitter Cards nedir, ne işe yarar onun hakkında kısa bir bilgi edinelim. Twitter Cards Twitter geliştiricileri tarafından özellikle blog/site sahipleri için geliştirilmiş gelişmiş bir içerik paylaşma özelliği. Twitter Cards sayesinde Twitter'da paylaşılan bir bağlantının (linkin) o bağlantıya ait sayfa içeriğinde bulunan yazı başlığını yazının bir kısmını ve yazı içerisinde bulunan görseli otomatik olarak Twitter'da özet şeklinde paylaşmaya olanak sağlıyor.

Twitter'ın bu yeni özelliği Facebook ve Google+'tan da hatırlayacağımız gibi ileti alanında paylaştığımız herhangi bir linke ait sayfa içeriğinin özeti otomatik olarak paylaşılıyordu. Twitter her ne kadar bu konuda biraz geç kalmış olsa da yine de yolun sonu değil.

Twitter Cards özelliğini kullanabilmek biraz mazeretli ve zaman alan iş açıkçası. Twitter Cards özelliğini kullanabilmek için yapılacak olan işlemler sırasıyla aşağıdaki kodları  /head tagından önce yerleştirmek ve kendi blogunuza ve twitter hesabınıza göre özelleştirmek daha sonra ise Twitter üzerinden onaylama işlemi yapmak.

Blogger Twitter Cards Yapılandırması

1.Aşama
Aşağıdaki kodlar </head> kodundan önce eklemeli ve @zfrznt yazan yerleri kendi twitter kullanıcı isminizle değiştirmelisiniz. Ayrıca İlk sırada yer alan summary_large_image kart tipini belirtiyor. dev.twitter.com/cards/types adresinden de canlı olarak görebileceğiniz gibi bloglar için 2 farklı kart tipi bulunmakta summary küçük resimli olan benim daha çok hoşuma giden tip olan summary_large_image ise büyük resimli olan kart tipi.

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@zfrznt' name='twitter:creator'/>
<meta content='@zfrznt' name='twitter:site'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
  <meta content='http://www.zaferzent.com/favicon.ico' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.Url' name='twitter:url'/>

2.Aşama
Aslında ikinci aşama yok en azından bana olmadığını görmüş oldum :) Sadece ayarlar yapıldıktan sonra twitter cards'ın çalışıp çalışmadığını test etmek için cards-dev.twitter.com/validator adresine bir test mekanizması kurulmuş. Farklı bir blogda deneme fırsatım olmadı ama ilk defa yapacaklar için de aynı sistem var mı bilmiyorum deneyip görebilirsiniz.


Bu yazı 25.10.2015 saat 03.15 sularında güncellenmiştir.

24.06.2013

Blogger Seo Dostu Breadcrumb (Konum) Navigasyon Eklentisi

Eğer blogger alt yapılı, iyi bir içeriğe sahip ve iyi bir tasarıma sahip blogunuz varsa ancak blogunuz seo konusunda yeterli alt yapıya sahip değilse(arama sonuçları'ndan yeterli başarılı sonuçlar alamıyorsanız) ve blogunuzu seo'ya (arama motoru optimizasyonu'na) uygun kriterlerle donatmak istiyorsanız yapılacak işlerin ilklerinden bir tanesi de blogger breadrumb eklentisi'ni kullanmak olacaktır.

Nedir, Faydaları Nedir Bu Breadcrumb(Navigasyon)'un ?

Google'ın (diğer arama motorları da dahil) arama kriterlerinden bir tanesi farklı başlık ve farklı bağlantı isteğidir. Yani kısaca özetlemek gerekirse blogunuza eklenen bir yazının başlığının google veya diğer arama motorları(botlar) tarafından daha çabuk farkedilip daha çabuk indexlenmesini sağlamak ve arama motorları tarafından içeriklerin önemli hale getirilmesini sağlamak için farklı başlık ve bağlantılara ihtiyaç vardır (Ne kadar farklı başlık o kadar etkili sonuçlar).

Örnek olarak şu an bu yazımda kullandığım başlık gösterilebilir. Eğer ben başlığı sadece blogger breadcrumb eklentisi olarak belirleseydim arama motorları tarafından çok fazla önemsenmez ve gerekli ilgili görmezdim. Ayrıca kullanıcıların arama kriterlerini sınırlandırıp onlar tarafından da ulaşılamaz hale gelirdim. Tabi ben bu kadar uzun bir başlık belirledim diye siz de uzun başlıklar belirtmek zorunda değilsiniz. Önceki cümlelerde de belirttiğim gibi başlığın uzun veya kısalığından daha çok arama motorları tarafından farklılığı daha önemlidir. Bu, yani farklı başlığın öneminin temel sebebi ise arama motoru kullanıcılarının aramayı farklı türlerde yapmasından kaynaklanmaktadır. Çünkü kullanıcı sadece bir veya iki kelimeden oluşan arama kriterleri uygulamaz. Kullanıcının arama kriterleri bu başlık üzerinden örneğe gidecek olursak blogger navigasyon eklentisi, blogger breadcrumb eklentisi, blogger seo dostu navigasyon eklentisi gibisinden veya daha farklı olarak anahtar kelime veya kelimelerden oluşabilir.

Başlık ve bağlantı birbiriyle özdeş(ilgili) ve faydası da benzerdir(kalıcı bağlantılar seo'ya uygun hazırlanmış ise). Ayrıca biraz başlığın seo'ya etkisi hakkında kısa bilgiler vermiş de oldum. Daha önce başlıkların farklılıklarından bahsetmiştim bu breadcrumb'un fayda sağlamasının sebebi de başlıkta olduğu gibi breadcrumb sayesinde(arama sonuçlarına göre) bağlantılarından farklılık arz etmesindendir. Blogunuzu arama motorları tarafından bir nebze önemli hale getirilmesini sağlamak için breadcrumb şarttır da denilebilir. Breadcrumb sayesinde blog yazıları'nın bağlantıları farklılaştırılarak(alttaki resimde görüldüğü gibi) daha doğrusu blog yazılarının bağlantılarının arama motorlarında süslendirilerek etkili sonuçlar alabiliriz.

Breadcrumb Kullanmadan Önce

Ben breadcrumb'u yeni kullanmaya başladığım için sonuçlar şimdilik böyle umuyorum ki ileri ki zamanlar da bu durum değişecektir.

Breadcrumb Kullandıktan Sonra (Güncelleme 28 Ocak 2013)

Breadcrumb kullanmaya başladıktan sonra blogumun google arama sonuçlarındaki görünümü aşağıdaki şekilde değişti. Ancak blogumdaki içeriklerin tamamının indexlenme şekli henüz değişmedi, sadece bir kısım içerikler böyle görünmekte. Dediğim breadcrumb eklentisi uyguladıktan sonra arama sonuçlarındaki görünümün değişmesi uzun zaman almakta. Eğer çok fazla içeriğe sahipseniz bu süre daha fazla olacaktır.

Blogger Breadcrumb Kurulumu Nasıl Yapılır ?

Öncelikle belirtmeden geçemeyeceğim bu eklentinin kurulumu yapılınca hemen etkili sonuçlar alınamayabilir. Yani yazıların, kategorilerin veya diğer içeriklerin google ve diğer arama motorları sonuçlarında breadcrumb tarzı sonuçlar çıkması için kurulumu yapıldıktan sonra biraz zaman geçmesi gerekmektedir.

1.Aşama Css Kodları

Css kodlarının nereye ve nasıl bir şekilde ekleneceği biliniyordur ancak ben yine de belirtmiş olayım </b:skin> kodu aratılıp öncesine eklenmelidir.

.breadcrumbs{background-color:#fff; 
border-radius:5px;  
-webkit-border-radius:5px;  
-moz-border-radius:5px;  
border:1px solid #ddd; margin-top:5px; padding:10px; border-bottom:2px solid #ddd;
text-align:left;
font-size:11px}

2.Aşama

Alttaki uzunca kod <b:includable id='main' var='top'> öncesine eklenmelidir ancak bu kodun altında <div class='blog-posts hfeed'> olması gerekmektedir. Ayrıca Web Günlüğü yazan yerler kendinize ait blog başlığı ile değiştirilmelidir.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'><data:blog.title/></a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187; <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187;Kategorisiz
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; <data:blog.pageName/> Arşivi
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; Tüm Yazılar
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

3.Aşama

İkinci aşamayı başarılı şekilde tamamladıktan sonra <div class='blog-posts hfeed'> kod aratılıp altına veya bu <b:include data='top' name='status-message'/> kod aratılıp üstüne alttaki kod eklenmelidir.

<b:include data='posts' name='breadcrumb'/>

Bu işlemler hatasız şekilde sonuçlandırıldıktan sonra yazı veya etiket sayfalarına girildiğinde eklentinin blog içerisinde çalıştığı görülecektir. Arama motoru sonuçlarında gözükmesi için ise biraz zaman alacaktır.

Seo Konusu İle İlgili Diğer Yazılarıma Da Göz Atabilirsiniz:

Arama Motoru Optimizasyonu (SEO)
Blogger Yeni SEO (Arama Motoru Optimizasyonu) Ayarları