Posts mit dem Label Blogger Eklentileri werden angezeigt. Alle Posts anzeigen
Posts mit dem Label Blogger Eklentileri werden angezeigt. Alle Posts anzeigen

Montag, 23. Mai 2016

Tıklanabilir Rastgele Banner Eklentisi

Bu yazıda paylaşacağım eklentiyi düzenleyerek blogunuza eklediğinizde kenar çubuğunda 300x250px boyutlarında (ya da istediğiniz başka bir boyut) bir banner gözükecek. Fakat bu eklentinin şöyle bir özelliği var; sayfayı yenilediğinizde veya bir yazıdan başka bir yazıya geçiş yapığınızda bannerın yerinde sizin belirlediğiniz başka bir banner gözükecek.

tıklanabilir rastgele banner


Eklentide 5 adet banner tanımladığınızı düşünelim. Her ziyarette bu 5 banner rastgele gözükecek. Peki bu eklenti ne işinize yarayacak?

1. Öncelikle tabi ki aynı reklam alanında birden fazla reklam gösterebileceksiniz. Fiyatı düşük tutsanız bile reklam verenler bunu kabul etmeyebilir ama dost sitelerinizin veya önerdiğiniz sitelerin reklamlarını bu şekilde dönüşümlü olarak gösterebilirsiniz.

2. Blogunuzda öne çıkan yazılan eklentisi olarak da kullanabilirsiniz. Ziyaretçilerinizin mutlaka okuması gerektiğini düşündüğünüz yazılar için banner oluşturarak rastgele gözükmesini sağlayabilirsiniz.



Gelelim eklentiyi blogunuza nasıl ekleyeceğinize. Blogger kumanda panelinize giriş yaparak Yerleşim > Gadget Ekle > HTML/JavaScript Gadget diyerek aşağıdaki kodları yapıştırmanız yeterli.

<script type='text/javascript'>
var quotes=new Array()
quotes[0]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqI8Uz2a5ZYNXTcwP0nO3Dnz7naK0OV-xLLQz7gDs3dzk8wLagyY0xwobuqWBpEdha1YSHq2sTDwFbj8sedALrrsLGx278gopYG17gRlP4B0c5e_lj0WZWLeTqY5ej-rLaNFVx_fwQayTa/s300/1.png"/></a>'
quotes[1]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQM4VucgCL7ukm1h3hXQJF9TBrP1CzECvGeWouvhfyOJ7nt-hIyiGDRCNyWpR_-4yCCjmu0ln9VgJGtIMuvT6xM2F1iA5JUesElMSwL_2ZsBnycIYCfiAi5Au499lrbrCwaAhzEJmolu0/s300/2.png"/></a>'
quotes[2]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ROV27ZvN7IboT4PoxNz_rHa6VIK5ko8gsJ6ACGaeuKrBR7Gg57ndqEx-TPpYriJYV0mbRRlGyAPlPTky3su0E7outv0Olc3AYIZuM-MIp5_tMUbem_c2oL6k5DJTIO78ArkNSbqf9gXe/s300/3.png"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length));
document.write(quotes[whichquote]);
</script>

  • Mavi yerlere resme tıklanınca açılacak sayfanın urlsini yazın.
  • Kırmızı yerlere banner urlsini yazın.
  • Yeşil yerlere bannerın alt etiketini yazın.
  • 4. banner için eklemeniz gereken kod:
quotes[4]='<a href="#"><img alt="#" height="auto" width="100%" src="#"/></a>'

Herkese iyi bloglar…

Freitag, 6. Mai 2016

Blogger Sidebar Abonelik Eklentisi

Blogunuzun sidebarına mail abonelerinizi ve sosyal medya takipçilerinizi arttıracak bir eklenti eklemek istiyorsanız çok beğendiğim bu yeni eklentiyi sizlere tavsiye edeceğim.

Geliştirilmeye ve kişiselleştirilmeye çok müsait olan bu eklenti ziyaretçilerinizin dikkatini çekerek özellikle FeedBurner mail abone sayınızın artmasını katkı sağlayacaktır. Eklentinin özelliklerinden kısaca bahsetmem gerekirse:

  • Mobil cihazlara uyumludur ve sorunsuz görüntülenmektedir.
  • Sadece 3 adet kod değişikliğiyle eklentinin renklerini blogunuzun tasarımıyla uyumlu hale getirebilirsiniz.
  • Font Awesome kullanılarak şık ve hızlı sosyal butonlar eklenmiştir.
  • Blogger’da son zamanlarda HTTPS’e geçişle birlikte yaşanan sorunlardan etkilenmeyecek şekilde düzenlenmiştir.
Blogger Sidebar Abonelik Eklentisi


Blogger Sidebar Abonelik Eklentisi Nasıl Eklenir?

Öncelikle şablonun HTML kodlarına yukarıda bahsettiğim Font Awesome’ı eklemeniz gerekiyor. Bunun için Blogger kumanda panelinizde Şablon > HTML’yi Düzenle yolunu takip edin ve <head> kodunun altına şu kodu ekleyin:

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>

Ekledikten sonra şablonu kaydedin ve ikinci adım için yine Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek aşağıdaki kodları yapıştırın:

<style>
#sidebar-abonelik {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 10px;
  border: 0;
  background: #363636;
}
#sidebar-abonelik .main_tagline {
  padding: 0px 0px;
  line-height: 2.5em;
  font-size: 24px;
  margin: 0;
  height: 95px !important;
  overflow: hidden;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  border-radius: 10px 10px 0 0;
  background-color: #679EC9;
}
#sidebar-abonelik .email_icon {
  display: table;
  margin: -35px auto 0px;
  font-size: 25px;
  padding: 12px;
  height: 25px;
  width: 25px;
  background-color: #363636;
  color: #FFF;
  border-radius: 50px;
  border: 10px solid #FFFFFF;
  line-height: 0;
}
#sidebar-abonelik p {
  font-size: 14px;
  color: #F9F9F9;
  text-shadow: 0px -1px 0px #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
  border-bottom: 2px solid #6A6A6A;
  border-radius: 20px;
}
#sidebar-abonelik .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#sidebar-abonelik .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 12px;
  color: #000;
  text-align: center;
  display: block;
  font-family: inherit;
  font-weight: normal;
  width: 90%;
  height: 38px;
  outline: none !important;
  border: 1px solid #FFFFFF;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
}
#sidebar-abonelik .rssform .button:hover {
  background: #656E75;
}
#sidebar-abonelik .rssform .button {
  background: #679EC9;
  color: white!important;
  border: 1px solid #FFFFFF;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
