Web Günlüğü

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.

Blogger Twitter Cards Ayarları

Blogger/Blogspot Bloglar İçin Twitter Cards Kurulumu, Ayarları, Yapılandırması
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.

Blogger Seo Dostu Breadcrumb (Konum) Navigasyon Eklentisi

Blogger Seo Dostu Breadcrumb (Konum) Navigasyon Eklentisi ve Faydaları
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. Blogger Breadcrumb Eklentisi Kullanmadan Önce

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.
Breadcrumb Eklentisinden Sonra Google Arama Sonuçları

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ı

Blogger'a iletişim formu nasıl eklenir

Blogger'a İletişmi 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.
blogger iletişmi formu widget
İ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>

Blogger Android Uygulaması

Blogger v2.0 Android Uygulaması
Google'ın yıllar önce çıkarttığı blogger android uygulaması'nı nihayet kullanabilme fırsatı buldum. Nihayet diyorum çünkü ilk sürümünün çıktığı zamandan beri blogger uygulaması Android Market'te veya yeni adıyla Google Play'de Türkiye'den erişime kapalıydı yani indirilemiyordu. Tabi ben uzun zaman önce uygulamanın eski bir sürümünü başka bir kaynaktan apk dosyasını indirip kurmuştum ancak kısa bir süre görme fırsatım olmuştu.


Bugün uygulamanın halen Türkiye'den engelli mi olduğunu öğrenmek için bir bakayım dedim. Bilgisayar üzerinden Google'da blogger android diye arama yapıp Google Play'e eriştiğimde uygulama görselinin yanında yükleme butonun aktif olduğunu gördüm ve hemen bilgisayar üzerinden Yükle butonuna tıklayıp telefonuma kurulumunu yaptım. Ancak şöyle bir durum var ki telefon üzerinden Google Play uygulamasına veya bilgisayar üzerinden direkt olarak Google Play'e erişildiğinde ve blogger diye arama yapıldığında Google 'ın resmi blogger uygulaması sonuçlarda çıkmıyor diğer üçüncü parti blogger uygulamaları listeleniyor. Blogger uygulamasına ulaşmak için tek yapılması gereken google'ı açıp blogger android diye arama yapmak veya buraya tıklamak. Uygulamanın Google Play'de arama yapılarak bulunamaması sorunu acaba Google Play'den kaynaklanan bir sorun mu yoksa uygulama halen erişime kapalı ve ben yanlışlıkla mı indirdim anlayamadım.

Uygulama genel olarak basit ve kullanışlı olsa da halen bir çok eksiği bulunmakta. Blogger'ın ücretsiz bir hizmet olması ve herhangi bir getirisinin olmaması dolayısıyla Google tarafından pekte önemsenmiyor. Öyle ki uygulamanın en son güncellemesinin üzerinden yarım yıl geçmiş. (Son Güncellenme Tarihi 14 Kasım 2012)

Blogger'ın android uygulamasının genel özellikleri yazı gönderme (yazıya fotoğraf ve etiket ekleyebilme), yazı düzenleme ve silme, blog'u ve oluşturulan yazıları canlı olarak ön izleyebilme, yazıları sosyal ağlarda paylaşabilme gibi standart özellikler mevcut. Çok fonksiyonel bir uygulama olmamasına rağmen işi sadece yazı yazmak olanlar için ideal. Uygulamayı rahat kullanabilmek ve pratik bir şekilde yazı hazırlayabilmek için büyük boyutlarda telefona sahip olunması gerekiyor ki 4.0 inçlik ekran boyutuna sahip Motorola Motoluxe modeli telefonumda bile yazı yazarken zorluk çektim ve devamını bilgisayar üzerinden yazmak zorunda kaldım.

Uygulamanın benim gördüğüm en büyük eksikliklerinden bir tanesi yorum yönetiminin olmaması oldu. Ayrıca diğer eksik olarak gördüğüm özellikler ise sayfalar, genel ayarlar, yazılarda kalıcı bağlantıları düzenleyememe yazıları programlayamama (tarih atayıp ileri bir tarihte yayınlayamama), istatistikler ve adsense gibi önemli gördüğüm yerler ilerleyen zamanlarda eklenir mi belirsiz ama en azından yorum yönetimi bir an önce eklenirse iyi olur ki zaten uygulamanın en fazla kolaylık sağlayacağı ve faydalı olacağı özelliği yorum yönetimi olur.

Google Play Uygulama Adresi : Blogger v2.0 Android Uygulaması

Blogger Android Uygulaması'nın Telefonumdan Aldığım Görseller :

Blogger Giriş Ekranı Blogger Ana İşlemler Menüsü
Blogger Yazı Oluşturma ve Yayınlama Blogger Yazılar
Güncelleme 2 Aralık 2013, Pazartesi
Uygulamayı mağazadan indiremeyenler alttaki linkten blogger android uygulamasının son sürümü 2.1.1 apk dosyasını indirip kullanabilirler.
Blogger Android Uygulaması Apk Dosyası İndir

Güncelleme 20 Ekim 2019 Pazar
Blogger'ın Android uygulaması uzun bir aradan sonra 14 Ekim itibariyle 3.0.1 sürümüne güncellenmiş. Güncelleme ile birlikte uygulama tasarımı tamamen değişmiş durumda. Fakat bunun dışında hiçbir geliştirme ve ekleme yok. Uygulamada sadece yayın oluşturup düzenlemenin dışında Yorumlar, İstatistik, Ayarlar vb gibi sayfalar halen bulunmamakta. Uygulama Google Play'den direkt olarak indirilebiliyor.

Yeni uygulamaya ait görseller :