Web Günlüğü

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ı

25.05.2013

Blogger'a iletişim formu nasıl eklenir

Bu yazımda hem widget olarak hem de widget kullanmadan sadece kodlarla sabit sayfalara blogger iletişim formu nasıl eklenir ondan bahsedeceğim. Bilindiği üzere blogger'a iletişim formu widgeti gelmeden önce 3.parti uygulamalar kullanıyorduk. Fakat bunların özelleştirilmesi zor olması, blogger'dan bağımsız görünmesi bir çoğumuz için iyi bir tercih değildi. Blogger'a gelen bir güncellemeyle eklenen iletişim formu widgeti bu tip sorunlarımızı ortadan kaldırdı.

Blogger'a özgün olan bu iletişim formunun benim en çok beğendiğim özelliği mesajların Blogger'la bağlantılı olan e-posta adresimize bir nevi bir e-posta gibi geliyor oluşu. Eksik bulduğum ise Captcha özelliğinin bulunmaması.(Javascript ile eklenebilir)

Blogger iletişim formunu bloğumuza eklemek için iki yöntemimiz var birincisi Blogger > Yerleşim/Düzen sayfasından Sidebar bölümüne Gadget Ekle yöntemi ile.

İkinci yöntem ise herhangi bir sayfaya(iletişim, contact) veya bölüme aşağıdaki kodları ekleyerek kullanabiliriz. CSS özelleştirmesi isteğe bağlı olarak yapılabilir.

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}
</style>
<div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <p>İsim ve Soyisim</p><input class="contact-form-name" id="ContactForm_contact-form-name" name="name" size="30" type="text" value="" /> <p>Eposta<span style="font-weight: bolder;">*</span> </p><input class="contact-form-email" id="ContactForm_contact-form-email" name="email" size="30" type="text" value="" /> <p>Mesaj<span style="font-weight: bolder;">*</span> </p><textarea class="contact-form-email-message" cols="25" id="ContactForm_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm_contact-form-submit" type="button" value="Gönder" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <p class="contact-form-error-message" id="ContactForm_contact-form-error-message"></p><p class="contact-form-success-message" id="ContactForm_contact-form-success-message"></p></div></form> </div></div><script src="https://www.blogger.com/static/v1/widgets/609130596-widgets.js" type="text/javascript"></script> <script type="text/javascript"> window['__wavt']='AOuZoY4PUAjvdPMazQDQJXJCrDFxkBfenw:1546660985916';_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d3193402366393083298','//blogspot.com','3193402366393083298');_WidgetManager._SetDataContext([{'name':'widgets','data':[{'title':'Contact Form','type':'ContactForm','sectionId':'sidebar2','id':'ContactForm'}]}]);_WidgetManager._RegisterWidget('_ContactFormView',new _WidgetInfo('ContactForm','sidebar2',document.getElementById('ContactForm'),{'contactFormMessageSendingMsg':'Gönderiliyor...','contactFormMessageSentMsg':'Mesajınız gönderildi :) ','contactFormMessageNotSentMsg':'Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyiniz.','contactFormInvalidEmailMsg':'Geçerli bir e-posta adresi gerekli .','contactFormEmptyMessageMsg':'Mesaj alanı boş bırakılamaz .','title':'Contact Form','blogId':'3193402366393083298','contactFormNameMsg':'Name','contactFormEmailMsg':'Email','contactFormMessageMsg':'Message','contactFormSendMsg':'Send','submitUrl':'https://www.blogger.com/contact-form.do'},'displayModeFull')); </script>