25 Aralık 2015 Cuma

Bilmeyenler için blogger SEO teknikleri

  Hiç yorum yok

Bilmeyenler için blogger SEO teknikleri

Bu yazı blogger kullanıcılarını az da olsa SEO konusunda bilgilendirmek amacıyla yazılmıştır.

Belki bir çok blog yazarının ya da web site sahiplerinin kafasında SEO nedir? sorusu yatmaktadır. Kısaca özetlemek gerekirse SEO web sitenizin sağlık durumudur. Arama motorları ve kodlama açısından optimize edilmesidir. Bu yazımda özellikle blogger kullanıcıları için bir kaç küçük SEO tekniğinden bahsedeceğim. Böylelikle en çok yapılan hataları da en aza indirmiş olacağız.

Bilmeyenler için blogger SEO teknikleri

1. Başlık hataları

Örnek yazı başlığımız

En çok yapılan SEO Hataları olsun. Yazı başlığında olan bazı Türkçe karakterler bağlantı adresimizde gözükmeyecektir. Dolayısıyla aramalarda da çıkması zor olacaktır.


Üstteki resimde de gördüğünüz gibi otomatik bağlantı Yapılan ve hataları kelimelerindeki I harflerini görmedi. Bu sorunu ortadan kaldırmak için ya uyumlu başlıklar girmemiz ya da hemen altta bulunan Özel Kalıcı bağlantı sekmesini tıklayarak bağlantı adresimizi elle düzeltmeniz gerekmektedir.

2. Etiketler

Etiketler, yazınızın kalbi gibidir. Öncelikle yazı başlığınızı kopyalayarak etiketler kısmına yapıştırma işlemini her zaman yapın. İlk etiketiniz her zaman konu başlığınız olsun. İkinci etiketiniz ise; oluşturduğunuz kategoriler doğrultusunda ekleyebilirsiniz. Örn. (Yaşam, Sağlık, Teknoloj). Üçüncü etiketiniz ise konunuz ne ile alakalı ise konuya uygun bir etiket olmalıdır.

En fazla 5-10 kadar etiket girmek uygundur. Çok fazla ve yazınızla alakası olmayan etiketleri girmenizin size yararından çok zararı olacaktır. 

3. Açıklamalar

Açıklamalar genellikle çoğu blog yazısının umursanmayarak boş bırakılan kısmıdır. Açıklama kısmı google aramalarında bağlantınızın hemen altında görünür. Bu yüzden ilgi çekici ve konuyu açıklayıcı bir kaç satır eklemeniz ziyaretçileriniz açısından faydalı olacaktır.

Bu yazımız için örnek olarak eklediğimiz açıklamalar şu şekildedir.
Blogger Seo Teknikleri

4. Görseller için optimize 

İnternetten indirdiğiniz bir görseli blog yazınıza eklemeden önce o fotoğrafın adını mutlaka kontrol edin. Çünkü genellikle mkdas.jpg gibi anlamsız ya da uzun isimleri olduğu için bunları değiştirmeniz SEO açısından oldukça faydalıdır.

mkdas.jpg yerine,
en-cok-yapilan-seo-hatalari.jpg
blogger-seo-teknikleri.jpg

gibi isimlerle değiştirmeniz görsel aramalarda da kolayca bulunmanızı sağlayacaktır.

Bu değişiklikten sonra yazınıza eklediğinizde ikinci bir ayar daha yapmanız gerekmektedir. Fotoğrafın üzerindeyken Özellikler bağlantısına tıklayarak alt ve title etiketi eklemeniz de önemli bir SEO ayarıdır.

Örnek:


 5. Makale içinde biçimlendirme kullanımı

Makalenizi yazdıktan sonra vurgulamak istediğiniz metinler için mutlaka biçimlendirme kullanın. Altı çizili - italic - kalın - im - alt başlık ve başlık gibi. Bu işlem hem SEO açısından faydalı hem de botlar için yol göstericidir.

Temel anlamda bu maddelere dikkat ederseniz SEO ya olumlu etkileri olacaktır.

Çoklu Demo ve Download Butonları

  Hiç yorum yok
Çoklu Demo ve Download Butonları blogger download butonları

Her ne kadar blogger üzerinden film ya da illegal program paylaşımı Google yayıncılık ilkelerini ihlal etse de, kendi özgün çalışmaları ya da PSD dosyalarını paylaşanlar için işe yarar bir eklenti olan çoklu download ve demo butonları bir çok kullanıcının işini kolaylaştıracaktır.

Bu özellik aslında diğer şekillerde de kullanılabilir. Ama ben bu özelliği genellikle kod paylaşan siteler ve demo link veren kullanıcılar için paylaşacağım...


1. Blogger kumanda panelinden / şablon /HTML Düzenle / ]]></b:skin> kodunu aratarak hemen üzerine aşağıdaki kodları ekleyin.


/* Demo ve Download */
.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border-radius:3px;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;padding:0;width:100%;background-color:#20a3cb;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}
.download:hover h1{margin-left:100%;opacity:0.7;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#20a3cb;color:#fff;border-radius:2px;}
.download-info{background:#1c94b9;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.download-info h1{background-color:#20a3cb;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;width:auto;height:50px;line-height:50px;border-radius:3px;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background-color:#a3acb2;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}
.demo:hover h1{margin-left:100%;opacity:0.7;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#a3acb2;color:#fff;border-radius:2px;}
.demo-info{background:#8f979c;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.demo-info h1{background-color:#a3acb2;}

2.Temanızı kaydederek çıkın.

3.CSS kodlarımınızı ekledikten sonra butonların gözükmesi için yazılarınızın sonuna (HTML) kısmına gelerek eklemeniz yeterli olacaktır.

Her download adresi farklı olacağı için, HTML kodlarını her zaman elle yazı sonuna eklemeniz gerekir.

<div class="download download-info">
<h1> DOWNLOAD </h1>
<ul>
<li><a href="#" target="_blank"> DOWNLOAD 1</a></li>
<li><a href="#" target="_blank"> DOWNLOAD 2</a></li>
<li><a href="#" target="_blank"> DOWNLOAD 3</a></li>
<li><a href="#" target="_blank"> DOWNLOAD 4</a></li>
</ul>
</div>
<div class="demo demo-info">
<h1> DEMO </h1>
<ul>
<li><a href="#" target="_blank"> DEMO 1 </a></li>
<li><a href="#" target="_blank"> DEMO 2 </a></li>
<li><a href="#" target="_blank"> DEMO 3 </a></li>
<li><a href="#" target="_blank"> DEMO 4 </a></li>
</ul>
</div>

Demo
click to view


24 Aralık 2015 Perşembe

Wordpress tarzı renkli kategoriler widgeti

  Hiç yorum yok
Eklenti tamamen etiketlere bağlı olarak çalışmaktadır. Yani burada yapacağımız işlem sadece temamızda bulunan label başlığı için still dosyası atamak olacak. Ayrıca kodlar bazı temalar için uyumlu olmayabilir. 


Bu kodları daha önce hatırlarsanız kendi blog sayfamda paylaşmıştım. Fakat hem blogumdan bu tür yazıları kaldırmak hem de Blogduzenim sayfasını zenginleştirmek adına buraya taşımayı daha uygun buldum.
Bu eklentiyi wordpress sitelerde çok görmüşsünüzdür. Ama blogger için pek de rastlanır bir eklenti değildir. Bu yüzden fark yaratmak isteyenlerin aradığı bir eklenti de diyebiliriz.


Eklentimizin resmi şu şekildedir. 
blogger menü

Canlı örneği de zaten sayfamda mevcut. Şimdi gelelim kodlarımıza.

Öncelikle sayfanıza etiketlerinizi ekleyin. Ayarlarınızın da  şu şekilde olmasına dikkat edin. 

wordpress style blogger menu
Her etiketteki kayıt sayısını ister gösterin ister saklayın size kalmış. 

Şimdi kumanda panelinde şablon düzenle - HTML bölümüne tıklayınız. Aşağıda vermiş olduğum kodları kopyalayıp /head ın hemen üstüne yapıştırın. Hepsi bu kadar. Biraz daha farklılık isteyen arkadaşlar renk kodlarıyla oynayıp tek renk ya da daha farklı renkler de kullanabilir. 



<style type='text/css'>


/* Silversword */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:0;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;transition:all .3s}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:&quot;&quot;;position:absolute;width:2px;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{background:#45a2db;position:relative;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:all .3s}
#sidebar-wrapper .label-size a{display:inline-block;color:#fff;padding:4px 6px;font-weight:400;transition:all .3s}
#sidebar-wrapper .label-count{display:inline-block;background:#3a91c7;color:#fff;padding:5px 8px;text-align:center;transition:all .3s}
#sidebar-wrapper .label-size a:hover{color:#fff;text-decoration:underline}
#footer-wrapper .label-size{background:#2e2e2e;color:#eee;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:initial;}
#footer-wrapper .label-size a{display:inline-block;color:#eee;padding:4px 6px;font-weight:400;transition:all .3s}
#footer-wrapper .label-size a:hover {color:#fff;text-decoration:underline}
#footer-wrapper .label-count{white-space:nowrap;background:#2e2e2e;display:inline-block;color:#eee;padding:5px 8px;text-align:center}
#footer-wrapper .Label li{padding:5px 0;margin:0;text-align:left;border-bottom:1px solid #444;transition:all .3s}
#footer-wrapper .Label li a {color:#eee;transition:all .3s;}
#footer-wrapper .Label li span{background:#2e2e2e;float:right;color:#eee;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;transition:all .3s;}
#footer-wrapper .Label li a:hover,#footer-wrapper .Label li:hover,#footer-wrapper .Label li span:hover {color:#fff;text-decoration:underline}
</style>

Kodlar bazı temalarda çalışmayabilir lütfen bunu göz önünde bulundurun

İlk kez 1 delinin günlükleri sayfasında paylaşılmıştır!


23 Aralık 2015 Çarşamba

Makale uzunluğuna göre zaman sayacı

  Hiç yorum yok
Makale uzunluğunun ne kadar zamanda okunulabilir olduğunu gösterir.

Söz verdiğim gibi, her yerde olmayan ve farklı eklentileri paylaşıyorum. Çünkü uzun zamandır blogger kullanmama rağmen ilk defa böyle bir eklentiye denk geldim. Eklenti ArlinaDesign sitesinden alınmadır arkadaşlar. Ben sadece kurcalayıp ne işe yaradığını çözüyorum o kadar.
Makale uzunluğuna göre zaman sayacı blogger

Bu eklenti her makale için bir zaman sayacı oluşturuyor. Örneğin çok çok uzun bir makale ise okuyucuyu 4 dk ya da 5 dk şeklinde bilgilendiriyor.

Ya da çok kısa yazılar için (Bir dakikadan az) şeklinde bir bilgilendirme yer alıyor. Çünkü herkesin zamanı kıymetli herkes hemen okuyup geçeyim derdinde. Kodu tabiki kendi sayfamda uyguladım. Eğer hemen demoyu görmek isterseniz en alttaki demo adresinden bakabilirsiniz. Çok uzun ya da çok kısa bir makaleye girdiğinizde zaman sayacının değiştiğini fark edeceksiniz.

Kullanmak isteyenler için işte kodlar.


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


<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Bu kodu eğer daha önceden eklediyseniz bu adımı atlayın.


1. Blogger kumanda panelinden > Şablonu düzenle ve HTML Düzenle diyerek > aşağıdaki kodları ]]></b:skin> ya da </style> kodunun hemen üzerine yapıştırın.


span.right {float:right;display:inline-block;padding:10px 5px;}


2. Daha sonra </body> kodunun hemen üzerine aşağıdaki kodları ekleyin.


<script type='text/javascript'>
//<![CDATA[
// Reading Time Author: Michael Lynch http://michaelynch.com Licensed under the MIT license
!function(e){e.fn.readingTime=function(n){var t={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:!0,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null,success:function(){},error:function(){}},i=this,r=e(this);i.settings=e.extend({},t,n);var a=i.settings;if(!this.length)return a.error.call(this),this;if("it"==a.lang)var s=a.lessThanAMinuteString||"Meno di un minuto",l="min";else if("fr"==a.lang)var s=a.lessThanAMinuteString||"Moins d'une minute",l="min";else if("de"==a.lang)var s=a.lessThanAMinuteString||"Weniger als eine Minute",l="min";else if("es"==a.lang)var s=a.lessThanAMinuteString||"Menos de un minuto",l="min";else if("nl"==a.lang)var s=a.lessThanAMinuteString||"Minder dan een minuut",l="min";else if("sk"==a.lang)var s=a.lessThanAMinuteString||"Menej než minútu",l="min";else if("cz"==a.lang)var s=a.lessThanAMinuteString||"Méně než minutu",l="min";else if("hu"==a.lang)var s=a.lessThanAMinuteString||"Kevesebb mint egy perc",l="perc";else var s=a.lessThanAMinuteString||"Less than a minute",l="min";var u=function(n){if(""!==n){var t=n.trim().split(/\s+/g).length,i=a.wordsPerMinute/60,r=t/i;if(a.round===!0)var u=Math.round(r/60);else var u=Math.floor(r/60);var g=Math.round(r-60*u);if(a.round===!0)u>0?e(a.readingTimeTarget).text(a.prependTimeString+u+" "+l):e(a.readingTimeTarget).text(a.prependTimeString+s);else{var o=u+":"+g;e(a.readingTimeTarget).text(a.prependTimeString+o)}""!==a.wordCountTarget&&void 0!==a.wordCountTarget&&e(a.wordCountTarget).text(a.prependWordString+t),a.success.call(this)}else a.error.call(this,"The element is empty.")};r.each(function(){null!=a.remotePath&&null!=a.remoteTarget?e.get(a.remotePath,function(n){u(e("<div>").html(n).find(a.remoteTarget).text())}):u(r.text())})}}(jQuery);
$(function(){$('.post-body').readingTime();});
//]]>
</script>


Bu kodlar herhangi bir yazınızın toplam okuma süresidir.

wordsPerMinute:270 : 1 dakikaya tekabül eden kelime sayısır.

Less than a minute : Bir dakikadan az bildirimidir.


3. Son olarak temanızda <div class='post-header'> kodunu aratarak altına ya da uygun gördüğünüz başka bir alana aşağıdaki kodları ekleyin.


<span class='right'><i class='fa fa-clock-o'/> <span class='eta'/></span>


4. Temanızı kaydedin.

Demo
click to view


11 Aralık 2015 Cuma

Blogger kendini güncelliyor

  Hiç yorum yok
Blogger için yeni güncellemeler geliyor

Son aylarda gelen blogger güncellemeleri

Çoğu kişi bir web site açarken wordpress mi açsam yoksa Blogger mi diye düşünürken SEO açısından daha iyi olduğu ve daha hızlı olduğunu düşünerek wordpress tercih ediyor.Öte yandan daha önceden de wordpress kullananlar için blogger oldukça karmaşıktır. Bu durum tabi blogger kullanıcıları için de geçerli olduğu için wordpress karmaşık gelmektedir.
Son aylarda blogger uzun zamandan beri ilk kez kendini güncellemeye başladı. İsterseniz şimdi bu güncellemelerin neler olduğuna göz atalım..


1. Site haritası

Google'ye göndermiş olduğunuz
atom.xml?redirect=false&start-index=1&max-results=500 

gibi sitemap adresleri yerine sadece

sitemap.xml 

adresinden site içeriğinizdeki konuları görmektedir. Bu yüzden sitemap.xml adresinizi mutlaka google haritalarına eklemeniz gerekmetedir.

Ayrıca robot.txt dosyanızda da sitemap.xml tanımlı olması gerekiyor.


2. Resim yükleme

Yazı içine resim ekle butonu yardımıyla resim yüklemek yerine masaüstünüzde bulunan bir resmi sürükle bırak yöntemiyle de artık yazılarınızın bulunduğu alana yükleyebilirsiniz. 
Oldukça kullanışlı ve güzel bir yenilik. 

3. Öne çıkan yayın widgeti

Güzel ve oldukça kullanışlı bir widget olan öne çıkan yayın. Vurgulamak istediğiniz bir konudan bir paragraf oluşturarak blog ziyaretçilerinize daha kolay bir gezinme imkanı sunuyor. 



Blogger hakkında yeni haberlere ulaşmak ve güncellemelerden haberdar olmak için takipte kalın.