#sidebar-abonelik .bottom_lock_policy {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiisgLXPApI9c4iIWks3EXhYi7LJYW-koEkXlfdT5541iGE9L9Y8lZQAf-eVkUA8pPPHK5swb9jA3VDIBCAw9jEg_ycJoh1H1lpU-ZyaA5uqIRgws2GZm8aWJhAPcZ-lRYsHSJv-f3M582K/s24/Keys-icon.png) no-repeat 3% -2px;
  color: #959595;
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 1px;
  line-height: 25px;
}
#sidebar-abonelik .bottom_lock_policy a {
  color: #959595;
  text-decoration: none !Important;
}
#sidebar-abonelik .social_profiles {
  line-height: 1.2em;
  display: table;
  float: none;
  margin: 0px auto;
  text-align: center;
  min-width: 157px;
  padding: 5px 0px;
  border: 0;
}
#sidebar-abonelik .social_profiles a:hover {
  color: #FFF;
  background-color: #679EC9;
  border-color: #FFF;
}
#sidebar-abonelik .social_profiles a {
  color: #000000;
  margin: 0 5px;
  text-align: center;
  float: left;
  display: table;
  padding: 4px 5px;
  background-color: #FFFFFF;
  border-radius: 50px;
  border: 2px solid #2D2D2D;
  width: 15px;
  height: 15px;
  line-height: 0;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#sidebar-abonelik form {
  margin-bottom: 10px !important;
}
</style>
<div id="sidebar-abonelik">
            <div class="main_tagline">E-Posta Aboneliği</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Yeni yazıların ücretsiz olarak mail adresinize gelmesi için abone olun!</p>
   <div class="rssform">
            <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=BlogHocam', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="E-Mail adresiniz..." />
            <input type="hidden" value="BlogHocam" name="uri" />
            <input type="hidden" name="loc" value="tr_TR" />
            <input value="Abone Ol" class="button" type="submit" />
            </form>
            </div>
      <div class="bottom_lock_policy">Gizliliğinize saygı duyuyoruz</div>
   <div class="social_profiles">
   <a href="https://www.facebook.com/BlogHocam" target='_blank' rel='nofollow' title="Facebook'ta Takip Et"><i class="fa fa-facebook"></i></a>
   <a href="https://www.twitter.com/BlogHocam" target='_blank' rel='nofollow' title="Twitter'da Takip Et"><i class="fa fa-twitter"></i></a>
   <a href="https://plus.google.com/+BloghocamBlogspot" target='_blank' rel='nofollow' title="Google+'da Takip Et"><i class="fa fa-google-plus"></i></a>
   <a href="https://instagram.com" target='_blank' rel='nofollow' title="Instagram'da Takip Et"><i class="fa fa-instagram"></i></a>
   </div>
            </div>

Kaydettikten sonra eklentinin eklendiğini görecekseniz. Kodlarda değiştirmeniz gereken yerler şöyle:


  • Kırmızı renkle gösterdiğim yerlere kendi sosyal medya hesaplarınızın URL’lerini yazın.
  • Lacivert renkle gösterdiğim yerlere kendi FeedBurner ID’nizi yazın.
  • Mavi vurguyla gösterdiğim yerlere ise istediğiniz bir renk kodunu girin. Bu şekilde E-Posta Aboneliği başlığının arka plan rengini, Abone Ol butonunun arka plan rengini ve sosyal butonların üzerine gelindiğindeki rengi değiştirebilirsiniz.

Donnerstag, 10. März 2016

Blogger Sayfa Numaralandırma Eklentisi

Normalde Blogger bloglarda sayfalar arasında geçiş yapmak için önceki kayıtlar – sonraki kayıtlar linkleri kullanılır. Örneğin her bir sayfada 5 kayıt göstermeyi seçtiyseniz blgunuzun ana sayfasında en son yayınladığınız 5 yazınız görünür. Ondalardan önce yayınladığınız 5 yazınızı görmek için de önceki kayıtlar linkine tıklanır.

Fakat Blog Hocam’da ve bazı bloglarda göreceğiniz gibi önceki kayıtlar – sonraki kayıtlar linklerinin yerinde numaralar var. Sayfalar numaralandırılarak ziyaretçinin blogda dolaşması kolaylaştırılmıştır.

Bu yazıda 2016 yılının teknolojisine uygun, HTML5 uyumlu olan Blogger sayfa numaralandırma eklentisini blogunuza nasıl ekleyeceğinizi anlatacağım.

blogger sayfa numaralandırma eklentisi


!!! Eğer kodlar konusunda deneyimli değilseniz her ihtimale karşı şablonun yedeğini almanızı öneririm.

1. Adım: İlk olarak eklentinin CSS kodlarını şablona ekleyeceğiz. Bu kodlar üzerinde oynama yaparak eklentinin renklerini ve yazı boyutlarını değiştirebilirsiniz. CSS kodlarını şablona eklemek için Blogger kumanda panelimize gidip Şablon > HTML’yi Düzenle diyerek şablonumuzun kodlarının olduğu bölümü açacağız. Burada Ctrl+F tuş kombinasyonunu kullanarak açılan aram kutusunun da yardımıyla  <b:skin>...</b:skin> yazan bölümü bulup 1 kez tıklayacağız. Böylece o bölüm genişleyecek ve tüm CSS kodları gözükecek. Ardından </b:skin> kodunun hemen üzerine şu CSS kodları yapıştıracağız.

