Blogger 125x125 Reklam Alanı Oluşturma

Kaliteli, özgün içerik paylaşan ve google sıralamasında yükseklerde olan blogger sahipleri, sitelerine çeşitli şekilde reklam alıp sitelerinden para kazanmayı hedefliyor. Bugün sizlere blogger sitenizde sidebar alanına 125x125 reklam alanı eklemeyi paylaşacağım, kurulum oldukça basit.






Blogger 125x125 Reklam Alanı Ekleme

Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz ve aşağıda ki kodu açılan sayfaya yapışırıyoruz.

<center><table border="1"><tr><td width="125" height="125" align="center">
<a href="http://blogkaynagi.blogspot.com.tr/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JhJT12Rs0M3rHjRv4LpKqItlASU48Fc_9b835sZ07lVgpOvTER9Y_jfTws4lKX2jYC-CrN6V9lf-GoIIQFVGYfIzaOBpzU9y4cAsNeXjEDe812yPFPdW6T2dnXQ9b1ebYRNJhnAKldM2/s1600/125x125.gif"/></a>
<td width="125" height="125" align="center"> <a href="http://blogkaynagi.blogspot.com.tr/" rel="external"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JhJT12Rs0M3rHjRv4LpKqItlASU48Fc_9b835sZ07lVgpOvTER9Y_jfTws4lKX2jYC-CrN6V9lf-GoIIQFVGYfIzaOBpzU9y4cAsNeXjEDe812yPFPdW6T2dnXQ9b1ebYRNJhnAKldM2/s1600/125x125.gif"/></a>
</td></td></tr><tr>
<td width="125" height="125" align="center">
<a href="http://blogkaynagi.blogspot.com.tr/" rel="external"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JhJT12Rs0M3rHjRv4LpKqItlASU48Fc_9b835sZ07lVgpOvTER9Y_jfTws4lKX2jYC-CrN6V9lf-GoIIQFVGYfIzaOBpzU9y4cAsNeXjEDe812yPFPdW6T2dnXQ9b1ebYRNJhnAKldM2/s1600/125x125.gif"/></a> </td>
<td width="125" height="125" align="center">
<a href="http://blogkaynagi.blogspot.com.tr/" rel="external"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JhJT12Rs0M3rHjRv4LpKqItlASU48Fc_9b835sZ07lVgpOvTER9Y_jfTws4lKX2jYC-CrN6V9lf-GoIIQFVGYfIzaOBpzU9y4cAsNeXjEDe812yPFPdW6T2dnXQ9b1ebYRNJhnAKldM2/s1600/125x125.gif"/></a> </td></tr></table></center>

125x125 Reklam Alanı Ayarları

• Reklam vermek istediğiniz sitenin linkini http://blogkaynagi.blogspot.com ile resmini ise "<img src" kodu arasında bulunan resim linki ile değiştirebilirsiniz.

• Resim boylarını değiştirmek için width ve height ayarlarını kullanabilirsiniz.

Blogger Resimleri Otomatik Boyutlandırma

Bir çok blog kullanıcısı sitelerinde bulunan resimlerin orantılı olması gerektiğini düşünüyor çünkü bu site görünümü açısından gelen ziyaretçilere olumlu bir fikir veriyor. Bu kod genişlik ayarını size bırakırken yüksekliği otomatik olarak ayarlıyor. Bunu yaparken orjinal resim görüntüsünün oranını koruyor.

Bütün Resimleri Otomatik Boyutlandırma

Blogger Yönetici Paneline giriyoruz;

Şablon > Özelleştir > Gelişmiş sekmesine tıklıyoruz,

Açılan sayfaya aşağıda ki kodu yapıştırıyoruz. Boyutlandırmayı kendinize göre ayarlayabilirsiniz, ayrıca yükseklik ayarının otomatik olmasını istemiyorsanız bir değer atayabilirsiniz.

.post-body img { width: 400px; height: auto; } .post table.tr-caption-container img { width: 400px; height: auto; }

Blogger Resimli Son Yorumlar Eklentisi

