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 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>

Blogger Kar Yağdırma Eklentisi

blogger kar
Yıl başında veya kışın her hangi bir zamanda, isterseniz konseptinize uygunsa kullanabileceğiniz bir eklentidir. Tek bir gadget, tek bir kod ile blogger sitenize kar yağdırın.

Yerleşim alanından yeni HTML/JavaScript açarak alttaki kodları eklemenizi yeterlidir.

<script type="text/javascript">

      
      //Configure below to change URL path to the snow image
      var snowsrc="https://lh4.googleusercontent.com/-m0mlE3cYxCk/TuBfebG-fdI/AAAAAAAATr8/eTcHt_qYjHM/s400/snow.gif"
      // Configure below to change number of snow to render
      var no = 15;
      // Configure whether snow should disappear after x seconds (0=never):
      var hidesnowtime = 0;
      // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
      var snowdistance = "pageheight";

    ///////////Stop Config//////////////////////////////////

      var ie4up = (document.all) ? 1 : 0;
      var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

        function iecompattest(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }

      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600;
     
      if (ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      } else if (ie4up) {
        doc_width = iecompattest().clientWidth;
        doc_height = iecompattest().clientHeight;
      }

      dx = new Array();
      xp = new Array();
      yp = new Array();
      am = new Array();
      stx = new Array();
      sty = new Array();
      snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://lh4.googleusercontent.com/-m0mlE3cYxCk/TuBfebG-fdI/AAAAAAAATr8/eTcHt_qYjHM/s400/snow.gif" : snowsrc
      for (i = 0; i < no; ++ i) { 
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;         // set amplitude variables
        stx[i] = 0.02 + Math.random()/10; // set step variables
        sty[i] = 0.7 + Math.random();     // set step variables
            if (ie4up||ns6up) {
          if (i == 0) {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
          } else {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
          }
        }
      }

      function snowIE_NS6() {  // IE and NS6 main animation function
        doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
            doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
        for (i = 0; i < no; ++ i) {  // iterate for every dot
          yp[i] += sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02 + Math.random()/10;
            sty[i] = 0.7 + Math.random();
          }
          dx[i] += stx[i];
          document.getElementById("dot"+i).style.top=yp[i]+"px";
          document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; 
        }
        snowtimer=setTimeout("snowIE_NS6()", 10);
      }

        function hidesnow(){
            if (window.snowtimer) clearTimeout(snowtimer)
            for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
        }
           

    if (ie4up||ns6up){
        snowIE_NS6();
            if (hidesnowtime>0)
            setTimeout("hidesnow()", hidesnowtime*1000)
            }

    </script>

Blogger Hareketli Sosyal Medya Butonları

hareketli sosyal
Görsel olarak farklılık arayanlar için hareketli sosyal medya butonları sitenize eklemek sadece bir kod ile mevcuttur. Butonların görseli yukarıdadır. Fare imleci ile üzerine gelindiğinde butonlar renklenir ve yukarı aşağı hareket etmeye başlar.
Blogger sitenize yerleşimlerden HTML/JAVASCRİPT gadgeti oluşturun.
Aşağıdaki kodları ekleyin ve kodları düzenleyerek linklerinizi ekleyip yayınlayın.
<style>  
.touchme a { 
display:block; 
height:50px; 
width:50px; 
padding:0 4px; 
float:left; 
background:transparent url(http://4.bp.blogspot.com/-KHbv7Tz112U/T9fZAXtBe8I/AAAAAAAAB_s/7nmIbT9ltQw/s1600/eklentileri.blogspot.com.png) no-repeat; 
-webkit-transition: ease-in 0.2s all;    
-moz-transition: ease-in 0.2s all;    
-o-transition: ease-in 0.2s all;    
-ms-transition: ease-in 0.2s all;    
transition: ease-in 0.2s all; 
cursor:pointer;
}

.touchme a.googleplus { 
background-position: 0px -58px;
} 
.touchme a.googleplus:hover { 
background-position: 0px 0px; 
}

.touchme a.twitter { 
background-position: 0px -290px;
} 
.touchme a.twitter:hover { 
background-position: 0px -232px;
} 
.touchme a.facebook { 
background-position: 0px -406px;
} 
.touchme a.facebook:hover { 
background-position: 0px -348px;
}

.touchme a.rss { 
background-position: 0px -174px;
} 
.touchme a.rss:hover { 
background-position: 0px -116px;
}

</style>

<div class='touchme'>
<!--RSS--> 
<a class='rss' href="RSS ADRESI" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> 
<a class='googleplus' href="GOOGLE PROFIL ADRESI" rel='external nofollow' target='_blank'></a>
<!--Facebook--> 
<a class='facebook' href="FACEBOOK ADRESI" rel='external nofollow' target='_blank'></a>
<!-- Twitter --> 
<a class='twitter' href="TWITTER ADRESI" rel='external nofollow' target='_blank' ></a>

</div>
© 2014 Berk Altunkılıç - ALL RIGHTS RESERVED