Web Dinamik: Blogger Eklentileri

Blogger Eklentileri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

16 Ağustos 2016 Salı

Demo Ve Download Butonları Oluşturma

Blog yazarlığı ile uzun süre uğraşan herkes zamanla kendi tasarımlarını, temalarını, kodlarını düzenlemeye başlıyor. Bu çalışmalarını blogunda paylaşmak istediklerinde ise DEMO yani Önizleme ve DOWNLOAD yani İndirme butonlarından faydalanıyorlar.

Blogunda Blogger temaları paylaşan bir takipçim benden slide efektli görsel yönden etkileyici butonlar için kod istemişti. İlgilenenler ve ihtiyacı olanla çıkabilir düşüncesiyle buradan herkesle paylaşmanın daha doğru olacağını düşündüm.

Paylaşacağımı bu demo ve download butonlarında sadece hiç grafik kullanılmadığı için oldukça hızlı yükleniyor ve çalışıyor. Butronların üzerindeki ikonlar için font awesome ikonları kullanılmış. Diğer tüm her şey CSS kodları ile halledilmiştir.

Bu butonları blog yazılarınızdaki paylaşımlarınızda kullanmak için öncelikle font awesome’ın blogunuzda tanımlı olması gerekir. Eğer şablonun HTML kodlarına daha önce fontawesme kodu eklemediyseniz Şablon > HTML’yi Düzenle diyerek şablonunuzun HTML kodlarının olduğu pencereyi açın ve burada <head> kodunun altına şu kodu ekleyin:

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

Daha sonra download ve demo butonlarının CSS kodlarını şablona eklemelisiniz. Bunun için ]]></b:skin> kodunu bulun ve bunun üzerine şu stil kodlarını ekleyin:

#buton {     margin: 20px auto;     text-align: center; }
#buton br {     display: none; }
.mbg-btn-slide, .mbg-btn-slide2 {     position: relative;     display: inline-block;     height: 50px;     width: 200px;     line-height: 50px;     padding: 0;     border-radius: 50px;     background: #fdfdfd;     border: 2px solid #00CC00;     margin: 10px;     transition: .5s; }
.mbg-btn-slide2 {     border: 2px solid #FF3300; } .mbg-btn-slide:hover {     background-color: #00CC00; } .mbg-btn-slide2:hover {     background-color: #FF3300; }
.mbg-btn-slide:hover span.circle, .mbg-btn-slide2:hover span.circle2 {     left: 100%;     margin-left: -45px;     background-color: #fdfdfd;     color: #00CC00; }
.mbg-btn-slide2:hover span.circle2 {     color: #FF3300; }
.mbg-btn-slide:hover span.title, .mbg-btn-slide2:hover span.title2 {     left: 40px;     opacity: 0; }
.mbg-btn-slide:hover span.title-hover, .mbg-btn-slide2:hover span.title-hover2 {     opacity: 1;     left: 40px; }
.mbg-btn-slide span.circle, .mbg-btn-slide2 span.circle2 {     display: block;     background-color: #00CC00;     color: #fff;     position: absolute;     float: left;     margin: 5px;     line-height: 42px;     height: 40px;     width: 40px;     top: 0;     left: 0;     transition: .5s;     border-radius: 50%; }
.mbg-btn-slide2 span.circle2 {     background-color: #FF3300; }
.mbg-btn-slide span.title,   .mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title2,   .mbg-btn-slide2 span.title-hover2 {     position: absolute;     left: 90px;     text-align: center;     margin: 0 auto;     font-size: 16px;     font-weight: bold;     color: #FF3300;     transition: .5s; }
.mbg-btn-slide2 span.title2,   .bsd-btn-slide2 span.title-hover2 {     color: #00CC00;     left: 80px; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     left: 80px;     opacity: 0; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     color: #fff; }

Şablonun HTML kodlarında yapılacaklar bu kadar. Bundan sonra demo ve download butonlarını kullanacağınız yazının HTML kodu bölümünü açın ve butonların gözükmesini istediğiniz yere butonların kodlarını ekleyin:

<div id="buton"> <a href="https://bloghocam.blogspot.com" class="mbg-btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">Demo</span> <span class="title-hover">Önizle</span> </a> <a href="https://bloghocam.blogspot.com" class="mbg-btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">İndir</span> </a> </div>

Burda ilk mavi yere demo butonuna tıklandığında açılacak sayfanın urlsini, ikinci mavi yere download butonuna tıklandığında açılacak sayfanın urlsini yazın.

Faydalı olması ümidiyle, herkese iyi bloglar.

10 Ağustos 2016 Çarşamba

Blogger İçin Sosyal İçerik Kilidi

Genellikle Wordpress bloglarda gördüğümüz “Görüntülemek İçin Paylaş” scriptinin Blogger’da kullanımı ile ilgili istekler aldım. Bu yazıda, blog dünyasında “share to unlock” veya “social content locker” olarak bilinen scripti sizlerle paylaşacağım.

Sosyal İçerik Kilidi Nedir?

Oluşturduğunuz içeriğin istediğiniz kısmını ziyaretçilere kapatan ve ziyaretçilerin kapalı kısmı görüntüleyebilmeleri için yazıyı sosyal medyada paylaşmalarının gerektiği scripte sosyal içerik kilidi diyebiliriz.

Yazılarınızın sosyal medyada bol bol paylaşılmasını ve buna bağlı olarak sosyal medya trafiğinizin artmasını sağlayacak bu eklentiyi farklı şekillerde kullanabilirsiniz. Örneğin blogunuzda çok önemli bir bilgi paylaşırken, bir download linki paylaşırken, video veya fotoğraf paylaşırken, kod paylaşırken vs.

Sosyal İçerik Kilidini Blogger’da Kullanma

Bu eklentiyi Blogger’da kullanmak için aşağıdaki adımları takip edin.

1. Adım: İlk olarak şablonunun HTML kodlarına jquery kodu eklemeniz gerekiyor. (Not:Şablonda sadece bir adet jquery kodu olmalı. Daha önce eklediyseniz bu adımı atlayın.) Bunun için Blogger kumanda panelinde Şablon > HTML’yi Düzenle diyerek <head> kodunu bulun ve hemen altına şu jquery kodunu ekleyin:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

2. Adım: İkinci olarak javascript ve CSS kodlarımnı eklemelisiniz. Bunun için Blogger kumanda panelinde Şablon > HTML’yi Düzenle diyerek </body> kodunu bulun ve hemen üstüne şu kodları ekleyin:

<script type='text/javascript'>
//<![CDATA[
(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/all.js";
     fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      status     : true,
      xfbml      : true
    });
    FB.Event.subscribe('edge.create', function(href, widget) {
        $.event.trigger({
            type: "pageShared",
            url: href
        });
    });
};
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
    twttr.events.bind('tweet', function (event) {
        $.event.trigger({
            type: "pageShared",
            url: event.target.baseURI
        });
    });
});
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function plusOned(obj){
    console.log(obj);
    $.event.trigger({
        type: "pageShared",
        url: obj.href
    });
}
$(document).on('pageShared',function(e){
    if(e.url == window.location.href){
        $(".secret").show();
        $(".secret-share").hide();
    }
});
//]]>
</script>
<style>
.secret {
text-align:center;
display:none
}
.secret-share {
    padding: 20px;
    text-align: center;
    border: 3px solid #ddd;
    background: #f8f8f8;
}
.secret-share .fb-like {
margin-top: 0;
top: -7px;
position: relative;}
.secret-share .twitter-share-button {
    margin-right: 25px;
}
</style>

3. Adım: İlk iki adımda eklediğimiz kodlar şablonun HTML kodlarına tek seferlik ekleyeceğimiz kodlardı. Şimdi kullanacağımız kod ise eklentiyi kullanmak istediğiniz her yazıya eklemeniz gereken koddur. Sosyal içerik kilidini kullanmak istediğiniz yazının HTML bölümüne giderek eklentinin görüntülenmesini istediğiniz yere şu kodları ekleyin:

<div class="secret">
BURASI GİZLENECEK İÇERİK</div>
<div class="secret-share">
<p>Gizlenmiş içeriği görmek için bu yazıyı paylşmanız gerekmektedir.</p>
<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="mybloggerlab" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>

Gizlenmesini istediğiniz bölümün HTML kodlarını mavi renkle gösterdiğim yere yapıştırdıktan sonra önizleme yaptığınızda o bölümün yerinde sosyal içerik kilidinin göründüğünü göreceksiniz.

Gizli bölümü görmek için Facebook beğen, Twitter tweet veya Google Plus +1 butonlarından birine tıklamalı ve sosyal medya hesaplarınızda paylaşmalısınız.

Soru ve düşüncelerinizi yorum bölümünden paylaşabilirsiniz. Bu eklentiyi faydalı bulduysanız lütfen sosyal medya hesaplarınızda paylaşarak Blog Hocam’a destek olun.

3 Ağustos 2016 Çarşamba

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.

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()'>_</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!

21 Haziran 2016 Salı

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.

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/AVvXsEivZjUEQFFf9owmD9yhE2vQ8kft0OJ_rcKbGVhBbaRP964qBnFWr-OsGsQGbKDPSTEptfXrN-azb_3osMUsnoHx6z9rKlKYpsrB8vJiPU-L1SsP1YsqyM56gRy19qaaFfyhNv-_yGRviR4B/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…

15 Haziran 2016 Çarşamba

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.

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

13 Haziran 2016 Pazartesi

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.

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 == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<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 != "error_page"'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + 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 + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<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 == "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<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.

30 Mayıs 2016 Pazartesi

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.

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.

23 Mayıs 2016 Pazartesi

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.

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://lh3.googleusercontent.com/-Q6BYf-G4nAI/V0G_D47cpeI/AAAAAAAAL-g/-vH1cryZzAYAceGa0Y9yZW3YmKaRL_sxgCCo/s300/1.png"/></a>'
quotes[1]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://lh3.googleusercontent.com/-dsdgAiTDHrU/V0G_DvaWEuI/AAAAAAAAL-o/Ntj75HzIwQcpleneRb6iDX1WnkBJspaLQCCo/s300/2.png"/></a>'
quotes[2]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://lh3.googleusercontent.com/-9jF0WjVIDZM/V0G_D2dWtcI/AAAAAAAAL-o/RiFsDaF7R5wjfU9tldakw4cETs4f-WxFwCCo/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…

6 Mayıs 2016 Cuma

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 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://lh3.googleusercontent.com/-h4tOFZoH2GU/VyxnzJrVMcI/AAAAAAAAL94/7Lzr6v77qpwveZhbMRMH4n7irV-Rw6u1gCCo/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.

10 Mart 2016 Perşembe

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.

!!! 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: "Başa Git",
lastText: "Sona Git",
nextText: " ► ",
prevText: " ◄ "
}
</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.

28 Ocak 2016 Perşembe

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.

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.

3 Aralık 2015 Perşembe

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.

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.

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.

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.

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.

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