Blogger son yorumlar eklentisi bir çok blogger kullanıcısı için son derece yararlı bir eklentidir. Son yorumlar eklentisini kullanmak seo'ya oldukça faydalıdır. Blog trafiğinizi ve bounce rate yani hemen çıkma oranını azaltır. Gelelim popüler ve şık son yorumlar eklentisini eklemeye;

Blogger Avatarlı Son Yorumlar Eklentisi


Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz

Açılan pencereye aşağıdaki kodu yapıştırıp, kaydet'e basın işlem tamamdır.

Kod:

<style type="text/css">
ul.btt_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.btt_recent_comments li {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border: 2px solid transparent;
}
.btt_recent_comments li:hover {
    -webkit-transform: scale(1.2) translate(15px);
    -moz-transform: scale(1.2) translate(15px);
    -ms-transform: scale(1.2) translate(15px);
    -o-transform: scale(1.2) translate(15px);
    transform: scale(1.2) translate(15px);
    box-shadow: 0 0 20px 1px #aaa;}
.btt_recent_comments li {
    background: none!important;
    margin: 5px!important;
    padding: 5px!important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.btt_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.btt_recent_comments li img {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
.btt_recent_comments li span {
    margin-top: 3px;
    color: #666;
    display: block;
    font-size: 12px;
    line-height: 1.4;
}

#btt_recent_comments .info {
    text-align: right;
    height:1.2em!important;
    overflow:hidden;
    line-height: 1em!important;
}
#btt_recent_comments .info a {
    font-weight: bold;
    font-size: 11px;
    color: #AAA;
    display:none;
}
#btt_recent_comments:hover .info a {
    display:inline!important;
}
</style>



<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 45,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More ?",
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidCXaDMwvTRCJc8_jv8JkGqpCU4h9lUO-VoITe3Xt9KvlUMeKhlZic4udpRC2dKU3afViTG61qqRkbKAlRXggDpoDuHL2mBfKR9VeJBhUTXmTEFTRdAyzcnS0LwECtpAYKp16G349e-e5u/s320/avatar.png",
 hideCredits = true;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<R J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize|var||else|||entry|indexOf|com|true||http|avatarClass||defaultAvatar|img|showMorelink|replace|roundAvatar|hideCredits|||span|href|characters|showAvatar|authorName|commentlink|typeof|undefined|btt|length|link|moreLinktext|numComments|blogblog|gif|class|hideCSS|gravatar|author|src|feed|s1600|false|ul|s220|s512|for|www|rounded|break|bp|blogspot|li|png|div|commHTML|btt_recent_comments|display|image|b16|function|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI|QYau8ov2blE|btt_blogger_logo|avatar|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|btt_openid_logo|blank|avatarRound|write|avatarImage|alt|width|height|40|name|content|60|ig|substring|hellip|raquo|gd|none|style|font|size|10px|block|text|align|right|Widget|by|SoftGlad|com|SoftGlad|document|AAAAAAAABYY'.split('|'),0,{}))
//]]>
</script>
<script src="/feeds/comments/default?alt=json&amp;callback=btt_recent_comments&amp;max-results=5" type="text/javascript"></script>

<div id="btt_recent_comments">
<div class="info"><a rel=”external” href="http://blogkaynagi.blogspot.com.tr/2013/08/blogger-resimli-son-yorumlar-eklentisi.html" title="Widget Info">Sitene Ekle</a></div></div>

Eklenti Ayarları

• Son yorumlar eklentisinin normal ayarları 5'tir. Daha fazla yorum gözükmesi için aşağıda ki kodları eklenti kodlarından arayıp bulun;

numComments  = 5,   Değerini değiştirin 

amp;max-results= 5   Yorum sayısının değişmesi için değerlerin aynı olması gerekiyor.

• Avatarın gözükmemesi için aşağıda ki true değerini false ile değiştirin.

showAvatar  = true,

• Avatar boyutu

avatarSize  = 45,

• Yorumlarda toplam kaç karekter gözümesini istiyorsanız aşağıdaki değeri değiştirin.