/* Blogger Sayfa Numaralanadırma Eklentisi – Blog Hocam*/
.navipager{clear:both;margin:0;text-align:center;font-weight:bold;color:#fff !important;}
.navipager span,.navipager a{padding:5px 15px;margin-right:3px;display:inline-block;color:#fff !important;background-color:#9cd9d5;line-height:1.6em}
.navipager .current{color:#fff !important;background-color:#9cd9d5;}
.navipager .current,.navipager .pages{color:#fff !important;background-color:#9cd9d5;}
.navipager a:hover{color:#fff !important;background-color:#f1583b;}
.navipager .pages {margin:0 -1px 0 0}



2. Adım: Şimdi yine şablonun kodlarında <b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog'> satırını bulup bunun hemen altına şu kodları ekleyeceğiz.
 
 <b:includable id='navi-pager'>
<div class='navipager'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: &quot;Başa Git&quot;,
lastText: &quot;Sona Git&quot;,
nextText: &quot; &#9658; &quot;,
prevText: &quot; &#9668; &quot;
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Sayfa '+e+' / '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
        //]]>
</script>
    </div>
    </b:includable>
 
 
3. Adım: Son olarak <b:include name='nextprev'/> kodunu bulup siliyoruz ve bunun yerine şu kodları yapıştırıyoruz.
 
    <b:if cond='data:blog.pageType == "index"'>
        <b:include name='navi-pager' />
        <b:else/>
        <b:if cond='data:blog.pageType == "archive"'>
            <b:include name='navi-pager' />
        </b:if>
    </b:if>
 
 

!!! Eklentinin düzgü çalışması için dikkat etmeniz gerekin önemli bir nokta var. Her sayfada kaç yazı görünmesini istiyorsanız 2. adımdaki kodlarda kırmızı ile gösterdiğim yere o sayıyı yazıyorsunuz. Ardından Blogger kumanda panelinde Yerleşim > Blog Kayıtları > Düzenle yolunu takip ederek ana sayfadaki kayıt sayısı bölümüne aynısını yazıyorsunuz.

Donnerstag, 28. Januar 2016

Blog Yazısının İçeriğini Sayfalara Ayırmak

Bazı büyük çaplı bloglarda, portallarda ve haber sitelerinde gördüğümüz yazıyı birden fazla sayfaya bölerek, yazı içerisinde geçiş yapılması olayını Blogger'a uygulamak isteyenler için çok profesyonel olması aynı işlevi görecek bir ipucu ve kod paylaşmak istiyorum.

blogger yazıyı sayfalara ayırmak


Bir örnekle açıklamak gerekirse; 3000 kelimelik bir yazı yazdığınızı düşünün. Bu yazıyı yayınladığınızda sayfada oldukça fazla yer kaplayacak ve kaydırma çubuğunu epey hareket ettirmek zorunda kalacaksınız. Üstelik bu kadar uzun bir sayfa okuyucuyu da ürkütüp okumaya üşendirebilir. Böyle bir durumda bu kodları kullanarak 3000 kelimeli yazıyı 1000 bölümlük 3 parçaya ayıracak ve yazının altındaki numaralı navigasyon butonlarıyla bu parçalar arasında geçiş yapabileceksiniz.

İşleyişi daha iyi anlamak için hazırladığım şu örnek videoyu izleyebilirsiniz:



Gelelim bu uygulamayı blogunuzda nasıl kullanacağınıza. Öncelikle şablonunuzun kodlarında jquery olması gerekiyor. Eğer daha önce eklemediyseniz Blogger kumanda panelinize giriş yaparak Şablon > HTML'yi Düzenle  yolunu takip ederek HTML kodlarını açın ve Ctrl + F tuş kominasyonunun yardımıyla açabileceğiniz arama kutusuna </head> yazarak bu satırı bulun. Hemen üzerineşu kodu ekleyin:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Hemen altına ise şu kodları ekleyin:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

Son olarak şablonda ]]></b:skin> satırının üzerine şu kodları ekleyin:

.post-pagination {    margin: 40px auto;    text-align: center;    width: 100%; float:left;}.button_1, .button_2, .button_3 {    border: 1px solid #000;    font-weight: 900;    padding: 6px 16px;    color:#f4655f;    transition:ease 0.69s !important;}.button_1:hover, .button_2:hover, .button_3:hover {    background: none repeat scroll 0 0 #f4655f;    color: #fff;    text-decoration: none;}

Şablon kodlarıyla işimiz bitti. Şimdi uygulamayı kullanacağımız yazıya gidelim veya yeni bir yazı yazalım.Yazı editöründen yazının HTML kısmına geçiş yaparak aşağıda kodları ekleyelim:

<div class="content_1">
Birinci sayfada görünmesini istediğiniz içeriği buraya yazın.
</div>
<div class="content_2" style="display: none;">
İkinci sayfada görünmesini istediğiniz içeriği buraya yazın.
</div>
<div class="content_3" style="display: none;">
Üçüncü sayfada görünmesini istediğiniz içeriği buraya yazın.
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Gördüğünüz gibi yazıyı  parçaya bu kodlarla ayırıyoruz. Kırmızı renkle gösterdiğim yerlere içeriğinizi yazabilirsiniz.

Donnerstag, 3. Dezember 2015

Limk: Bloglar İçin İlgili Yazılar Eklentisi

Blog yazarları için "benzer yazılar eklentisi"nin öneminden defalarca bahsetmiştim. Görüyorum ki kodlarla uğraşmaktan çekindiği için veya blog dünyasına yeni girdiği için bu eklentinin faydalarını idrak etmediği için benzer yazılar eklentisini hala kullanmayan pek çok blogger var.

Blogunuza Neden Benzer Yazılar Eklentisi Eklemelisiniz?

Bu yazıda, kodlarla hiç uğraşmadan blogunuza kolayca ekleyebileceğiniz bir benzer yazılar eklentisini tanıtacağım. Fakat öncelikle bilmeyenler için bu eklentinin öneminden faydalarından bahsetmek istiyorum.

- Bounce Rate: Hemen çıkma oranı olarak da bilinen bounce rate, bir ziyaretçinin blogunuzun her hangi bir sayfasına girdikten sonra başka hiçbir sayfaya geçmeden blounuzu terk etmesidir. Bounce Rate, blogunuzun Google sıralamasını belirleyen önemli faktörlerden biri olduğu için benzer yazılar eklentisi kullanarak ziyaretçilere başka yazılarınızı otomatik olarak önerir, böylece blogunuzu hemen terk etmelerini önleyebilirsiniz.

- Sayfa Görüntülenme Sayısı: Eklenti sayesinde ziyaretçilere otomatik olarak farklı içerikler önerildiği için doğal olarak insanlar daha fazla sayfa görüntüleyecektir. Bu durum hem Google, hem Alexa, hem de blogunuza reklam verecek firma/kişiler için önemli bir kriterdir.

- Sitede Geçirilen Vakit: Bounce rate ve sayfa görüntüleme sayısı ile bağlantılı olarak ziyaretçilerin blogunuzda harcadığı vakit artacak, bu da blogunuzun Alexa ve Google sıralamalarını olumlu etkileyecektir.

- Tozlu Raflar: Blogunuzu ziyaret eden kişiler genellikle ilk sayfalardaki yazılarınızı okurlar. Fakat BH gibi uzun süredir yayında olan bir blogunuz varsa eski yazılarınız muhtemelen hiç okunmaz veya çok az okunur. Benzer yazılar eklentisi ziyaretçilere eski yazılarınızı da önerdiği için geçmiş yazılarınızın da okunma, yorum alma ve paylaşılma sayısı artar.


Limk: Türk Yapımı BenzerYazılar Eklentisi

Yazının başında da bahsettiğim gibi hiçbir kod bilgisine gerek kalmadan, blogunuza kolayca ekleyebileceğiniz bir araç olan Limk, bizim blog dünyasında ilgili yazılar eklentisi olarak bildiğim bir içerik tavsiye aracı. Üstelik yapımcıları Türk.

Bu konuda hizmet veren başka servisler de olduğunu biliyorum lakin Türk girişimcileri desteklemenin anında Limk'i kullanmanızı önermemin oldukça geçerli başka nedenleri de var.

  • Site içi linklerinizi kendi adresi ile değiştirmeden yönlendiriyor.
  • Sitenizin görünüşüne otomatik olarak uyum sağlıyor. Yani fontlar ve sütun genişliklerine uygun olarak içerikler sunuyor. 
  • Yazı altı, sütun ve ya kaydırma çubuğunda sabit olarak içeriklerinizi gösterebiliyor. 
  • Limk kullanıcı panelinde tıklanma oranlarınızı inceleyebiliyorsunuz. Bu şekilde ne kadar fayda sağladığını anlamak mümkün.
  • Yazınızın içinde kullandığınız resimlere göre uygun thumbnail’ler otomatikman üretilip, sunuluyor. 
  • Mobil uyumlu. Cep telefonu ve tabletlere özel bir sunum sağlıyor.
  • Birkaç dakika içinde kurarak aktive edilebiliyor. 
  • Bir hesap ile birden fazla sitenize ekleyebiliyorsunuz.  


Limk Blogger'a Nasıl Eklenir?

1. Adım - Kayıt: Öncelikle Türkçe kayıt sayfasına giderek mail adresi ve şifre ile Limk'e kayıt oluyoruz. Kayıt olmak ücretsiz ve sadece birkaç saniye süren basit bir işlem.

limk kayıt


2.Adım: - Site Ekleme: Kayıt olduktan sonra Limk'i kullanmak istediğimiz blogu hesabımıza ekliyoruz. Blogumuzun adresini yazdıktan sonra resimdeki bilgiler kendiliğinden gelecektir. Bilgiler otomatik olarak gelmediyse kendiniz resimdeki gibi girebilirsiniz.

limk site ekle


3. Adım - Widget Ekleme: Sıra Limk'i bloga widget olarak eklemeye geldi. Bu adıma başlamadan önce Blogger hesabınızın açık olması gerektiği hatırlatmak isterim. Blogumuzu ekledikten açılan sayfada resimde de gösterdiğim gibi Install Widget diye bir link göreceksiniz. Bu linke tıkladıktan sonra açılacak penceredeki Widget ekle butonuna basarak işlemi sonlandırabilirsiniz.

limk widget



Ve Limk'in responsive yani mobil cihazlarla uyumlu eklentisi blogunuza yüklendi. Gördüğünüz gibi kodlarla hiç uğraşmadan benzer yazılar eklentisini blogumuza ekledik.

limk


Detaylı bir şekilde anlatmaya çalıştığım bu işlemin nasıl yapıldığını bir de video olarak izlemek isterseniz "Blogger'a 2 dakikadan az bir sürede ilgili yazılar eklentisi nasıl eklenir?" isimli video anlatımına bakabilirsiniz:





Limk Kontrol Paneli

Limk'e giriş yaptıktan sonra sayfanın üst tarafında kontrol panelinizi göreceksiniz. Kısaca bu panelde neler yapabileceğinizden de bahsedelim.

limk kontrol paneli


- Siteler: Birden fazla blogunuz varsa her biri için ayrı hesap açmanıza gerek yok. Bu bölümden mevcut hesabınıza başka bloglar ekleyebilir ve düzenleyebilirsiniz.

- Widgetler: Buradan eklentinin dikey, yatay ve responsive versiyonları görebilir, blogunuza ekleyebilirsiniz.

- İstatistik: Buradan belirlediğiniz zaman arlığında eklentinin gösterim sayısını, tıklanma sayısını ve tıklanma oranını görerek ne kadar faydalı olduğunu ölçebilirsiniz.

- Dil: Limk'i Türkçe kullanmak için buradan Türkçe'yi seçebilirsiniz.

- Profil: Buradan profilinizle ilgili avatar, şifre, e-mail, bildirim gibi ayarları yapabilirsiniz.


Limk İle Gelir Elde Edebilirsiniz

Son olarak, çok yakında devreye gireceği duyurulan ve ilginizi çekeceğini düşündüğüm bir özellikten daha bahsetmek istiyorum. Kısa bir süre sonra benzer yazılar arasında reklam verenlere ait sponsor içeriklerin bağlantıları gözükecek ve ziyaretçileriniz bu sponsor bağlantılara tıkladıkça hesabınızda para birikecek ve alt ödeme limitine ulaştığınızda parayı alabileceksiniz.

Şuan için bu kadar bilgiye sahibiz. Sistem devreye girdiğinde detaylı bir incelemeyi yine buradan sizlerle paylaşacağım.

Freitag, 13. November 2015

Blogger Mega Reklam Alanı

Blog yazarak hangi yöntemlerle para kazandığımı anlattığım yazıda bahsettiğim gibi banner reklam bloglar için temel kazanç yöntemlerinden biri. Blogunuzun konusu ne olursa olsun eğer özen gösterdiğiniz, değer verdiğiniz bir blogunuz varsa banner reklam alanlarını kiralayarak para kazanabilirsiniz.

Bunun için blogunuzda bir reklam/sponorluk sayfası olmalı ve burada banner reklam seçeneklerini ve fiyatlarını (tercihen) yazmalısınız.

Eğer kimse reklam/sponsorluk sayfanızdan size ulaşmıyorsa reklam vermek isteyenlerin beklentilerini karşılamıyor olabilirsiniz. Bu durumda size önerim webmaster forumlarına üye olarak buralardaki ilgili bölümlere konu açmanız ve reklam aldığınızı duyurmanızdır.

Blogger’a Reklam Alanı Ekleme

Gelelim başlıkta da belirttiğim reklam alanları mevzusuna. Blogunuzun yan tarafına yani sidebar dediğimiz yere ekleyeceğiniz bu eklenti sayesinde 1 adet 250x50, 4 adet 125x125, 1adet 250x250, 5 adet 50x50 boyutunda reklam alanına sahip olacaksınız. Bu yüzden başlıkta mega reklam alanı diye yazdım.

blogger reklam alanı

 Mega reklam alanlarını blogunuza eklemek için Blogger kumanda panelinize giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek aşağıdaki kodları kopyalayın.

<table cellspacing="0" cellpadding="0" width="250" border="0"><tbody>
    <tr height="50">
      <td valign="top" width="250"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXFyutdopLa6rdigumGp2hcke0GdxuHyJspemxm1CEr967su0wDWTagqCIifIXE6Geubck43A5qBb_KUpTCQPc9xlwLOntjyQjX0d5QwCtVMj8oWKRntPutPzDj0wmp-v4zEGSOar30aR/s250-Ic42/250x50.png" width="249" height="49" /></a> </td>
    </tr>
  </tbody></table>

<table cellspacing="0" cellpadding="0" width="250" border="0"><tbody>
    <tr height="125">
      <td valign="top" width="125"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvWamD7kKdBEg7uIiArLcCKIxvkOcpzsnxz_4L0_oey62iD2ytSOqK3urNHFymYF2BiadQ_3-Yg386QhZqG5dq98OTI2arhnN4oWtQ_aH1w3bwWJCuIkrEKdEBtDnffbbAM-j7amQxUT_/s125-Ic42/125x125.png" width="124" height="124" /></a></td>

      <td valign="top" width="125"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvWamD7kKdBEg7uIiArLcCKIxvkOcpzsnxz_4L0_oey62iD2ytSOqK3urNHFymYF2BiadQ_3-Yg386QhZqG5dq98OTI2arhnN4oWtQ_aH1w3bwWJCuIkrEKdEBtDnffbbAM-j7amQxUT_/s125-Ic42/125x125.png" width="124" height="124" /></a></td>
    </tr>

    <tr height="125">
      <td valign="top" width="125"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvWamD7kKdBEg7uIiArLcCKIxvkOcpzsnxz_4L0_oey62iD2ytSOqK3urNHFymYF2BiadQ_3-Yg386QhZqG5dq98OTI2arhnN4oWtQ_aH1w3bwWJCuIkrEKdEBtDnffbbAM-j7amQxUT_/s125-Ic42/125x125.png" width="124" height="124" /></a></td>

      <td valign="top" width="125"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvWamD7kKdBEg7uIiArLcCKIxvkOcpzsnxz_4L0_oey62iD2ytSOqK3urNHFymYF2BiadQ_3-Yg386QhZqG5dq98OTI2arhnN4oWtQ_aH1w3bwWJCuIkrEKdEBtDnffbbAM-j7amQxUT_/s125-Ic42/125x125.png" width="124" height="124" /></a></td>
    </tr>
  </tbody></table>

<table cellspacing="0" cellpadding="0" width="250" border="0"><tbody>
    <tr height="250">
      <td valign="top" width="250"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekMD_UopXg-qqUThnQKj7pKVrbr-ffM-1YdBWbkOWSN7McnGplp5bax4we1fyeaz7BRCFSvTgSnIW47y67WHxeF7lHizwvgTP10o2gzIC3NEH3xR23W7UxawhdGk4b-8KH1aQPyPa_0eg/s250-Ic42/250x250.png" width="249" height="249" /></a></td>
    </tr>
  </tbody></table>

<table cellspacing="0" cellpadding="0" width="250" border="0"><tbody>
    <tr height="50">
      <td valign="top" width="50"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5wpA5AM0mVtxhBzcZKGv3iLYar3g1LRHbLbkJIi3paSIJ-Kdkcjw2eP-td7tTABin4L78rEZYNGyLVTku6YtFWew3n33054RABgLllA0U3HdfIHrLSW6DBDvVEJn4XTzH_SJCig7wg5x/s50-Ic42/50x50.png" width="49" height="49" /></a></td>

      <td valign="top" width="50"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5wpA5AM0mVtxhBzcZKGv3iLYar3g1LRHbLbkJIi3paSIJ-Kdkcjw2eP-td7tTABin4L78rEZYNGyLVTku6YtFWew3n33054RABgLllA0U3HdfIHrLSW6DBDvVEJn4XTzH_SJCig7wg5x/s50-Ic42/50x50.png" width="49" height="49" /></a></td>
      <td valign="top" width="50"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5wpA5AM0mVtxhBzcZKGv3iLYar3g1LRHbLbkJIi3paSIJ-Kdkcjw2eP-td7tTABin4L78rEZYNGyLVTku6YtFWew3n33054RABgLllA0U3HdfIHrLSW6DBDvVEJn4XTzH_SJCig7wg5x/s50-Ic42/50x50.png" width="49" height="49" /></a></td>
      <td valign="top" width="50"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5wpA5AM0mVtxhBzcZKGv3iLYar3g1LRHbLbkJIi3paSIJ-Kdkcjw2eP-td7tTABin4L78rEZYNGyLVTku6YtFWew3n33054RABgLllA0U3HdfIHrLSW6DBDvVEJn4XTzH_SJCig7wg5x/s50-Ic42/50x50.png" width="49" height="49" /></a></td>
      <td valign="top" width="50"><a href="http://bloghocam.blogspot.com/p/galeri.html"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5wpA5AM0mVtxhBzcZKGv3iLYar3g1LRHbLbkJIi3paSIJ-Kdkcjw2eP-td7tTABin4L78rEZYNGyLVTku6YtFWew3n33054RABgLllA0U3HdfIHrLSW6DBDvVEJn4XTzH_SJCig7wg5x/s50-Ic42/50x50.png" width="49" height="49" /></a></td>
    </tr>
  </tbody></table>

Kırmızı reklam gösterdiğim yerlere bannera tıklayınca açılacak sayfanın URL’sini yazmalısınız.
Mavi renkle gösterdiğim yerlere ise bannerın URL’sini yazmalısınız.

Farklı boyutlarda reklam alanı yaratmamızın nedeni farklı bütçelere hitap etmesi. Reklam alanlarını boyutları küçüldükçe fiyatları da azalacak şekilde aylık veya 3 aylık sürelerle kiralayabilirsiniz.

Okuyuculardan gelen istekler doğrultusunda paylaştı bu banner reklam alanı kodunu. Umarım faydalı olmuştur…

Dienstag, 1. September 2015

BH Blogger Arama Kutusu

Daha önce Blog Hocam’da kullandığım, HTML ve CSS kodları kullanarak oluşturduğum basit bir arama kutusu vardı. Onu kaldırıp yerine Google’ın kendi arama kutusunu koydum fakat eski arama kutusunun kodlarını isteyen çok arkadaş olduğu için buradan paylaşma ihtiyacı hissettim.

blogger arama kutusu

 Resimde gördüğünüz bu CSS arama kutusunu eklemek için Blogger kumanda panelinize giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izledikten sonra aşağıdaki kodları yapıştırıp kaydetmeniz yeterli olacaktır.


<div id='arama'>
<form action='/search' id='searchThis' method='get'>
<input id='searchBox' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' size='20' type='text' value='Aranacak kelime'/>
                  <input id='searchButton' type='submit' value=''/>
</form>
</div>
<style>
#arama {
  float:right;
  width:258px;
  padding-top:50px;
padding-bottom:30px;
padding-left:10px;
padding-right:-0px;
  margin:0 0 20px 0;
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRmN1P8NZnxxfTItwxVrDe4En_funYbDB-FPKjqUzg3qZzuXbQrKTf24p1SMfGnACM2h8vrbEyLUivoAfT164Akuf-9WqwTkZ5r-p_1ZRJRa6mh4dE8SlqW4Ptp5Lf-yj2ZlR2LBoDMNo/s271/s.png)  no-repeat 0px 0px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
  height:auto;
border:1px solid #656E75;
color:#000;
font-weight:bold;
}
#searchThis {
background: url("
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI4dSn23ynoADLhHA0oWVGPcbf7B5LT3q-A_ubMoqDoYzqJzcwZmT6mV7YT_HIy__m1gWsx5DDukOtF3Gdx0H6uYK7faHXpzk3tlgtqAJ5YPCj5pTWf8rJJSsRutTlNBJcDnhdJzUWkwg/s1600/search.png") no-repeat scroll 0 0 transparent;
display: inline;
float: right;
margin:0 50px 0 0;
height: 24px;
width: 212px;
padding:2px 0 0 2px;
}
#searchBox, #searchButton {
background: none;
border:none;
}
#searchBox {
width:158px;
color:#bbb;
font-size: 12px;
}
#searchButton{
width:42px;
padding:0px;
cursor:pointer;
}
</style>

