Feedburner E-mail Abone Ol Formu

blogger-abone-eklentisi

  Blogger kullanıcıları için hazırlanmış gayet kullanışlı bir eklenti paylaşmak istiyorum. E-mail abone eklentileri sadık ziyaretçi kazanmanın ve trafiği artırmanın en zor ama en garantili yollarından biridir. Bu formlar aracılığı ile blog okuyucularınızdan oluşan ailenize yeni üyeler katabilirsiniz. Blogger kullanıcılarının genelde yakındığı durum kodları manuel olarak eklemek zorunda olmalarıdır. Doğrudan bir eklenti olmadığı için bu tür göze hoş gelen ve ziyaretçiyi kaçırmayacak yöntemler bulmak zorunda kalıyoruz. Aşağıda vereceğim iki kodu gösterdiğim yere eklediğinizde hiçbir sorun yaşamadan e-mail abone formunu kullanmaya başlayabilirsiniz.

  Bu eklenti ile sayfanızın sol alt köşesinde simge oluşacaktır. Bu simgeye tıklanıldığında pop up açılan bir form sizi karşılayacak. Hem hızlı bir eklenti hem de ziyaretçilerin okumalarına engel olmayan bir format'ta hazırlanmıştır. Aradığınız eklentiyi bulduğunuza göre hangi aşamaları takip edeceğinize geçelim. Öncelikle her zaman ki gibi Blogger kumanda panelinde Tema sekmesine tıklayarak kodlarınıza ulaşmanız gerekiyor. Kodların bulunduğu alana tıklayarak Ctrl+F yardımıyla ]]></b:skin> kodunu aratın ve hemen üstüne aşağıdaki CSS kodunu ekleyin.

/***** OnClick PopUp Email Subscription Form CSS *****/
#popup-wrap .popup-button { background: #A1362A url("http://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); }

  Bu işlemden sonra aynı alanda </body> kodunu aratın ve hemen üstüne aşağıdaki HTML kodunu yapıştırın ve kaydedin.

 <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">E-mail Abonelik Formu</span>
                    <span class="popup-content">En Yeni Makaleler Hemen E-mail 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=dogushakanyilmaz&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='dogushakanyilmaz'/>
                        <input name='loc' type='hidden' value='en_US'/>
                        <input id='mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-Mail Adresiniz...&quot;;}' onfocus='if (this.value == &quot;E-Mail Adresiniz...&quot;) {this.value = &quot;&quot;}' required='' type='text' value='E-Mail Adresiniz...'/>
                        <input id='subbutton' title='' type='submit' value='Gönder'/>
                    </form>
                    <br />
                    <span class="popup-footer">E-Mail adresiniz Paylaşılmayacaktır!</span>
                </div>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->
  Kırmızı ile belirttiğim alanları kendinize göre düzenleyebilirsiniz. Feedburner kullanıcı adınızı eklemeyi unutmayın.

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

YAZIYI PAYLAŞ

BENZER YAZILAR

SONRAKİ
« Prev Post
ÖNCEKİ
Next Post »

4 yorum

yorum YAZ
31 Ekim 2017 00:44

Çok kullanışlı ve tasarımı hoş bir eklenti. Çalışıyor mu diye sana e-posta abonesi oldum :) Çalışırsa belki kullanabilirim. Ama /body arasına eklediğimiz kodlar sayfa hızını etkiliyor haberin olsun.

Cevap Ver
avatar
31 Ekim 2017 12:09

Abone olmuşsun ama tamamlamamışsın:) Bende kullanıyorum ve çalışıyor. Sayfa hızını kontrol ediyorum ve fazla eklenti yok zaten. Teşekkürler

Cevap Ver
avatar
10 Kasım 2017 16:44

Kullanışlı bir abonelik eklentisi, kodlarla biraz oynayarak bunu wordpress altyapılı bloğumda kullanabilirim.
Teşekkürler paylaşım için. Benim için çok faydalı olabilecek bir eklenti.

Cevap Ver
avatar
10 Kasım 2017 19:23

Bende severek kullanıyorum. Hem pratik hem de mobil uyumlu..Abone hedefi olanlar için ideal yöntem.

Cevap Ver
avatar

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.