characters  = 40

Blogger Siteye Türk Bayrağı Eklemek

Merhaba arkadaşlar

Bugün sizlerle blogger sitenizin sol üst köşesine yan tarafta gördüğünüz gibi oldukça şık Türk Bayrağı ekleme kodunu paylaşıcam.

Siteye eklemek oldukça kolay;

Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz

Aşağıda ki kodu açılan pencereye yapıştırıp, kaydet'e basın işlem tamamdır.

<!doctype html><style type="text/css">div.fixed-position{_position:absolute;}div.fixed-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div class="blogkaynagi turk_bayragi" style="width:135px;height:135px;background-image:url(http://img13.imageshack.us/img13/2687/yomoho.png)"> <style>.kdrs:hover{left:0px !important;opacity:0.70 !important;filter:alpha(opacity=70) !important;}</style><style type="text/css">div.blogkaynagi{position:fixed;z-index:3000;}div.turk_bayragi{top:0px;left:0px;}</style></div></!doctype>

JavaScript Dosyalarını Google Code'a Yüklemek

Merhaba arkadaşlar 

JavaScript, Css gibi dosyalarını Google-Code eklemek istemezmisin ? Bugün sizlere Google Code sunucusuna Javascript gibi eklentilerin eklenmesinden bahsedeceğim.
Öncelikle Google Code'dan bahsedelim.

Google Code nedir ? Nasıl Proje Oluşturulur ?

Google'ın açık kaynaklı yazılımları desteklemek ve google ilgili programların geliştirilmesi için api ve kaynak kodu yayınlanan google hizmeti. Ayrıca projenizi google serverlerinde host edebilir wiki ve svn kullanılmasını sağlayabilirsiniz. Google Code JavaScript, Python, AJAX, MySQL, PHP gibi tüm açık kaynaklı yazılımları desteklemekte. Tek yapmanız gereken Google Code'a kayıt olup bir proje oluşturmak. JavaScript Dosyalarını Google Code'a Yüklemek ve Çalıştırmak - Google Code Nasıl Kullanılır

Öncelikle Google Code adresine girip Google hesabımızla sisteme giriş yapıyoruz.

Adım 1: Giriş yaptıktan sonra ana sayfanın aşağısında bulunan Create New Project'e tıklıyoruz.

Adım 2: Açılan ekranda gerekli alanları dolduruyoruz.

Project Name: Proje İsmi

Project Summary: Proje hakkında kısa bilgi

Description: Proje ile ilgili açıklama alanı

Version Control System: Subversion seçiyoruz

Source Code License: İstediğinizi seçebilirsiniz

Project Labels: Etiketler seçsenizde olur seçmesenizde

Doldurduktan sonra Create Project diyip devam ediyoruz.

Adım 3: Google Code Proje ana sayfanız açılacak. 

Açılan sayfada yukarıda bulunan sekmelerden Source sekmesine ardından Browse seçeneğine tıklıyoruz.

Ardından dosyamızı yüklemek için Upload butonuna tıklıyoruz.

Adım 4: Bilgisayarımızda bulunan Javascript dosyasını seçtikten sonra  gerekli alanları doldurup commit diyoruz.

İşlem tamamdır. JavaScript dosyamız Google Code sunucusuna yüklendi. Açılan Sayfada view raw file'a Tıklayarak kodun bulunduğu dizine gidebilir JavaScript adresini blogunuzda kullanmaya başlayabilirsiniz.

Örnek Kod: https://bilgici.googlecode.com/svn/bilgicinfo-resimli-benzer-yazilar.js

Blogger Genişletilebilir Son Yorumlar Eklentisi

Bu gün sizlerle genişletilebilir son yorumlar eklentisini paylaşıcam, Aşağıda ki Resim de görüldüğü üzere yapılan yorumlar gizlenip tekrar gösterilebiliyor. Tek bir yoruma bakmak için başında ki -/+ butonuna tıklamanız, Tümünü görmek için ise Show All'a tıklamanız yeterli olucaktır. Yorumları gizlemek için Hide all butonunu kullanabilirsiniz.