Bu arama kutusu HTML ile oluşturulduğundan “Google Custom Serach” deki gibi akıllı değildir ve detaylı arama yapmaz. Aradığınız terim ile blogdaki terimin %100 eşleşmesi gerekir. Eğer görselliğe önem veriyorsanız ve çok fazla içeriğiniz yoksa bu arama kutusunu kullanabilirsiniz fakat işlevselliğe önem veriyorsanız ve blogunuzda çok fazla içerik varsa şuan Blog Hocam’da da olan  “Google Custom Search” ü kullanmanızı öneririm.

Mittwoch, 22. Juli 2015

Blogger Navigasyonlu Son Yazılar Eklentisi

Bu aralar bol bol JavaScript ve bu scriptlerin Blogger’a uyarlanarak widget haline getirilmiş kodlarını araştırıyorum. Ve yine farklı, işlevsel, şık bir eklentiyi sizlerin kullanımına sunmak istiyorum.

Bu Blogger eklentisini blogunuzun sidebarına kolayca ekliyorsunuz ve blogunuzdaki son yazıları (siz kaç tane isterseniz) bir tablo olarak gösteriyor. Bu tabloda yazılarda kullanılan görsellerin küçültülmüş hali ile ilk birkaç karaketerden oluşan (kaç karakter olduğunu siz belirleyebiliyorsunuz) metin yer alıyor. Eklentiyi özel ve paylaşmaya değer kılan tarafı ise navigasyonlu olması. Bu ne demek hemen açıklayayım;

