Showing posts with label Blogger Eklentileri. Show all posts
Showing posts with label Blogger Eklentileri. Show all posts

Wednesday, August 3, 2016

Blogger İçin Facebook Messenger İletişim Eklentisi

Blog yazmanın en keyifli taraflarından biri yeni insanlarla tanışmak, onlarla iletişim kurmak, bir şeyler paylaşmak. Bunu yaparken faydalandığımız şey araç ise çoğunlukla blog yazılarının altındaki yorum bölümleri ve iletişim formları. Fakat bu araçlar ile anlık iletişim kurmak pek mümkün değil ve sabırsız ziyaretçiyi bloga bağlamak için çabuk reaksiyon göstermek oldukça önemli.

Ülkemizde milyonlarca aktif kullanıcısı olan Facebook’un anlık iletişim ile ilgili web sitesi sahiplerine sunduğu çok güzel çözümler var. Bunlardan biri de bloga ya da web sitesine eklenen, Facebook hesabı olan herhangi bir kullanıcının size anlık mesaj göndermesini sağlayan eklenti.

Facebook messenger eklentisi


Bu Blogger Facebook eklentisini blogunuza eklediğinizde sağ alt köşede “Facebook’tan mesaj gönder” notu gözükecek. Ziyaretçiler buraya tıkladığınızda bir mesaj penceresi açılacak ve buraya yazacakları mesajlar sizin Facebook sayfanızdaki mesajlar bölümüne düşecek. Eğer o sırada çevrimiçi iseniz anlık yazışarak kolayca iletişim kurabileceksiniz. Ziyaretçi sizin vereceğiniz cevapları blogdaki Facebook mesaj penceresinden değil kendi messengerında görecek. Yani bu eklenti bir sohbet değil iletişim formu niteliğinde.

Facebook sayfanızdaki beğeni sayısını da arttıracak bu Eklentiyi blogunuza eklemek için Blogger kumanda panelinize giriş yaparak Yerleşim > Gadget Ekle > HTML/JavaScript Gadget diyerek aşağıdaki kodları yapıştırmanız yeterli.