Blogger'a Genişletilebilir Son Yorumlar Eklentisi Ekleyin

 Adım 1

Blogger Kumanda Penelinden > Yerleşim > Gadget Ekle'ye Tıklıyoruz.

Adım 2

Açılan Pencerede HTML/JavaScript Widgetine Tıklayın.

 

Adım 3:

Açılan HMTL/JavaScript penceresine aşağıdaki kodu yapıştırın.

<style type="text/css" media="screen">
.row-aa {        background: #f2f2f3; }
.row-bb {        background: #F8F5F1; }
.row-div {  
  margin:0px; 
  padding:5px; 
}
.comment-header { 
  font-size:0.9em; 
//  border:1px solid #E0E0E0; 
//  background-color:#F3F3F3; 
  padding:4px; 
  margin-top:10px; 
  margin-bottom:5px; 
}
.comment-box {
  margin:0px;
  padding:0px;
  font-size:0.9em;
  height:500px;
  overflow:auto;
}
.comments1  {  
//  background: #F3F3F3; 
  padding:3px; 
  border-left:1px dashed #A6A6A6;
  color: #888888;
  font-style: italic;
  padding-top:4px;
  margin-bottom:5px;
}
.comment-footer {
  text-align:center;
  font-size:0.9em;
  padding:4px;
  margin-top:5px;  
}
</style>

<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript"  src="http://blogkaynagi.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://blogkaynagi.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>

</div>

Not: Mavi renk http://blogkaynagi.blogspot.com ile belirtilmiş olan yeri sitenizin adresiyle değiştirin ve işlem tamam.

Keyfini çıkarın:)

Blogger Yorum Formunu Özelleştirin.!

Blogger Yorum Kutusu Değiştirme

Aşağıda ki resimde görüldüğü gibi bu yazımda blogcular için kendi kullandığım yorum kutusu kodunu paylaşağım. Oldukça kullanışlı olan bu yorum panelinde yapılan yorumu yanıtlama gibi seçenekte bulunmakta.

Dikkat:! Blogunuza kodu eklemeden önce yedek almayı unutmayın !

1. Adım 
Kumanda Paneli  > Şablon > Html'yi Düzenle'ye geliyoruz.

2.Adım
Ctrl+F ile Comments seçeneğini buluyoruz ve aşağıda ki kod ile değiştiriyoruz.

Yorum Kutusu Özelleştirme:

Arka plan: Kullanılan yorum kutusunun arka plan görüntü rengini değiştirmek için kod içinde bulunan #d0cce4 kodunu istedizğiniz renk kodu ile değiştirebilirsiniz.

Butonlar: Butonların rengini değiştirmek için ilk başta bulunan #FA6900 kodunu istediğiniz bir renk kodu ile değiştirebilirsiniz.

/* Comments ----------------------------------------------- */ /*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/ .comments .comment .comment-actions a {background:#FA6900;border:1px solid #000;cursor:pointer;color:#ffffff;padding:3px 3px; margin-right:10px;font:10px sans-serif;} .comments .comment .comment-actions a:hover {text-decoration: none; background:#FF5C59; border:1px solid #000;} #comments{overflow:hidden} #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{background:#d0cce4;} #comments h4,.comments .user a,.comments .continue a{font-size:14px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d0cce4;border-right:20px solid transparent;width:0;height:0;line-height:0} #comments .avatar-image-container img{border:0} .comment-thread{color:#111} .comment-thread a{color:#000} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#FA6900;} .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTn20uAfOMAZ_pTNFxEyhonfiqwyGjju6V4dsct-b613hYTHO9MThDZLcWj6tSQm6X_v5Z4bLyE63fyNDMrXklOanDis0hjlECP4iie084kpu5DJ8tTFuKrdf8cpmbtPLsMexT3GNe1gs/s36/yazar.png);width:36px;height:36px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left:0px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:0px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a{padding:10px 0;text-align:center} .comment .continue{display:none} #comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%} /*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/