Widgetı eklediğinizde blogunuzda son 5 yazı tablo olarak görünecektir. Okuyucuyu blogda tutabilmek ve eski yazılarınızı kolayca incelemelerini sağlamak için tablonun altında “Önceki – Başlangıç – Sonraki” gibi navigasyon linkleri var. Ziyaretçiler bu navigasyon linklerini kullanarak daha önceki yazıları da kolayca görüntüleyebilirler.

blogger navigasyonlu son yazılar eklentisi

Gelelim bu eklentiyi blogunuza nasıl ekleyeceğinize. Blogger kumanda panelinize giriş yaptıktan sonra Yerleşim > Gadget Ekle > HML/JavaScript yolunu takip edin ve açılan kutuya aşağıdaki kodları yapıştırın.

<style scoped='' type='text/css'>
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmb720LxnIiiDCpdFPgpiRrlGRHrTFlXMynyRrduPA4H0x1CRMuX03y2vrbzCEfmBq1BvdUNZuRe4o_Zojl7KsjXjY3g1Oq2kiAvEZ4_JL99TnXBPP4dbdfJ3RRmBeybBKizQeM5FEjLtv/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://bloghocam.blogspot.com";

    var charac = 40;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcU1k9UgpIWQS4_GCMS6OBb5SU8-b9qY-bHJsYUmq_BJN3szvKcbCG8VyY2d_G4NAdkVmYtJZQxsev6GAJRe1IG70uAiQrUFpkx_NM8YBH3FGP2GfknPq_dTL8euqbxBHPKP-pZ0hRyTwb/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Önceki</a>":"<span class='noactived previous'>Önceki</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Sonraki</a>":"<span class='noactived next'>Sonraki</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Başlangıç</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>

Kodlarda değiştirmeniz gereken tek yer blog url kısmı. http://bloghocam.blogspot.com yazan yere kendi blog adresinizi yazın yoksa BH’deki son yazıları gösterirsiniz :)

İsteğe bağlı olarak şu değişiklikleri de yapabilirsiniz,
5: Ana tabloda son 5 yazının gösterileceğini belirtir.
40: Tabloda yazıların ilk 40 karakterinin gösterileceğini belirtir.

Montag, 6. Juli 2015

Blogger'a Arşiv Tablosu Ekleme

Arşiv sayfaları ziyaretçilere tüm içeriğinizi tek bir yerden görme şansı verdiği için kullanıcı dostu ve oldukça faydalı sayfalardır. Bunun için ben de bir arşiv sayfası oluşturmuş ve bunu nasıl oluşturabileceğinizi paylaşmıştım.

Fakat benim paylaştığım arşiv sayfası tüm konu başlıklarını alt alta sıraladığı için yazı sayısı 1000’den fazla olan bloglarda kullanıcıların arşivi incelemesi biraz zor oluyordu. Bu yüzden Blogger’da tablo şeklinde bir arşiv sayfası oluşturulup oluşturulmayacağı ile ilgili bir araştırma yaptım ve Endonezya’lı bir arkadaşın aşağıda gördüğünüz projesine denk geldim.

Resimde de gördüğünüz gibi arşiv sayfasında blog yazılarınızda kullandığınız etiketler, sekme şeklinde tablonun sol tarafında alt alt sıralanıyor. Ve bu sekmelere tıkladığınızda o etikete ait yazılar listeleniyor. Böylece hem daha minimal hem de daha kullanıcı dostu arşiv sayfanız olacak.


Blogger arşiv tablosu ekle


Siz de Blogger blogunuzda böyle bir arşiv tablosu oluşturmak istiyorsanız Blogger kumanda paneline giriş yaptıktan sonra Sayfalar > Yeni Sayfa yolunu takip edin ve resimde gösterdiğim gibi aşağıdaki kodları sayfanın HTML bölümüne ekleyin.



blogger arşiv sayfası

<div id="tabbed-toc">
<span class="loading">Sayfa yükleniyor...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://bloghocam.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: true,
    showSummaries: true,
    numChars: 200,
    showThumbnails: true,
    thumbSize: 40,
    noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH6Jgx821qGe41c9qrf4oo63TZ6VBKjbB_DiapkzZKDioEZA4x9SjTW-pNMOVpZPSD58ihG1XJeAu2l05wymTbnkctnMDtNG0JyEW2jOQm8SGd_2A8m-Fwn-9wBu1fhEvYh7qbsL0IHMfK/s500/resimyok.gif",
    monthNames: [
        "Ocak",
        "Şubat",
        "Mart",
        "Nisan",
        "Mayıs",
        "Haziran",
        "Temmuz",
        "Ağustos",
        "Eylül",
        "Ekim",
        "Kasım",
        "Aralık"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0,
    sortAlphabetically: true,
    showNew: 7,
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>Yeni!</em>"
};
</script>
<script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script>
<style>
#tabbed-toc {
width: 99%;
margin: 0 auto;
overflow: hidden !important;
position: relative;
color: #222;
border: 0;
border-top: 5px solid #FC0204;
background-color: #1D1D1D;
-webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
display:block;
padding:5px 15px;
font:normal bold 11px Arial,Sans-Serif;
color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0;
padding:0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width: 24.8%;
float: left !important;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
  -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
background-color: #515050;
color: #FFF;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #FFFC03;
color: #222;
position: relative;
z-index: 5;
margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width: 75%;
float: right !important;
background-color: #F5F5F5;
border-left: 5px solid #FFFC03;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0; right:0; bottom:0;
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 11px;
color: #222;
line-height: 2.8em;
height: 30px;
padding: 0 10px;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color: #DBDBDB;
font-size: 10px;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#222;
color:#FFF;
outline:none;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none !important;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#222;
color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
color:#000;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>


Kodlarda kırmızı renkle gösterdiğim http://bloghocam.blogspot.com yerine kendi blog adresinizi yazmayı unutmayın!

Mittwoch, 10. Juni 2015

Blogger İçin Google Çeviri Eklentisi

İletişim formundan bana ulaşan bir okuyucum bloguna çeviri eklentisi eklemek istediğini ve bu konuda yardımcı olup olamayacağımı sordu. Kendisine Google çeviri eklentisini bloguna nasıl ekleyeceğini kısaca anlattım ama başka bloggerların da işine yarayabileceğini düşündüğüm için burada aha detaylı anlatmak istedim.

Google Çeviri Eklentisi Nedir? Ne İşe Yarar?

Google çeviri eklentisi blogunuzu bir şekilde ziyaret eden yabancı kullanıcılar için siteyi onların diline çevirerek blogu rahatça okumalarını sağlar. 

Bazı terimler global olduğu için her ülkeden kullanıcı bu terimleri Google’da arayabiliyor. Örneğin BH’ye FeedBurner ve Google Analytics ile  ilgili aramalardan pek çok yabancı misafir gelebiliyor. Onları blogda tutmak Google çeviri eklentisini bloga eklemek iyi bir çözüm olabilir.Siz de blogunuza her dilde çeviri yapabilen bir çevirmen eklentisi eklemek isterseniz aşağıdaki adımları takip edin.


1. https://translate.google.com/manager/website/ adresine giderek “Hemen şimdi web sitenize ekleyin” butonuna basın.


blogger çeviri eklentisi


2.Web Sitesi URL’si” kısmına blogunuzun adresini yazın ve “Web sitesinin dili” kısmından Türkçe’yi seçerek “Sonraki” butonuna basın.

google çeviri eklentisi


3. Çeviri dilleri olarak tüm dilleri veya listeden istediğiniz dilleri seçebilirsiniz. Görüntüleme modu olarak istediğiniz eklenti modunu seçtikten sonra Gelişmiş seçeneklerden ilk kutucuğu işaretlemenizi öneririm. Eklenti ayarlarını tamamladıktan sonra Kodu Al butonuna basın.

bloggera çeviri ekleme



4. Eklentinin kodları hazır. Kutu içerisindeki kodları kopyalayın ve Blogger kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek yapıştırın.

google translate widget


Tebrikler! Çeviri eklentiniz hazır.

Freitag, 5. Juni 2015

Blogger Jquery Açılır/Kapanır Panel Eklentisi

Blogunuza görsellik ve işlevsellik katacak yeni bir Blogger eklentisi daha paylaşmak istiyorum. Aşağıda detaylarını bulabileceğiniz Jquery Sliding Panel yani açılır kapanır panel eklentisi ile ziyaretçilerinize güzel bir kullanıcı deneyimi sunacak, aynı zamanda blogunuza çeşitli faydalar sağlayacaksınız.

Eklentinin nasıl ekleneceğine geçmeden önce özelliklerinden ve ne işe yaradığından bahsetmek isterim.

jquery blogger panel


Blogger Jquery Açılır/Kapanır Panel Eklentisinin Özellikleri

Eklentiyi ekledikten sonra bloga girdiğinizde sayfanın en üstünde bir bar gözükecek ve üzerinde “Merhaba” karşılama mesajı ile paneli açıp kapayan bir buton olacak. Bu butona tıklayarak paneli atığınızda pek çok özellik barındıran harika bir menü göreceksiniz. 3 sütuna bölünmüş bu menüde şunlar var:

- “Hoşgeldiniz” mesajı, profil resmi, yazar hakkında kısa bilgi ve blog içi arama yapılmasını sağlayan bir arama kutusu.

- Ziyaretçileri İitediğiniz yazı veya sayfalara yönlendireceğinz linkler bölümü.

- Blogunuzu e-mail, Rss, Facebook, Twitter ve Google+ ile takip etmelerini sağlayacak bir abonelik bölümü.




Blogger Jquery Açılır/Kapanır Panel Eklentisini Bloga Ekleme
Bu harika eklentiyi blogunuza eklemek için şu adımları takip etmelisiniz:

1. Adım: Blogger kumanda panelinde Şablon > HTML’yi Düzenle yolunu takip edin ve </head> kodunun üzerine şu kodları yapıştırın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>

2. Adım: ]]></b:skin> kodunun üzerine aşağıdaki kodları yapıştırın.

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNj27fLHVgus3NVp6p82DySW8PEG_2tgT0IvahA17QmkEYzXDtnjJyJGRZ2LkRxxfIpmSHag1eCSyiACHEPJXRhosc46ogVKNx13IF2DOK5I_IgQZDk_uD7h_2MUKgTYCsVSXJ_KgGuoUh/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtm1HTyoQOy62djPw2lloAF2AXgPsKOIisycc_5HZ-hQ-EZFkGyQXwZvfnZe8dkFYKv34cnPo5EOnJvu19Jr2RwvM6PlykdNnS21tmmFOu5ekg3jmmsDFvMGjaTmk-i54CSeLY_Q0R2LA/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7VEVDfY99IMXrWHNJcu6KeftW7OMBgJn7pRsy7ApVmgEBJ3TBXYlA31DmmdCl9rtJGeAH6Ww18tAisheXx_EgplxMAWWaAsBsizUMdQK9uKa8nMEcSGKzON30XRwxd2FTuYVD-xx50S92/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaKQ2CirOTNT4K_qON9Bj4wGkRL6iOGjiZmQCmRGETHLRWn4iSSGvkFhq-A-RVOdBRlzEhWGcWDicQ4N_RBNdKEt-KvR8i7viuvhjDaTffnqYXRZ6onRgwOelQmKIKl31N2SvGwHAlMM-Z/s1600/sliding-panel-tab.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyXV6rnR-8UBBQ-CQaS_5ZRyhgg0lf2UM_K3QgspLoI1aRBBHOj1JVug-jxvSzVFnjjRXYoPYPqySNGkt_JWAUHBzHx79sRiemtpzaBHeoATfFZXLwsU5HRz4Xi9b0-ZLeLbVotBkOQQh/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6kcDuiPG05F3xP7XyrTGU0PnMCAQgQb0hZIpavHOu_R6euZo1_q_9Iir5xEwRV8i78sCX8bc76S2WRxuiRosi7QW_5JEIV-U2NXG8YKotcBpqiyYp361Ht0bKBhw4IIhUqL7yXbGjEfem/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyXV6rnR-8UBBQ-CQaS_5ZRyhgg0lf2UM_K3QgspLoI1aRBBHOj1JVug-jxvSzVFnjjRXYoPYPqySNGkt_JWAUHBzHx79sRiemtpzaBHeoATfFZXLwsU5HRz4Xi9b0-ZLeLbVotBkOQQh/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6kcDuiPG05F3xP7XyrTGU0PnMCAQgQb0hZIpavHOu_R6euZo1_q_9Iir5xEwRV8i78sCX8bc76S2WRxuiRosi7QW_5JEIV-U2NXG8YKotcBpqiyYp361Ht0bKBhw4IIhUqL7yXbGjEfem/s1600/button-close.png) no-repeat left -19px;}
#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px;
color: #fff;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #cc3333;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: #F1921A;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-align: center;
cursor: pointer;
border: 1px solid #fff;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyOLrkxYMZN0AJ9LH9IRP3AfhKc_H9FaI9yCN7PeJQstdwv6YxXe5Kchee4lliublRuQtI7xZgHXexNZ8GpqpyR9go2FtQBA71C2OMwhRgD8-uhNA6CeBgkeQs09HbOceb7AxCX2Csk3Pm/s24/bullet-star-icon.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}

