Blogger’da feedburner email abonelik formu nasıl eklenir?

12
30
blogger'da feedburner abonelik formu cover

Blogger’da feedburner email abonelik formu kullanmak size trafik olarak daha fazla kullanıcı sağlar. E-mail aboneliği, bloggerlar için olmazsa olmaz trafik kaynaklarından birisidir. kullanıcıların sitenize email yoluyla abone olmalarını sağlamak sanıldığı kadar da kolay değildir. Lakin bunu başardığınızda kendinize oldukça sadık ve bloğunuzu seven kullanıcılar kazandırmışsınız demektir.

Peki bu bahsettiğimiz email abonelik formunu nasıl bloğunuza ekleyeceksiniz? diğer sistemlerde örneğin WordPress’te bu işi kolayca sizin için yapan eklentiler mevcut. Fakat Blogger platformu için bunu sizin manuel olarak gerçekleştirmeniz gerekiyor.

Bu makalemde anlatacağım yöntem ile bloğunuza ekleyeceğiniz email abonelik formu HTML5 ve css3 ile oluşturulduğundan, tamamen hafif bir yapıya sahip  ve hızlıdır.

Sayfanızda sol alt köşede bir eposta simgesi belirir ve bu simgeye tıklandığında popup olarak email abonelik formunu açar.

Blogger'da feedburner email abonelik formu ekleme

Blogger’da feedburner email abonelik formu nasıl eklenir?

[su_divider top=”no” divider_color=”#dedede” size=”5″][/su_divider]

Kurulum aşaması sandığınız kadar zor değil. dilerseniz hemen başlayalım.

Css Kodunun Eklenmesi
  • Blogger kontrol panelinden Şablon Sekmesine sonra da HTML’yi Düzenle tıklıyoruz.
  • CTRL + F tuş kombinasyonu ile kodlar içerisinde ]]></b:skin> kodunu aratıyoruz.
  • Bulduğumuzda hemen üstüne aşağıdaki kodları ekleyip kaydediyoruz.
/***** OnClick PopUp Email Subscription Form CSS *****/
#popup-wrap .popup-button { background: #A1362A url("https://2.bp.blogspot.com/-5BeaRyWo6FQ/Vc9zn8NV2oI/AAAAAAAADU0/tGTO9XGumUs/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 80px; left: 25px; position: fixed; width: 80px; z-index: 99999; }
#popup-wrap .popup-button:hover { background-color: #70261D; }

#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; }
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }

#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #cc6055; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: "Century Gothic", sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox, 
#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: "Century Gothic",sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #70261D; }

#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: ''; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #70261D; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }
EMail Abonelik Formu HTML Kodu Eklenmesi
  • Blogger kontrol panelinden Şablon Sekmesine sonra da HTML’yi Düzenle tıklıyoruz.
  • CTRL + F tuş kombinasyonu ile kodlar içerisinde </body> kodunu aratıyoruz.
  • Bulduğumuzda hemen üstüne aşağıdaki kodları ekleyip kaydediyoruz.
 <div id="popup-wrap">
  <!-- Subscribe Trigger -->
       <label class='popup-button' for='popup-trigger'></label>

  <!-- Subscribe Content -->
  <input class='popup-trigger' id='popup-trigger' type='checkbox'/>
  <div class='popup-bg'>
            <label class='popup-bg-close' for='popup-trigger' id='popup-close'></label>
            <div class='popup-form'>
                <label class='popup-form-close' for='popup-trigger' id='popup-close'></label>
                <div class='popup-inner'>
                    <!-- Opt-In Subscribe -->
                    <span class="popup-title">Email Aboneliği</span>
                    <span class="popup-content">En Yeni Makaleler Hemen Email Adresinize Gelsin</span>
                    <br/><br/>
                    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=feedburner_kullanici_adiniz&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='feedburner_kullanici_adiniz'/>
                        <input name='loc' type='hidden' value='en_US'/>
                        <input id='mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;EMail Adresiniz...&quot;;}' onfocus='if (this.value == &quot;EMail Adresiniz...&quot;) {this.value = &quot;&quot;}' required='' type='text' value='EMail Adresiniz...'/>
                        <input id='subbutton' title='' type='submit' value='Gönder'/>
                    </form>
                    <br />
                    <span class="popup-footer">EMail adresiniz Paylaşılmayacaktır!</span>
                </div>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->

Üstteki kodlar içerisinde yer alan feedburner_kullanici_adiniz kısmına kendi feedburner kullanıcı adınızı yazınız. ( Kod iki defa bulunmaktadır )

Feedburner kullanıcı adınız, feed adresinizin sonunda yer almaktadır.

Örneğin : http://feeds.feedburner.com/sadriercan

 

12 Yorumlar

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz