Blogger Seo Uyumlu Title Ayarları

blogger title ayarları
Çoğunuzun bildiği gibi Blogger ne kadar da en çok kullanılan arama motoru devinin bir ürünü olsa da. Bir çok şey seo ile uyumlu değil. Site başlığı yani title ayarları da seo ile uyumlu olmadığından bunu bizim düzeltmemiz gerekiyor. Tek yapılması gereken şey ufak iki kodu değiştirmek olacak.

Blogger panelinde şablon menüsüne tıkladıktan sonra html'yi düzenle butonuna tıklayın,

Alttaki kodu bulun ;
<title><data:blog.pageTitle/></title>

Bununla değiştirin ;
<b:if cond=’data:blog.pageType == “index”‘>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> – <data:blog.title/></title>
</b:if>

Şablonu kaydet diyin. Yapılan değişiklik hakkında önceki ve sonraki olarak ayırarak netleştirelim.

Önceki ;

Site Başlığı: Yazı Başlığı

Sonraki ;

Yazı Başlığı - Site Başlığı

Blogger Yan Menü Eklentisi

blogger yan menü

Resimdeki gibi şık ve pratik bir yan menü kullanmak istemez misiniz ? Blog sitenize gelen ziyaretçilere ve size yardımları dokunacaktır. Resimdeki yan menüyü yapmak için aşağıdaki adımları takip edin.

Yerleşim < Html'yi Düzenle diyerek aşağıdaki kodu aratıyoruz ;
]]></b:skin>

Bulduğumuz kodun hemen üstüne alttaki kodları yapıştırıyoruz ;
.fixed_menu {
position: fixed; /*set the position type for non IE systems*/
top: 140px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}
.fixed_menu a { display: block; } /*Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu*/
* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/

Sonra aşağıdaki kodu bulup ;
<body>

Hemen altına aşağıdaki kodları ekliyoruz ;
<div class='fixed_menu'>
<a href='http://berkaltunkilic.blogspot.com' title='Home'>
<img src='http://i46.tinypic.com/33be0cg.png'/></a>

<a href='mailto:Email Adresinizi yazın' title='Mail me'>
<img src='http://i45.tinypic.com/6glawh.png'/></a>

<a href='http://berkaltunkilic.blogspot.com' title='Konularımı takip et.'>
<img src='http://i49.tinypic.com/2ym8u10.png'/></a>

<a href='http://berkaltunkilic.blogspot.com' title='Yorumlara abone ol.'>
<img src='http://i46.tinypic.com/24e2fc7.png'/></a>

<a href='javascript:scroll(0,0)' title='Scroll to top of this page'>
<img src='http://i45.tinypic.com/2qsmn12.png'/></a>
</div>

Son kod alanında bulunan linkleri kendinize göre düzenlemeyi unutmayın.

Blogger Metro Tarzı Sosyal Ağ Eklentisi

blogger metro sosyal ağ eklentisi
Windows'un bu tasarımı herkesin çok hoşuna gitmişti benimde dahil. Benim gibi bu tarz şeyleri beğenen kişiler için süper bir sosyal ağ eklentisidir. Genel olarak mavi renk olmasına rahmen fare ile üstüne geldiğinizde o sosyal ağ platformunun kendi rengine dönecektir. Metro tarzı sosyal ağ eklentisini kurmak çok kolaydır, alttaki adımları izlemeniz yeterlidir.

Şablon > HTML'i düzenle diyerek aşağıdaki kodu buluyoruz ;
</b:skin>

Bulduğumuz kodun hemen üstüne alttaki kodları ekliyoruz ;
#jocial{width: 305px;
float: left;margin-top: 10px;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: rgba(59,89,152,1) url("http://1.bp.blogspot.com/-UKryCh_9ofg/UTZhTsKo1JI/AAAAAAAABB8/nZELvc-I_mU/s000/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-l7ZToPjmMuU/UTZhUBsetSI/AAAAAAAABCE/7mAmFM2I3Vg/s000/twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-BlNwAezZeJE/UTZhUQqnRiI/AAAAAAAABCM/R_lwCLevtBQ/s000/google%25252Bplus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-rAtL540hTiU/UTZhUjdTDrI/AAAAAAAABCU/6msqfzMDbG8/s000/rss.png") no-repeat center center;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("http://3.bp.blogspot.com/-l7ZToPjmMuU/UTZhUBsetSI/AAAAAAAABCE/7mAmFM2I3Vg/s000/twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("http://2.bp.blogspot.com/-BlNwAezZeJE/UTZhUQqnRiI/AAAAAAAABCM/R_lwCLevtBQ/s000/google%25252Bplus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("http://4.bp.blogspot.com/-rAtL540hTiU/UTZhUjdTDrI/AAAAAAAABCU/6msqfzMDbG8/s000/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}

Daha sonra Yerleşim > Gadget Ekle > Html/JavaScript ekle bölümünden alttaki kodu ekliyoruz ;
<ul id='jocial'>
<li><a class='icon facebook' href='http://www.facebook.com/YOUR_USERNAME/'></a></li>
<li><a class='icon twitter' href='http://twitter.com/username/'></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/YOUR_USERNAME'></a></li>
</ul>

Eklediğiniz gadgetteki linkleri kendinize göre düzenleyerek yani kendi linkleriniz ekleyerek kullanmaya başlıyoruz.

Blogger Yazı İçinde İlgili Aramalar Eklentisi

Yaptığınız paylaşımlarda bildiğiniz üzere etiketler çok önemli bir etkendir. Blogger üzerinde etiketleri genelde kategori olarak kullanıyoruz. Çünkü Blogger sistemlerinde kategori sistemi bulunmuyor. Yıllar geçmesine rahmen o kadar istek, o kadar rica yinede eklemediler. Demek ki bir bildikleri var dicez iş başa düşecek.

Bu yazımda, paylaştığınız makaleler altına etiketler oluşturma yöntemini anlatacağım. Yapmanız gereken tek şey temanıza bir kaç kod eklemek ve sonra yazdığınız her makalede etiketler belirleyip onları yazmak.


 Aşağıdaki kodu ]]></b:skin> aratıp hemen üstüne ekleyin.
.berk {margin-top: 0.5em;margin-bottom: 0.5em;padding: 1em 1.5em 1em 5.5em;border-bottom: 2px solid #fff;border-top: 2px solid #fff;color:#444;background: #FFF6BF url() 2.2em center no-repeat; border-color: #EB1885;}.ikaz .kapat{ position:relative; float:right; top:-5px; right:-5px; }.ikaz .kapat img{border:none; background:none;}.ikaz a&nbsp; {color: #817134;}.ikaz2 {color:#444444;background:#BFE5F2 url(http://i50.tinypic.com/oqyjo3.jpg) no-repeat 25px center;border: 1px solid #0098CA;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";}.ikaz3 {color:#444444;background:#FFF8AF url(http://i50.tinypic.com/oqyjo3.jpg) no-repeat 25px center;border: 1px solid #DDDDDD;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";}.ikazyeni {color:#444444;background:#ebf1f1 url() no-repeat 25px center;border: 1px solid #DDDDDD;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";}#yukari h1 {text-indent: -9999px;}#yukari h1 a {background: url(http://i37.tinypic.com/15yxcsn.png);padding:0;display: block;height:83px;width: 344px;cursor:pointer;}.ikaz3-reklam {color:#444444;background:#FFF8AF url() no-repeat 50px center;border: 1px solid #DDDDDD;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";}.ikaz27 {color:#444444;background:#E9FFDD url(http://i25.tinypic.com/5cexvl.png) no-repeat 10px center;border: 2px solid #72C868;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";}.ikaz-sinema {color:#444444;background:#e3e8d5 url() no-repeat 1px center;border: 2px solid #bedd66;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 10px;margin: 5px 30px;font-family: "Verdana";}.ikazbilgi {color:#444444;background:#FF9933 url(http://i32.tinypic.com/defpz.png) no-repeat 10px center;border: 2px solid #FF8000;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";} a.linkopacity img{filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;} a.linkopacity:hover img{filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}


Son olarak Ayarlar - Yayınlar ve Yorumlar sekmesinden Kayıt Şablonu Ekle diyerek alttaki kodu yapıştırın.
<div class="berk">İlgili Aramalar: </div>
Bu eklentiyi kurduktan sonra eklediğiniz her yazı da ilgili aramalar çıkacak makaleyi yazarken etiketleri onun yanına yazın ve yayınlayın. 

Blogger'da Widget Düzenle Butonunu Kaldırmak


Blogger'da yerleşim sekmesinde bulunan widgetleri hızlı yoldan düzenlemek için bir buton mevcut. Çarpı şeklinde tornavida ve anahtar çizimli bir butondur.

Kimi zaman işe yarayan ama çoğu zaman sizi yanıltabilecek bir butondur kendisi. Resimlerde, sütunlarda veya site üzerinde bulunan her hangi bir bileşende kayma gibi şeyler söz konusu olabilir bu buton yüzünden. Buton ziyaretçinize gözükmez sadece sizde gözükür ve o butonu göstermek için bileşeni aşağı kaydırabilir, sağa atabilir, sola atabilir görüntüde bozukluk görünebilir.

Tavsiyem o ki butonu kaldırın, blogger panelinden düzenlemelerinizi yapın ve o buton olmadan orjinal görüntüyle inceleyin. Sonuçlarınız daha verimli olacaktır.

Html'yi düzenle diyerek aşağıdaki aratın ve bulduklarınızı silin.

<b:include name='quickedit'/>

Blogger Arşiv Sayfası Oluşturma

arşiv sayfası

Blogger'da bir çok eksik mevcut. Belki yapılması bile düşünülmüyor, belki de az ilgileniliyor bilemeyiz. Fakat bunun bizi durdurmaması için bir çok eklenti yazılıp çiziliyor. Blogger'da özel bir sayfa olarak açılan sitemap veya arşiv olarak adlandırılan kod da bunlardan biri.

Blogger'da tüm yazıların bir sayfada olması yada site haritası tarzı bir sayfa oluşturmak isteyenler bu koddan yararlanabilir. Tek yapmanız gereken, yeni bir sayfa oluşturmak ve alttaki kodu eklemek.
Kırmızı renkli alanı kendinize göre düzenleyin.
<script src="http://yourjavascript.com/9184200431/blogtoc-min.js" type="text/javascript"> 
</script>
<script src="http://berkaltunkilic.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> 
</script>
© 2014 Berk Altunkılıç - ALL RIGHTS RESERVED