<style type="text/css">
#b-c-facebook .fbchat_box,#chat_f_b_smal,#f_bt_start_chat{background:#3a5897}
#fbchat_box{padding-right:15px;max-width:210px;max-height:50px;display:block;transition:all .3s}
#b-c-facebook .f-chat-conent .chat-single a,#chat_f_b_smal{font-family:Arial,sans-serif}
#b-c-facebook .fbchat_box,#chat_f_b_smal{text-shadow:0 1px 0 rgba(0,0,0,.1);background-repeat:repeat-x;background-size:auto;background-position:0 0;text-decoration:none}
.chat_f_vt{position:fixed;right:10px}
#chat_f_b_smal{padding:0 10px;cursor:pointer;width:90px;color:#fff;height:38px;line-height:38px;background-color:#3a5897;border:0;margin-right:12px;font-size:14px;z-index:999999999;bottom:0;border-top-left-radius:5px;border-top-right-radius:5px;bottom:-400px;transition:all .3s;text-align:center;display:block}
#chat_f_b_smal:hover{background-color:#3B5998;opacity:1}
#b-c-facebook{margin-right:50px;bottom:0;z-index:9999999999;transition:all .3s;width:250px;height:auto;max-height:375px;min-height:38px;box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden;display:block}
#b-c-facebook .f-chat-conent{float:left;width:100%;height:335px;overflow:hidden;display:none;background-color:#fff;position:relative}
#b-c-facebook .f-chat-conent .chat-single{float:left;position:absolute;bottom:0;left:0;background-color:#fff;line-height:25px;color:#fff;width:100%}
#b-c-facebook .f-chat-conent .chat-single a{float:left;text-decoration:none;margin-left:10px;color:#0C5BB5;font-size:12px}
#b-c-facebook .f-chat-conent .chat-single a:hover{color:#F60}
#b-c-facebook .fbchat_box label{width:185px}
#b-c-facebook .f-chat-conent .chat-single label{float:right;color:silver;margin-right:5px;font-size:12px;font-family:Arial}
#b-c-facebook .fbchat_box,#b-c-facebook .fbchat_box label{line-height:20px;margin:0;cursor:pointer;font-family:Arial,sans-serif;font-size:14px}
#b-c-facebook .f-chat-conent .chat-single i{color:#0C5BB5}
#b-c-facebook .f-chat-conent .fb-page{margin-top:0;float:left;height:310px}
#b-c-facebook .fbchat_box{float:left;padding:0 25px;padding-left:15px;width:250px;color:#fff;height:38px;line-height:38px;background-color:#3a5897;border:0;z-index:9999999;margin-right:12px}
#b-c-facebook .fbchat_box label{position:absolute;top:10px}
//Widget by www.bloggerspice.com
.title-f-chat-icon{margin-left:-10px}
#t_f_chat{float:left;position:absolute;right:15px;top:-5px}
#t_f_chat a{color:#fff;font-size:17px;font-family:verdana;text-decoration:none}
#t_f_chat a:hover i{color:#ff0;text-decoration:none}
.chat-left-5{margin-left:2px}
#start_chat{position:absolute;width:248px;height:239px;top:70px;left:0;background-color:#fff;padding:10px;float:left;display:none}
#start_chat em{font-size:11px;color:gray}
.msg_b{color:#434a54;width:80%;word-wrap:break-word;overflow:hidden;font-family:Arial,sans-serif;font-size:14px;background:#edeef1;padding:10px;min-height:13px;margin-bottom:5px;position:relative;margin:5px;border-radius:5px;border:1px solid #dfe3e9}
#close_chat{opacity:0.5}
#close_chat:hover{opacity:1}
.msg_b a{text-decoration:underline;color:#01509E}
#f_bt_start_chat{margin:auto;background-color:#3a5897;border-radius:3px;color:#fff;font-family:Arial;font-size:14px;font-weight:bold;padding:9px 35px;text-decoration:none}
#f_bt_start_chat:hover{text-decoration:none;opacity:0.8}
#start_chat p{margin-top:30px}
#fb_alert_num{background-color:#ff0;padding:0 7px;color:red;border-radius:40px;font-size:13px;font-family:Arial;font-weight:700;position:absolute;right:55px;top:12px;height:20px;line-height:20px;display:none!important}
.hide_chatbox{display:none}
#f_enter_3{margin-top:30px}
</style>

<script>
//<![CDATA[
function check_fist_vist_f(){var _=f_read_cki("check_fist_vist_f");(0==_||""==_)&&(fb_eshow("f-chat-conent"),f_create_cki("check_fist_vist_f","1",1),f_create_cki("f_chat_open","1",1))}
function close_chat(){fb_ehide('b-c-facebook'),f_create_cki('close_chat',1,1),$('body').find('.zopim').remove(),fb_eshow('chat_f_b_smal'),on_playsound('click')}
function open_chat(){f_create_cki('close_chat','0',1),fb_eshow('b-c-facebook'),fb_eshow('f-chat-conent'),fb_ehide('chat_f_b_smal')}
function f_bt_start_chat(){f_create_cki('f_bt_start_chat','1',10),fb_ehide('start_chat'),fb_ehide('fb_alert_num'),on_playsound('click')}
function f_c_start_chat(){var t=f_read_cki('f_bt_start_chat');0==t||''==t?(fb_eshow('start_chat '),fb_eshow('fb_alert_num'),f_chat_step()):(fb_ehide('start_chat'),fb_ehide('fb_alert_num'))}
function b_f_chat(){var t=f_read_cki('f_chat_open');0==t||''==t?(fb_eshow('f-chat-conent'),f_create_cki('f_chat_open','1',1)):(fb_ehide('f-chat-conent'),f_create_cki('f_chat_open','0',1)),on_playsound('click')}
function f_ck_chat(){check_fist_vist_f();f_c_start_chat();var t=f_read_cki('close_chat');if(''==t||0==t||'0'==t){fb_eshow('b-c-facebook'),fb_ehide('chat_f_b_smal');var e=f_read_cki('f_chat_open');(1==e||'1'==e)&&fb_eshow('f-chat-conent')}else fb_eshow('chat_f_b_smal'),fb_ehide('b-c-facebook')}
function f_chat_step(){on_playsound('door_bell')
fb_eshow('f_enter_1');fb_eshow('f_enter_3');}
function fb_eshow(t){document.getElementById(t).style.display='block';}
function fb_ehide(t){document.getElementById(t).style.display='none';}
function f_create_cki(t,e,n){if(n){var o=new Date;o.setTime(o.getTime()+24*n*60*60*1e3);var c='; expires='+o.toGMTString()}else var c='';document.cookie=t+'='+e+c+'; path=/';}
function f_read_cki(t){for(var e=t+'=',n=document.cookie.split(';'),o=0;o<n.length;o++){for(var c=n[o];' '==c.charAt(0);)c=c.substring(1,c.length);if(0==c.indexOf(e))return c.substring(e.length,c.length)}
return''}
function on_playsound(t){}
function ionSound(){1==web_sound&&$.ionSound({sounds:['click','door_bell'],path:fb_path.live_chat_path+'sounds/',multiPlay:!0,volume:'1.0'})}
var web_sound=!0;jQuery(document).ready(function(t){t(window).scroll(function(){var e=t(window).width();680>=e?f_create_cki('f_chat_open','0',1):f_create_cki('f_chat_open','1',1)})}),setTimeout(function(){f_ck_chat()},1000);var $=jQuery.noConflict();!function(t){if(!t.ionSound){var e,n,o,c,_={},f={},a=!1,i=function(e){var c,a;-1!==e.indexOf(':')?(c=e.split(':')[0],a=e.split(':')[1]):c=e,f[c]=new Audio,n=f[c].canPlayType('audio/mp3'),o='probably'===n||'maybe'===n?_.path+c+'.mp3':_.path+c+'.ogg',t(f[c]).prop('src',o),f[c].load(),f[c].preload='auto',f[c].volume=a||_.volume},u=function(t){var e,n,o,c;if(-1!==t.indexOf(':')?(n=t.split(':')[0],o=t.split(':')[1]):n=t,e=f[n],'object'==typeof e&&null!==e)
if(o&&(e.volume=o),_.multiPlay||a){if(_.multiPlay)
if(e.ended)e.play();else{try{e.currentTime=0}catch(i){}
e.play()}}else e.play(),a=!0,c=setInterval(function(){e.ended&&(clearInterval(c),a=!1)},250)},l=function(t){var e=f[t];if('object'==typeof e&&null!==e){e.pause();try{e.currentTime=0}catch(n){}}},r=function(t){var e=f[t];if('object'==typeof e&&null!==e){try{f[t].src=''}catch(n){}
f[t]=null}};t.ionSound=function(n){if(_=t.extend({sounds:['water_droplet'],path:'/sounds/',multiPlay:!0,volume:'0.5'},n),e=_.sounds.length,'function'==typeof Audio||'object'==typeof Audio)
for(c=0;e>c;c+=1)i(_.sounds[c]);t.ionSound.play=function(t){u(t)},t.ionSound.stop=function(t){l(t)},t.ionSound.kill=function(t){r(t)}},t.ionSound.destroy=function(){for(c=0;e>c;c+=1)f[_.sounds[c]]=null;e=0,t.ionSound.play=function(){},t.ionSound.stop=function(){},t.ionSound.kill=function(){}}}}(jQuery);
//]]>
</script>

<a title="Open Chat" id="chat_f_b_smal" onclick="open_chat()" class="chat_f_vt">Sohbeti Aç</a> <div id="b-c-facebook" class="chat_f_vt"> <div id="fbchat_box" onclick="b_f_chat()" class="fbchat_box"> <label>Facebook'tan Mesaj Gönder</label> <span id="fb_alert_num">1</span> <div id="t_f_chat"><div class='close_chatfb' onclick='hidechatfb()'>&#95;</div></div></div><div id="f-chat-conent" class="f-chat-conent"> <div class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/bloghocam/" data-width="250" data-height="310" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="true"> </div><div id="start_chat"> <div id="f_enter_1" class="msg_b hide_chatbox"> Blog HOcam'ı ziyaret ettiğiniz için teşekkürler! </div><p id="f_enter_3" class="hide_chatbox" align="center"> <a href="javascript:;" onclick="f_bt_start_chat()" id="f_bt_start_chat">Başlat</a> </p></div></div></div>
<div id="fb-root"></div>
<script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v2.5";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script>

  • Kodları ekledikten sonra mavi renkle gösterdiğim yere kendi Facebook sayfanızın adresini yazmayı unutmayın.
  • Eklentinin çalışabilmesi için Facebook sayfanızın ayarlarında mesaj gönderme ayarını aktifleştirmeniz gerekmektedir.

Son olarak Blog Hocam’da yayınlanacak yeni yazılardan ve faydalı ipuçlarından/linklerden haberdar olmak için Facebook sayfamı beğenmenizi rica ediyorum. Herkese iyi bloglar!

Tuesday, June 21, 2016

Etiket Bazlı Otomatik Slider

Daha önce şurada, şurada ve şuradaki gibi çeşitli manşet yani diğer bir deyişle slider uygulamaları paylaşmıştım. Sliderlar okuyucuya eski ve önemli içerikleri sunarak okunma sayısını arttırması açısından çok önemlidir fakat daha önce paylaştığım bu sliderlar pek pratik değildi. Çünkü gösterilecek içeriği kendiniz manuel olarak değiştirmeniz gerekiyor. Bu da bir süre sonra işkenceye dönüşebiliyor.

Son zamanlarda gelişmiş premium Blogger temalarında gördüğümüz otomatik sliderlar var. Bunlar etikete bağlı çalışıyor. Yani belirlediğiniz etikete ait yazılar manşette otomatik olarak gözüküyor. Böylece hiçbir düzenlemeye ihtiyaç duymadan manşette gösterilen yazılar değişiyor.

Etikete göre çalışan otomatik slider


Bu eklentiyi blogunuza eklemek için şu adımları takip edebilirsiniz:

1. Adım: Blogger kumanda panelinizde Şablon > HTML’yi Düzenle diyerek <head> kodunu bulun ve hemen altına şu Jquery kodunu ekleyin:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

2. Adım: Yine HTML kodları arasında </head> kodunu bularak hemen üstüne şu script kodlarını ekleyin:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    $(".recent-slider").each(function () {
        $(this).append('<div id="slider"></div>');
        var e = $(this).attr("data-label"),
            n = "
https://bloghocam.blogspot.com/feeds/posts/summary/-/" + e + "?max-results=" + 5 + "&alt=json-in-script",
            l = $(this);
        $.ajax({
            type: "GET",
            url: n,
            async: true,
            contentType: "application/json",
            dataType: "jsonp",
            success: function (s) {
                for (var r = 0; r < s.feed.entry.length; r++) {
                    for (var n = s.feed.entry[r], i = 0; i < n.link.length; i++)
                    if ("alternate" == n.link[i].rel) {
                        var o = n.link[i].href;
                        break
                    }
                    try {
                        var c = n.media$thumbnail.url.replace("s72-c", "h300-w1200-no")
                    } catch (p) {
                        var c = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_gBKG8a02S4Dt1u4J_bBuvwcO7EHXkYK_IdPUjmGxLvYJc23-x_dJD1M6-sgWz_LZPTo30v25yH1u0JLzJRn-UER38RIqmO96jFD9Nijr1Qtbu9FZwwWvpD6wNogGBZt1GLzNlITpPlMj/s600/no-thumbnail_f_600x250.png=w600-h250-no"
                    }
                    var d = n.title.$t,
                        u = n.summary.$t.substr(0, 180),
                        h = '<a href="' + o + '"><img src="' + c + '" title="<a href=\'' + o + "'><h3>" + d + "</h3></a><p>" + u + '</p>"/></a>';
                    l.find("#slider").append(h)
                }
                $("#slider").nivoSlider({
                    effect: "random",
                    pauseTime: 5e3
                })
            }
        })
    })
});
//]]>
</script>

3. Adım: Yine HTML kodları içerisinde ]]></b:skin> kodunu bulun ve üstüne şu CSS kodlarını ekleyin:

.nivoSlider,.top-l-slider .nivoSlider{width:100%;text-align:Center;overflow:hidden}.nivo-box,.nivoSlider{overflow:hidden}.nivoSlider{position:relative;height:300px}.nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:300px!important}.top-l-slider .nivoSlider{position:relative;height:400px}.top-l-slider .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}.nivo-main-image{display:block!important;position:relative!important;width:100%!important}.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:#fff;filter:alpha(opacity=0);opacity:0}.nivo-box,.nivo-slice{z-index:5;position:absolute}.nivo-box,.nivo-box img,.nivo-caption,.nivo-slice{display:block}.nivo-slice{height:100%;top:0}.nivo-caption{position:absolute;bottom:10px;left:5%;width:90%;text-align:center;font:400 26px 'segoe ui',sans-serif;z-index:8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#fff}.nivo-caption p{text-align:Center;font:400 13px 'segoe ui',sans-serif;margin:10px 20px;padding:10px;display:inline-block;border-radius:4px;background:#656E75;line-height:21px}.nivo-caption a{color:#ecf0f1}.nivo-caption h3{text-align:center;padding:5px;display:inline-block;border-radius:5px;margin:0;line-height:37px!important;background:#F1921A;font:400 30px 'segoe ui',sans-serif}.nivo-caption .sliderdata{margin:10px;text-align:Center;color:#fff}.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:50%;margin-top:-15px;z-index:9;font-size:0;display:block;width:30px;height:30px;border-radius:5px;line-height:30px!important;background-color:rgba(255,255,255,.5);cursor:pointer;box-shadow:1px 1px 1px rgba(0,0,0,.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.4)}.nivo-prevNav{left:10px}.nivo-nextNav:before,.nivo-prevNav:before{position:Absolute;left:0;top:0;color:#fff;height:30px;width:30px;text-align:center;z-index:100;display:block}.nivo-prevNav:before{content:'\2190';font:400 20px sans-serif;line-height:30px!important}.nivo-nextNav:before{content:'\2192';font:400 20px sans-serif;line-height:30px!important}.nivo-nextNav{right:10px}.nivo-controlNav{text-align:center;z-index:100;position:absolute;top:10px;right:10px;font-size:0}.nivo-controlNav a{cursor:pointer;display:block;width:20px;height:20px;background:#F1921A;float:left;border-radius:10px;margin-right:5px}.nivo-controlNav a.active{background:#E6E7E8;}

4. Adım: Son olarak Yerleşim sekmesinden Gadget Ekle > HTML/JavaScript Gadget diyerek şu HTML odunu ekleyin:

<div class='recent-slider' data-label='SEO'></div>

İşlem bu kadar ama düzenlemeniz ve bilmeniz gereken bazı hususlar var.

  • Script kodlarında https://bloghocam.blogspot.com yazan yere kendi blog adresinizi yazın.
  • Gadget olarak eklediğiniz HTML kodundan SEO yerine slayt olarak gösterilmesini istediğiniz yazılara ait etiketi yazın.
  • Slider otomatik genişliktedir. Üstbilgi gadgetının altına taşırsanız daha geniş, blog kayıtları gadgetının üstüne taşırsanız daha dar gözükecektir.
  • Slaytta farklı etiketlerden yazıları göstermek isterseniz istediğiniz yazılara ilave olarak featured diye bir etiket ekleyin. Son HTML kodundaki SEO yazan yere featured yazın. Böylelikle sliderı daha verimli kullanabilirsiniz.
Herkese iyi bloglar…

Wednesday, June 15, 2016

Bloger Sabit Açılır İletişim Formu

Bloguna iletişim formu eklemek isteyen Blogger kullanıcıları için farklı ve güzel bir alternatif sunmak istiyorum. Blogger’ın kendi gadgetları arasında bulunan iletişim formu üzerinde biraz değişiklikler yaparak floating dediğimiz yüzen yani sayfayı yukarı aşağı kaydırsanız dahi belirlediğimiz pozisyonda sabit kalan bir iletişim butonu koyacağız ve bu butonun üzerine gelindiğinde şık bir iletişim formu açılacak.


