Feedburner E-mail Abone Ol Formu
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQlIVfQTsia4TCWZNV602nhCMQ30arW7KYEDjZzNZgc66YJpawy7y47me4LIzJJjMf5LAPghFcDNY7XTepcxJZZpnIBl0nDe26dsRNZu4MsDVa586S1a4F8D_lQjzqUq69pHu3ru6PTTkb/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">Kırmızı ile belirttiğim alanları kendinize göre düzenleyebilirsiniz. Feedburner kullanıcı adınızı eklemeyi unutmayın.
<!-- 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('http://feedburner.google.com/fb/a/mailverify?uri=dogushakanyilmaz', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "E-Mail Adresiniz...";}' onfocus='if (this.value == "E-Mail Adresiniz...") {this.value = ""}' 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 -->
✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵
