24 Ocak 2015 Cumartesi

Blogger İletişim Formunu Sabit Sayfaya Ekleme
Uzun zamandır bloguma güzel bir blogger iletişim formu eklemek istiyordum. Blogger'ın ilk zamanlarda kendine ait bir iletişim formu olmaması nedeniyle, diğer bloglarım da hep Google Docs ile oluşturduğum iletişim forumlarını kullandım. Nihayet geçen sene blogger resmi iletişim formu eklentisini yayınlandı fakat eklenti sadece sidebar'da kullanılabiliyordu.

Blogger iletişim formu eklentisinin sadece kenar çubuğunda kullanmak blog'da görüntü kirliliğine sebep olabiliyor. Açık söylemek gerekirse blogumun her yerinde bir iletişim formu görmek istemiyorum. Bu nedenle bu konumuzda blogger iletişim formunu kullanarak iletişim sayfası oluşturmayı anlatacağım.

Neden İletişim Formu Kullanmalıyım ?
Blogger sayfanıza iletişim kutusu eklemek okuyucularınızın size ulaşmasını kolaylaştıracaktır. Size ulaşmak için konu altına mail adresilerini bırakıp sizin onlara ulaşmanızı beklemek yerine, gerekli bilgileri iletişim formuna doldurup Gönder butonuna basarak kolay bir şekilde size ulaşabilir. Tabi bu sadece blog okuyucuları için değil blogger yöneticileri içinde oldukça kullanışlı bir yöntemdir.

Blogger İletişim Sayfası Oluşturma

Aşağıda ki adımları izleyerek blogger iletişim formunu kullanarak iletişim sayfası oluşturabilirsiniz. Eğer demo görmek isterseniz, kullanmış olduğum iletişim sayfasını kontrol edebilirsiniz.

Adım 1: İlk olarak sidebar'da blogger resmi iletişim formu kullanıyorsanız Blogger Yönetici Paneli > Yerleşim sekmesinden formu kaldırın.

Adım 2: Şimdi blogunuzun benzersiz blogID numarasını bulun. Blogger Yönetici Panelin'de herhangi bir sayfada iken tarayıcınızın URL çubuğunda blogID'i bulabilirsiniz. Bu blogID yeni iletişim sayfası oluşturmak için gereklidir. BlogID girmediğiniz taktir de iletişim kutusu çalışmayacaktır. Aşağıda ki ekran görüntüsünde blogID'in nasıl bulunacağını öğrenebilirsiniz. Bu numarayı bulduktan sonra bir yere kayıt edin.

blogger iletişim formu eklentisi
Adım 3: Blogger Yönetici Paneli > Sayfalar'dan Yeni Sayfa oluşturun.
Adım 3: Yeni sayfa oluşturduktan sonra HTML mod'u seçin ve aşağıda ki kodu boş alana yapıştırın. Kırmızı ile gösterdiğim kodu Adım 2'de not ettiğiniz blogID ile değiştirin.
<script>
var blogId = '3325432071104196405';

var contactFormMessageSendingMsg ='Gönderiliyor...';
var contactFormMessageSentMsg = 'Mesajınız başarılı bir şekilde gönderildi.';
var contactFormMessageNotSentMsg = 'Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyiniz..';
var contactFormEmptyMessageMsg ='Mesaj alanı boş olamaz.';
var contactFormInvalidEmailMsg = 'Lütfen geçerli e-mail adresi girin'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name='contact-form'>
<div>İsim : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>E-posta Adresiniz: <em>**</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>İletiniz <em>**</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='7'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; 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>

Gerekli düzenlemeyi yapıp kodu yapıştırdıktan sonra Sayfa ayarları > Seçeneklere tıklayın. Okuyucu yorumları'nı engelleyin ve Oluşturma modunu Yazılan HTML'i yorumla olarak değiştirin. Aşağıda ki ekran görüntüsünde gerekli ayarları görebilirsiniz.
blogger iletişim formu eklentisi

Hepsi bu kadar arkadaşlar, gerekli ayarlamaları yaptıktan sonra iletişim sayfasını yayınlayabilirsiniz. İletişim sayfasını sitenizde yayınlamadan önce iletişim kutusunu test etmeyi unutmayın.

13 Ekim 2014 Pazartesi

Blogger 'Powered By Blogger' Yazısını Kaldırma
Blogger platformunu kullanan kişiler bloglarının en altında bulunan Powered by Blogger atıfını fark etmiştir. Bu yazımız da birçok blogger'ın kaldırmakta büyük sıkıntı çektiği bu atıfı kaldırmadan bahsedeceğim.

Muhtemelen kaldırmak için Blogger Yönetici paneli > Yerleşim sekmesine girip kaldırmayı denemişsinizdir. Bu denemeniz den ne yazık ki bir sonuç çıkmayacaktır, çünkü Powered by Blogger Atıfı kapalıdır. Hemen hemen varsayılan temaların tamamında bu şekildedir ve hiç bir şekilde kaydıramaz, değiştiremez ve silemezsiniz. Bu nedenle oldukça canınızı sıkabilir. 

Neyse ki Powered by blogger kaldırmak oldukça basittir ve çeşitli yöntemleri bulunmaktadır. Aşağıda ki işlemlerle bu atıfı kaldırmayı göstereceğim. Birincisi herkes için oldukça kolay bir yöntem olacak. Özellikle benim gibi tembel insanlar için :)) Diğer yöntem ise biraz uğraştırıcı gözükebilir ama ilki gibi o da oldukça kolay yöntemdir.

Powered By Blogger Kaldırmak

Yöntem 1 

  • İlk olarak Blogger Yönetici Paneline giriş yapın.
  • Daha sonra sol tarafta bulunan navigasyon menüsünden Şablon > Özelleştir'e tıklayın.
powered by blogger kaldırmak

  • Şablon > Özelleştir menüsüne girdikten sonra açılan ekrandan Gelişmiş > CSS ekle seçeneğine tıklayın ve aşağıda ki kodu gerekli alana yapıştırıp kaydedin.
 #Attribution1{display:none;}

powered by blogger kaldırmak


  •  İlk işlem bu kadar, gerekli kodu yapıştırıp kayıt ettikten sonra blogu kontrol edebilirsiniz.
Yöntem 2

Olur ya üstte ki yöntem blog sayfanız da çalışmadı, işte o zaman bu yöntemi deneyebilirsiniz.


  • İlk olarak Blogger Yönetici Paneline giriş yapın.
  • Ardından Şablon > HTML'yi Düzenle'ye gelerek şablon'da 'Attribution' u aratın. 
  • Gerekli kodu arattıktan sonra aşağıda ki gibi bir yer gelecektir.

  • powered by blogger kaldırmak

    • Attribution widgetini bulduktan sonra yukarıda ok ile gösterdiğin "true"
    • yazısını "false" olarak değiştirin.
    • Gerekli değişikliği yaptıktan sonra Yönetici Paneli > Yerleşim menüsüne girin ve Atıf'ı değiştire tıklayın. Aşağıda ki resimde gördüğünüz gibi Kaldır seçeneği çıkacaktır.
    powered by blogger kaldırmak
    Kaldır seçeneğine tıklayarak Powerred by blogger yazısından kurtulabilirsiniz.

    12 Ekim 2014 Pazar

    Blogger İki Adsense Reklamını Yan Yana Koyma
    Blogger sistemini kullanıp yazı yazan biri olarak herkes gibi emeklerimin karşılığını almak istiyorum. Bu nedenle blogger'dan para kazanmak için tüm dünyaca kabul görmüş ve gelmiş geçmiş en güvenilir para kazanma yöntemi olan Google Adsense reklam sistemini kullanıyorum. Blogger sitenize Google Adsense reklamı koymak için biraz uğraşmanız gerekiyor. İş sadece reklamı almakla bitmiyor,  bir de siteye reklamları yerleştirmesi var.

    Bloguna adsense reklamı alıp tıklama oranı oldukça düşük olan sayfalar görmüşsünüzdür. Bu nedenle bir çok webmaster reklam tıklama oranları nedeniyle oldukça dert yanmakta. Daha önceki yazılarımda da belirttiğim gibi adsense de para kazanmanın altın anahtarlarından biri reklamları blog temasına uygun şekilde yerleştirmekten geçer.
    blogger iki reklamı yan yana koyma
    Bundan bir önceki konuda Blogger Yazı İçine Reklam Eklemeyi sizlere detaylı bir şekilde anlatmıştım. Bu konumuzda ise blogger konu içinde yer alan iki reklamı yan yana koymayı basitçe sizlere aktaracağım. Tek yapmanız gereken aşağıda yer alan kodun arasına reklam kodlarını ekleyip gerekli alana yapıştırmak. Yazı içine reklam eklemeyi üstte verdiğim linkten bulabilirsiniz.

    Blogger İki Reklamı Yan Yana Koyma


     <b:if cond='data:blog.pageType == &quot;item&quot;'>    
    <table border='0'>
      <tr>
        <td>  <div style='float:left;padding:0px 5px 0px 0px;'>  
            Convert Edilmiş Gooogle Adsense Reklam Kodu 1 Buraya Gelecek
    </div> </td>
        <td> <div style='float:right'> 
            Convert Edilmiş Gooogle Adsense Reklam Kodu 2 Buraya Gelecek </div> </td>
      </tr>
    </table>
     </b:if>

    İki reklam arasına 5px'lik bir aralık eklenmiştir. Herhangi bir sorun ve sıkıntıda yorum atmaktan çekinmeyin..

    11 Eylül 2014 Perşembe

    Blogger Sosyal Medya Butonları ve E-Posta Aboneliği Eklentisi
    Günümüzde sosyal medyanın web sitesi üzerinde ki etkisi tartışılmaz hale geldi. Google'ın da bizzat önem verdiği konulardan biri sosyal medya. Bu nedenle web sitelerinde bu tarz sosyal medya eklentileri bulundurmak size oldukça avantaj sağlayabilir. Blogger sosyal medya butonları ile facebook,twitter,google+ gibi ağlarda takipçi sayınızı arttırarak sitenizi daha geniş kitlelere duyurma şansını yakalarsınız. Bu sayede kullanıcılar yayınladığınız yeni içerikleri her an yakalama şansına sahip olurlar.

    Bu zamana kadar bir çok sitede sosyal medya butonları ve e-posta aboneliğini eklentilerini ayrı kodlar dahilinde görmüşsünüzdür. Bugün sizlerle paylaşacağım eklentide ise oldukça şık, sade bir görüntüsünün yanı sıra aşağıda ki fotoğrafta göreceğiniz üzere yukarıda bahsettiğim iki özelliği birden içinde barından bir eklenti.

    Fotoğrafta gözükmese de eklenti'de hareketli sosyal medya butonları kullanılmıştır.

    Blogger Sosyal Medya ve E-mail Aboneliği Eklentisi

    Blogger Yönetici Paneline giriş yapın.

    Yerleşim  > Gadget ekleye tıklayın.

    Açılan pencerede HTML/JavaScript'e tıklayın.

    Aşağıda ki kodu alıp açılan sayfaya yapıştırın ve işlem tamamdır.


    <div class='widget-content'>
    <style type='text/css'>#sidebar-subscribe-box{background:url(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:95%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(http://1.bp.blogspot.com/-n5s9Bu0JCgg/UA_AfQ5qLkI/AAAAAAAAFMU/G9FOuh4SP7k/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}p#rb_socialicons img { /* Yeni Metro Sosyal Butonlar Eklentisi  */    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}p#rb_socialicons img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);}/* Yeni MEtro Sosyal Butonlar Eklentisi  */</style><div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><div class="sidebar-subscribe-box-form">    <center><p id="rb_socialicons"><a href="http://feeds.feedburner.com/blogkaynagi" target='_blank'> <img alt="Click Me" onmouseout="this.src='http://1.bp.blogspot.com/--VKL86l-Jb8/UOpZTI1QdYI/AAAAAAAALHc/pobvypvYAkY/s1600/rss-inactive.png'" onmouseover="this.src='http://1.bp.blogspot.com/-4suOkcJcrEY/UOpZSLOgEAI/AAAAAAAALHQ/Bfo2GP16lVk/s1600/rss.png'" src="http://1.bp.blogspot.com/--VKL86l-Jb8/UOpZTI1QdYI/AAAAAAAALHc/pobvypvYAkY/s1600/rss-inactive.png" /></a><a href="https://www.facebook.com/" rel='nofollow' target='_blank'><img alt="Click Me" hieght="100" onmouseout="this.src='http://4.bp.blogspot.com/-cr9boutcy-s/UOpZATc-69I/AAAAAAAALGU/-OJr2yI988k/s1600/facebook-inactive.png'" onmouseover="this.src='http://1.bp.blogspot.com/-KB8iKLter1I/UOpY-36lZzI/AAAAAAAALGI/XNGi27H5UaA/s1600/facebook.png'" src="http://4.bp.blogspot.com/-cr9boutcy-s/UOpZATc-69I/AAAAAAAALGU/-OJr2yI988k/s1600/facebook-inactive.png" /></a><a href="https://twitter.com/blogkaynagi" rel='nofollow' target='_blank'><img alt="Click Me" onmouseout="this.src='http://2.bp.blogspot.com/-vfdnT942AG0/UOpZbVIg7-I/AAAAAAAALH0/f1yb38pRaBg/s1600/twitter-inactive.png'" onmouseover="this.src='http://4.bp.blogspot.com/-1-MHoTTgPNo/UOpZa9PAwuI/AAAAAAAALHo/khEpCb1lAK0/s1600/twitter.png'" src="http://2.bp.blogspot.com/-vfdnT942AG0/UOpZbVIg7-I/AAAAAAAALH0/f1yb38pRaBg/s1600/twitter-inactive.png" /></a><a href="https://plus.google.com/u/0/105104679481549727437/posts" target='_blank' ><img alt="Click Me" hieght="160" onmouseout="this.src='http://2.bp.blogspot.com/-80lPTxcgo0c/UOpZPjm3eBI/AAAAAAAALGs/gNMX65WTC_U/s1600/google-plus-inactive.png'" onmouseover="this.src='http://1.bp.blogspot.com/-iDS8TSF6atk/UOpZBRDDbYI/AAAAAAAALGg/IPL4upm_zgI/s1600/google-plus.png'" src="http://2.bp.blogspot.com/-80lPTxcgo0c/UOpZPjm3eBI/AAAAAAAALGs/gNMX65WTC_U/s1600/google-plus-inactive.png" /></a><a href="http://pinterest.com/Bilgicinfo/" rel='nofollow' target='_blank'><img alt="Click Me" onmouseout="this.src='http://1.bp.blogspot.com/-LIVfFyuMd6Y/UOpZRHWUq3I/AAAAAAAALHE/txTdlnAwSrs/s1600/pinterest-inactive.png'" onmouseover="this.src='http://3.bp.blogspot.com/-l16hOlygfME/UOpZQaHRQHI/AAAAAAAALG4/Ank4It2IZcE/s1600/pinterest.png'" src="http://1.bp.blogspot.com/-LIVfFyuMd6Y/UOpZRHWUq3I/AAAAAAAALHE/txTdlnAwSrs/s1600/pinterest-inactive.png" /></a><a href="http://blogkaynagi.blogspot.com/p/iletisim.html"><img alt="Click Me" onmouseout="this.src='http://2.bp.blogspot.com/-YcqWpuN34gs/UOpY8ib_hCI/AAAAAAAALFw/iRbm88KLIT0/s1600/email-inactive.png'" onmouseover="this.src='http://2.bp.blogspot.com/-owi0cEo4oTY/UOpY99R2I1I/AAAAAAAALF8/1XGb4foX_dQ/s1600/email-shadow.png'" src="http://2.bp.blogspot.com/-YcqWpuN34gs/UOpY8ib_hCI/AAAAAAAALFw/iRbm88KLIT0/s1600/email-inactive.png" /> </a></p></center>  <form action="http://feedburner.google.com/fb/a/mailverify?uri=blogkaynagi" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogkaynagi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="blogspot/bVOOCE" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="E-posta aboneliği.."/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Gönder !" /></form></div></div></div><style></style>
    </div>

    Dikkat:!!  Eklentide değiştirmeniz gereken yerleri mavi ile gösterdim. Eklentiyi kurmadan önce her birini tek tek değiştirmeyi unutmayın !

    21 Ağustos 2014 Perşembe

    Sitene Angry Birds Fare İmleci Ekle
    Web sitenizde bulunan normal fare imlecin den sıkıldıysanız, angry birds fare imleçleri tam size göre. Sitesine biraz renk katmak, eğlence katmak isteyen webmasterlar için angry birds fare işaretlerini sizlerle paylaşıyorum. Blogger sistemine fare imleci nasıl eklenir konusunda sıkıntı yaşayanlar bu konudan gerekli bilgileri edinebilirler. Ayrıca bu kod bütün blog sistemlerinde çalışmaktadır.

    Sizlerle tam olarak bir birinden güzel 5 adet angry birds fare işareti paylaşıyorum. Fare imleçlerinin demosunu istediğiniz angry bird karakterinin üstüne gelerek test edebilirsiniz.  İşte karşınızda popüler angry birds fare imleçleri.
    angry birds
    Blogger Angry Birds Fare İmleci Ekleme

    -Blogger Yönetici Paneline giriş yapın.
    -Yerleşim > Gadget ekleye tıklayın.
    -Açılan pencerede HTML/JavaScript'e tıklayın ve beğendiğiniz fare imlecini kopyalayıp yapıştırın.
    -Kaydet butonuna basın. İşlem tamam!

      <style>body, a, a:hover {cursor: url("http://4.bp.blogspot.com/-6E6-dgBdzXY/U_UTyhEjQJI/AAAAAAAACsY/3iu6QTegZ68/s1600/angry_birds_pig.png"), auto !important;}</style>


      <style>body, a, a:hover {cursor: url("http://2.bp.blogspot.com/-hN8M5XCMSuc/U_UTyqAN1qI/AAAAAAAACsM/rQdlkdhyyhA/s1600/green_angry_bird.png"), auto !important;}</style>


      <style>body, a, a:hover {cursor: url("http://1.bp.blogspot.com/-jfUQECCqDds/U_UTym9I2bI/AAAAAAAACsA/1GdpVJDugP8/s1600/red_angry_bird.png"), auto !important;}</style>


      <style>body, a, a:hover {cursor: url("http://2.bp.blogspot.com/-oWQJLoHbBvI/U_UTzJ7hQjI/AAAAAAAACsI/41AKdlWpunU/s1600/white_angry_bird.png"), auto !important;}</style>


      <style>body, a, a:hover {cursor: url("http://3.bp.blogspot.com/-wuyPq-yXi34/U_UTztes8PI/AAAAAAAACsQ/MaHavyQ_cXY/s1600/yellow_angry_bird.png"), auto !important;}</style>