Bloger sabit açılır iletişim formu

Öncelikle şunu belirtmek isterim ki iletişim formu kesinlikle çalışıyor ve iletişim formu aracılığıyla gönderilen mesajlar blogunuza bağlı Gmail hesabınızdaki sosyal sekmesi altına geliyor.



Görmüş olduğunuz Blogger iletişim formunu blogunuza eklemek için öncelikle Yerleşim > Gadget Ekle > İletişim Formu diyerek Blogger’ın kendi iletişim formunu eklemelisiniz. Ardından aşağıdaki kodları HTML/JavaScript Gadget olarak ekleyeceksiniz ve iletişim formu eklediğiniz yerde değil de belirlediğimiz pozisyonda yüzen ve açılır şekilde, görünümünde de bazı değişikliklerle göreceksiniz.

<style>
.form-parent {width:323px;height:auto;background: transparent url('http://i.hizliresim.com/5VQ4AL.png') no-repeat right 10px;position:fixed;top:240px;left: -275px;z-index:9999999;transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.form-parent:hover {left:0;}
.cc-float-form {background:-moz-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-webkit-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);    background:-ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);    background:linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);color:#fafafa;padding:10px;    width:250px;border:2px solid #000;    border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#ContactForm1 {display:none;}
.contact-form-area {background: #222;width: 245px;padding: 10px 0px;border: 1px solid #111;box-shadow: 2px 2px 2px #111 inset;    -webkit-box-shadow: 2px 2px 2px #111 inset;font-family:Verdana, Geneva, sans-serif;color:#fafafa;font-size: 12px;}
#cc {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a {    color: #777;text-decoration:none;}
</style>
<div class='form-parent'>
<form name="contact-form" class="cc-float-form">
<p></p>
İsim:<br />
<input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Email:
<span style="color:red;">*</span><br />
<input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Mesaj: <span style="color:red;">*</span><br />
<textarea class="contact-form-area"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Gönder" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>

Kodlarda hiçbir değişiklik yapmanıza gerek yok. Tabi gadget olarak eklediğiniz iletişim formunu da kaldırmamanız gerekiyor. Herkese iyi bloglar…

Monday, June 13, 2016

Blogger “All In One” SEO Paketi

Blog yazarlığına başlayan herkes bir süre sonra normal olarak kafayı ziyaretçi sayısını arttırmaya takıyor. Bunun için de Google aramalarında daha üst sıralarda çıkmanın yollarını araştırıyor. Sonuç olarak her blogger er ya da geç SEO ile tanışıyor.

Dünyanın en popüler ve ücretsiz içerik yönetim sistemi olan Blogger’da Wordpress veya diğer içerik yönetim sistemlerindeki otomatik SEO paketleri bulunmadığından Blogger kullanıcıları olarak bir bazı SEO düzenlemelerini kendimiz yapmalıyız. Blogger’da bunu yapmanın yolu ise meta tag eklemekten geçiyor.

Blogger Meta Tag SEO Ayarları


Meta Tag Nedir? Ne İşe Yarar?

Meta tag, sayfanın kodlarına eklenen fakat ziyaretçiler tarafından görünmeyen, eklendiği sayfanın içeriğini tanımlayan metin parçalarıdır. Meta tagler arama motorlarının siteleri ziyaret eden örümcek dediğimiz botları tarafından algılanır ve arama motoruna o sayfanın ne ile ilgili olduğu hakkında bilgi verir.

Meta tagler sayfanın HTML kodları arasında <head> ve </head> kodları arasında yer alır. Blogger’da Şablon > HTML’yi Düzenle dediğinizde <meta content='…………..' name='…………'/> şeklinde gördüğünüz satırlar birer meta tagdir ve hepsinin anlamı vardır.

Blogger’a bu meta kodlarını doğru ve güncel bir şeklinde eklerseniz Blogger üzerinde yapılabilecek pek çok optimizasyon işlemini yapmış olursunuz. Bu yüzden bune All In One SEO paketi dedim.

Blogger All In One SEO Paketi

Aşağıda gördüğünüz meta tagleri şablonunuzun HTML kodlarında <head> satırının altına ekleyeceksiniz. Tabi ekleyeceğiniz meta tag daha önce eklenmişse silmeniz gerekmektedir.


<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='kelime1, kelime2, kelime3' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/></b:if></b:if></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/></b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/+BloghocamBlogspot/posts' rel='publisher'/>
<link href='https://plus.google.com/+SerdarKara/about' rel='author'/>
<link href='https://plus.google.com/+SerdarKara' rel='me'/>
<meta content='xxxxxxxxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxx' name='alexaVerifyID'/>
<meta content='Istanbul, Turkey' name='geo.placename'/>
<meta content='Serdar Kara' name='Author'/>
<meta content='general' name='rating'/>
<meta content='Turkey' name='geo.country'/>
<meta content='tr_TR' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta name="language" content="turkish"/>
<meta content='https://www.facebook.com/serdarkara.bh' property='article:author'/>
<meta content='https://www.facebook.com/bloghocam' property='article:publisher'/>
<meta content='@BlogHocam' name='twitter:site'/>
<meta content='@BlogHocam' name='twitter:creator'/>


Değiştirmeniz gereken yerleri mavi renkle gösterdim. Şu şekilde düzenlemeniz gerekiyor:
  • <meta content='kelime1, kelime2, kelime3' name='keywords'/> kelime1, kelime2, kelime3 yerine önemli anahtar kelimelerinizi yazın.
  • <link href='https://plus.google.com/+BloghocamBlogspot/posts' rel='publisher'/> buraya blogunuz için oluşturduğunuz Google+ sayfasının urlsini yazın. Eğer sayfa oluşturmadıysanız kişisel Google+ profilinizin urlsini yazabilirsiniz.
  • <link href='https://plus.google.com/+SerdarKara/about' rel='author'/>
    <link href='https://plus.google.com/+SerdarKara' rel='me'/> buralara kişisel Google+ proflinizin urlsini yazın.
  • <meta content='xxxxxxxxxxxxxxx' name='google-site-verification'/> buraya Google Search Console kodunu yazın.
  • <meta content='xxxxxxxxxxxxxxx' name='msvalidate.01'/> buraya Bing Webmaster Tools kodunu yazın.
  • <meta content='xxxxxxxxxxxxxxx' name='alexaVerifyID'/> buraya Alexa kodunuzu yazın.
  • <meta content='Istanbul, Turkey' name='geo.placename'/> buraya bulunduğunuz şehri yazın.
  • <meta content='Serdar Kara' name='Author'/> buraya blog yazarının ismini yazın.
  • <meta content='https://www.facebook.com/serdarkara.bh' property='article:author'/> buraya kişisel Facebook profilinizin urlsini yazın
  • <meta content='https://www.facebook.com/bloghocam' property='article:publisher'/> buraya blogunuzun Facebook sayfasının kullanıcı adını yazın.
  • <meta content='@BlogHocam' name='twitter:site'/> buraya blogunuzun Twitter hesabının kullanıcı adını yazın.
  • <meta content='@BlogHocam' name='twitter:creator'/> buraya kişisel Twitter hesabınızın urlsini yazın. Tekbir Twitter hesabı kullanıyorsanız ikisine de aynı kullanıcı adını yazın.
Eklediğimiz Bu Meta Tagler Ne İşe Yarar?

Kodlarla haşır neşir olanlar bu meta taglerin çoğunun ne anlama geldiğini kolayca anlayacaktır ama ben yine de genel olarak bu ayarların blogunuza katkısından bahsedeyim.

Sayfa başlıkları optimize edilecektir. Arama sonuçlarında yazı başlığı blog başlığından önce görünecektir. Indexlemeler daha düzenli yapılacaktır. Mükerrer indexlemelerin önüne geçilecektir. Google, Bing ve Alexa verify kodları yer almaktadır. Facebook, Twitter ve Google+ paylaşımlarında alakasız başlık, açıklama ve görüntü düzelecektir.

Monday, May 30, 2016

Yıldızlı Popüler Yazılar Eklentisi

Blogger’ın gadgetlar listesinde bulunan “Popüler Yayınlar” eklentisini çoğu blogger kullanıyor. Bu eklenti; son 1 ay, son 1 hafta veya tüm zamanların en çok okunan yazılarını gösteren faydalı bir eklenti.

Blogger’ın çoğu gadgetı gibi popüler yayınlar gadgetını da özelleştirme şansımız var. Bu yazıda paylaşacağım kodlar ile popüler yazılar eklentisine ziyaretçilerin ilgisini çekecek ve blogunuzu daha orijinal gösterecek yıldızlı oylama sistemini ekleyeceğiz.

Yıldızlı Popüler Yazılar Eklentisi


Bu özellik en popüler yazınızı 5 yıldızlı olarak gösterirken , sırasıyla 4,5 – 4 – 3,5 – 3… yıldız diye gidiyor. Uygulamak için sırasıyla şu adımları izleyin:

1. İlk olarak şablonda <head> kodunu bulun ve bunun altına font awesome kodunu ekleyin. Eğer daha önce font awesome kodunu eklediyseniz tekrar eklemenize gerek yok.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

2. Şablonda ]]></b:skin> kodunu bulun ve üzerine şu stil kodlarını ekleyin.

.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1} .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#F29B10;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f123';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7} .PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7} .PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

3. 3. Son olarak Yerleşim > Gadget Ekle > Popüler Yayınlar diyerek gadgetı ekleyin ve ayarları resimde görüldüğü gibi yapın.

Popüler yayınlar

Monday, May 23, 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/AVvXsEj87nk72PMHUxU1plr1fLfcZeaUcgvyRsiQUvFuOGuCCrvOxsAjvFrwykZELt2j9ruQTs4KK3JuNe1m5Z9GjfF37DwLydhvwopqhOaquQ_fQdNZCO2spWgeiyR7f4NX02U4EkZiYL_JhElF/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/AVvXsEjfDnaaABZIz7FheUpLalmkHuGT-m9H6P84Zxz-uiEa8hf6zdnPVRVN2luviGxBzGAYnkgWFZ_3L3cvniSfY7lNL9NEy6RJakz1wizo4CRu0SFBPscoc_KOcNOIYsBx8IhpXQB5I878j4bt/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/AVvXsEh8sgBy65zk5xFfEEE7kl0sVAQ-a8NaIE3f4nhHqY7gus057fhWg19yRM4xY26jbopPJwssDDpw_rAen92FSq8eH1WZsamO_ZMUgu42lV_YuFRqa25ztdKepKA28jhHHQgy4_fuMBWM6ENv/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…

Friday, May 6, 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/AVvXsEg-e5uWUtTG3XUnRxWMMimAWYftnFp_3nXR-8MKF80tZwLx8gKP25xp9NqXLM-WQwrAmMaWonLbSxXSHM2Hfa5e8KRaUdjM7oiA0JuomK5gVt-2zbQbdFuGq5ZVQdejVfHv7Ma2q07Saonq/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.

Thursday, March 10, 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.

Thursday, January 28, 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.

Thursday, January 14, 2016

Rastgele YAZILAR Eklentisi

Bu eklenti blog yayınlarınızdan rastgele yani otomatik olarak seçip, sizin belirlediğiniz yerde gösterir. Örneğin sitenizin footer kısmında yada sidebarda nereye isterseniz orada yayınlarınız bağlantı şeklinde göstermeye yarıyor.
Şimdi rastgele yazılar eklentisinin kurulumuna geldik. Kurulumu çok basit. İzlemeniz gereken yol şu;
Blogger kontrol paneli, Yerleşim, gadget ekle dedikten sonra HTML Jawa script seçiyorsuz.
Resimden yola çıkarak daha kolay yapabilirsiniz.




Rastgele yazılar HTML kodları;

<script type="text/javascript">var randarray=new Array();var l=0;var flag;var numofpost=10;function randomposts(json){var total=parseInt(json.feed.openSearch$totalResults.$t,10);for(i=0;i<numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){flag=1}}if(flag==0&&l!=0){randarray[i++]=l}}document.write('<ul>');for(n in randarray){var p=randarray[n];var entry=json.feed.entry[p-1];for(k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){var item="
<li>"+"<a href="+entry.link[k].href+">"+entry.title.$t+"</a></li>
";document.write(item)}}}document.write('</ul>
')}</script><script src="/feeds/posts/summary?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script>

Dilerseniz kodları ön izleme yapabilirsiniz. WM makale bağlantısını tıklayın.
Yukarıdaki resimde on adet yazı bağlantısı gösterilmektedir. Bu sayıyı azaltıp veya arttırabilirsiniz.

Thursday, December 3, 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.

Friday, November 13, 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/AVvXsEhfYvxVjWuKK5prgTislTxlaG_-xgp2MgsY4u3D-SbAutTVTy9-F_10Nj6I7yxdsazlqD6ztNSRUcu5vgzwWu_ZkzvLGFcJYE2_cQ6aG-PfhJmpYaaujx26AfSSutLTSB7CNGcV-lJ2jfus/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/AVvXsEgfgHyG6uQ_ld-H53ZEEkWiNFMFO-a9uT3sqrQ_PGwDZ9SLsoZFTcG-lAzM4YZV83RYrdA0Bk100zz7jL1GhFB1vEeNCChVvVsEZZKRiM2GDFgDWWDPOZMr2VJYvWryTrCKYa0fcin3uahf/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/AVvXsEgfgHyG6uQ_ld-H53ZEEkWiNFMFO-a9uT3sqrQ_PGwDZ9SLsoZFTcG-lAzM4YZV83RYrdA0Bk100zz7jL1GhFB1vEeNCChVvVsEZZKRiM2GDFgDWWDPOZMr2VJYvWryTrCKYa0fcin3uahf/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/AVvXsEgfgHyG6uQ_ld-H53ZEEkWiNFMFO-a9uT3sqrQ_PGwDZ9SLsoZFTcG-lAzM4YZV83RYrdA0Bk100zz7jL1GhFB1vEeNCChVvVsEZZKRiM2GDFgDWWDPOZMr2VJYvWryTrCKYa0fcin3uahf/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/AVvXsEgfgHyG6uQ_ld-H53ZEEkWiNFMFO-a9uT3sqrQ_PGwDZ9SLsoZFTcG-lAzM4YZV83RYrdA0Bk100zz7jL1GhFB1vEeNCChVvVsEZZKRiM2GDFgDWWDPOZMr2VJYvWryTrCKYa0fcin3uahf/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/AVvXsEjqScBilMKTXbXYM0qe2cfGqIYYX_2bdrRlf-0-QxiMcOfdZGz7H-3UGZRFsoi599S3s1cC_S30avD4xirsACwvKqxGblVg4dZk_ROdox9Q-1SePzmx8mI-QITBziIDgQSr7yyM6GD-NZnw/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/AVvXsEjF_oK5SYiHJ9moy-3j9lvP58s4pRgn6b3GyDTj9p1QTJfYLQdELfa-8LjWeQMSNH7GG_zvHCMHk2uOc8GAkgjzbP6N1X-PCb9G7nhN9mzJnkiIV75qjuzfidKLU-EUXB4siKqlJkUCBJ9_/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/AVvXsEjF_oK5SYiHJ9moy-3j9lvP58s4pRgn6b3GyDTj9p1QTJfYLQdELfa-8LjWeQMSNH7GG_zvHCMHk2uOc8GAkgjzbP6N1X-PCb9G7nhN9mzJnkiIV75qjuzfidKLU-EUXB4siKqlJkUCBJ9_/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/AVvXsEjF_oK5SYiHJ9moy-3j9lvP58s4pRgn6b3GyDTj9p1QTJfYLQdELfa-8LjWeQMSNH7GG_zvHCMHk2uOc8GAkgjzbP6N1X-PCb9G7nhN9mzJnkiIV75qjuzfidKLU-EUXB4siKqlJkUCBJ9_/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/AVvXsEjF_oK5SYiHJ9moy-3j9lvP58s4pRgn6b3GyDTj9p1QTJfYLQdELfa-8LjWeQMSNH7GG_zvHCMHk2uOc8GAkgjzbP6N1X-PCb9G7nhN9mzJnkiIV75qjuzfidKLU-EUXB4siKqlJkUCBJ9_/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/AVvXsEjF_oK5SYiHJ9moy-3j9lvP58s4pRgn6b3GyDTj9p1QTJfYLQdELfa-8LjWeQMSNH7GG_zvHCMHk2uOc8GAkgjzbP6N1X-PCb9G7nhN9mzJnkiIV75qjuzfidKLU-EUXB4siKqlJkUCBJ9_/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…