#search-box22{
margin-top: 20px;
}

#search-box22 input[type="text"] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search-box22 input[type="text"]:focus {
width: 190px;
}

.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}

3. Adım: Şablonda <body> veya <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> kodlarından hangisi varsa onun altına aşağıdaki kodları yapıştırın. Kendinize göre düzenlemeniz gereken yerleri kırmızı renkle gösterdim.

<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>

<div class='left' style='width:240px !important'>
<h4>Blog Hocam’a Hoşgeldiniz!</h4>
<div class='about-author'>
<div class='authorbox'>
  <div class='authorinfo'>
<img src='http://lh5.googleusercontent.com/-kdgXVUeKv8o/AAAAAAAAAAI/AAAAAAAAGKo/To7qbwbiwKo/s80-c/photo.jpg'/>
<h3 class='boxtitle'>Ben Serdar</h3>
<p>Blog Hocam’ın kurucusu ve tek yazarıyım. Blog yazarlığı, SEO, sosyal medya, dijital pazarlama, girişimcilik ve kişisel gelişim konularıyla ilgileniyor ve bu konularda yazılar yazıyorum.</p>
</div>
</div>
</div>
<p align='right' style='margin-top: 10px;'>Aradığınız birşey mi var?</p>
<form action='/search' id='search-box22' method='get'>
  <input name='q' placeholder='Ara...' size='40' type='text'/>
</form>
</div>

<div class='left' style='width:320px !important'>
<h4>Öne Çıkan Yazılar</h4>
<div id='sliding-panel'>
<ul>
<li><a href='http://bloghocam.blogspot.com/2012/06/acemiler-icin-google-analytics-rehberi.html'>Google Analytics Rehberi</a></li>
<li><a href='http://bloghocam.blogspot.com/2014/03/15-ucretsiz-online-fotograf-editoru.html'>Fotoğraf Editörleri</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/03/adm-adm-iyi-bir-blog-sitesi-kurmak.html'>Adım Adım Blog Kurmak</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/12/az-zamanda-cok-ziyaretci-getiren-siteler.html'>Hit Getiren Siteler</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/09/affiliate-marketing-nedir.html'>Affiliate Marketing</a></li>
<li><a href='http://bloghocam.blogspot.com/2014/03/blog-yazarak-para-kazanmak-mumkun-mu.html'>Blogdan Para Kazanmak</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/01/bloglar-icin-ziyaretci-trafigi-rehberi.html'>Ziyaretçi Trafiği Rehberi</a></li>
</ul>
</div>

<div id='sliding-panel2'>
<ul>
<li><a href='http://bloghocam.blogspot.com/2013/08/google-adsense-reklamlar-icin-baslangc.html'>Google AdSense Rehberi</a></li>
<li><a href='http://bloghocam.blogspot.com/2014/01/blog-yazarlar-icin-swot-analizi.html'>SWOT Analizi</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/07/link-insaas-calsmalarnda-dikkat-edimesi.html'>Link İnşası</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/11/analiz-icin-kullandgm-seo-araclar.html'>SEO Araçları</a></li>
<li><a href='http://hur.so/dbzjxe'>Trafik Hayattır</a></li>
<li><a href='http://hur.so/dbznw7'>Galaxy S6</a></li>
<li><a href='http://hur.so/dbzvke'>LG G4</a></li>
</ul>
</div>
</div>

<div align='center' class='left right'>
<h4>Blog Hocam’ı Takip Edin!</h4>
<p style='padding:0px 30px;'>Yeni yazıların e-mail adresinize gelmesini istiyorsanız kutuya mail adresinizi yazıp abone olun.</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BlogHocam' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='tr_TR'/>
<input class='button-register' type='submit' value='Abone Ol'/></form>

<div align='center' style='clear: both;'>
<a href='http://feeds.feedburner.com/BlogHocam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVllB_stALlzyz2iFEiiLoBdEMD0fqXjHHEnTuPltzaFChRMzWvo-QAyOIJxt97MxNQ_17CiIxaG5YDEAutgYKaTCjt9-E4sX1QiyTaKgLZrzeLG2OxnSzjOsFqY831XGBeEaiXArfu2eA/s48/RSS-icon.png' style='padding:5px;' title='RSS Beslemeleri' width='32'/></a>
<a href='http://www.facebook.com/bloghocam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinOB_T9LLHQJCaQwqNCRZrqMBFfa1oMPR17_NaP28POwnPu-AcoVw6Bzl55f5c70GLP_9GRdQEKuoq_QTzdEcBdGyiqsyFU_3948fTw2qtYWxDBzu9-Om56AMIcRp8_Hcc41VEvP-GtC8/s48/Facebook-icon.png' style='padding:5px;' title='Facebook Beğen' width='32'/></a>
<a href='http://twitter.com/bloghocam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY5AoSvWxCHqxSLlQ_ayBpQI25IkDWlMZyuSZ0Efm1OiqxduGGfpWiGBsIB9rxwojdbQk79UkBa0CIz0PwmKuORhbcKRTPnpxFZbWNfH3Vt7parly5E8fAipzQ_31X2ncHLuiD6aZGjRb1/s48/Twitter-icon.png' style='padding:5px;' title='Twitter Takip' width='32'/></a>
<a href='https://google.com/+BloghocamBlogspot'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_I1HkG_MbTCeXxb6VXnNQ53shvUBbRJ1TJaUMRcFDlH5P3EBd-03RtWQoWU9v9jnOGrVbDGRTWYgrGPqMaHvDTzvoatFea19i78QCBocM6yeTQascmo-0KrgjCpMHljSH01gRyZx6TRub/s48/Google-plus-icon.png' style='padding:5px;' title='Google+ Takip' width='32'/></a>
</div>

</div>
</div>
</div>

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Merhaba!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Menüyü Aç</a>
<a class='close' href='#' id='close' style='display: none;'>Menüyü Kapat</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

Şablonu önizleme yapın, eğer bir sorun veya hata mesajı yoksa kaydedin ve blogunuzu tekrar ziyaret edin.

Kodları bloga ekleme, düzenleme veya eklentiyi çalıştırma ile ilgil sorunlar yaşrsanız yorum bölümünden sorabilirsiniz.