Blog Sayfanıza Hava Katacak E-Mail Abone Kodu

Blog sayfalarının kaliteli ve faydalı içerik üretme zorunluluğu kalıcı takipçi kazanmaları içindir. Sosyal ağ hesaplarınızla, GFC gibi blog servislerinin sağladığı imkanlarla veya Feedburner aracılığı ile takipçi hedefleyebilirsiniz. Diğer takip yöntemleri sizin yeni içerik girmenizden çok ziyaretçinin sizi ziyaret etmek istemesinden kaynaklanır. Feedburner ile her yani yazı yayınladığınızda otomatik olarak abonenin mail adresine gönderilir. Böylece yeni yazınızı okuması ve geri dönüş yapması daha muhtemel olur.

Feedburner aboneliği istenildiği takdirde çıkabileceğiniz bir yöntemdir. Bu nedenle başkalarını takip etmek için mail adresinizi eklemeyi dert etmeyin. Özellikle yazılarını başarılı bulduğunuz ve size faydasını olacağını düşündüğünüz bloglar için abone olmanız sizin yararınızadır. Ürettiğiniz içerikleri daha çok kitleye ulaştırmak içi her yol mübahtır. Blog sayfanıza eklediğiniz abonelik formlarını kendi sayfanıza göre düzenleyip ilgi çekici hale getirerek bazı bilgiler ekleyebilirsiniz.

Formlarda bilgi olarak kaç takipçiniz olduğunu veya ilgili olduğunuz kategorileri vererek abone olmaları için ziyaretçileri yönlendirebilirsiniz. Aşağıda görselini gördüğünüz eklenti üzerine gelindiğinde hareket eden şık bir formdur. Renkleri ve boyutlarıyla dilediğiniz gibi oynayabilirsiniz.

Nasıl Eklerim?

Hemen aşağıdaki kodu "Gadget Ekle" yöntemiyle JavaScript olarak ekleyin. Kırmızı ile belirttiğim dogushakayilmaz kısmını kendinize göre düzenlemeyi unutmayın.

<div id='subscribe-css'>
<p class='subscribe-note'><span>ABONE OLUN</span> <span class='itatu'>ve</span> Yeni Yazıları Yakından Takip Edin</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=dogushakanyilmaz' class='subscribe-form' method='post' onsubmit='window.open (&apos;https://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 autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='E-mail Adresinizi Giriniz'/><input class='subscribe-css-email-button' title='' type='submit' value='Gönder'/></form>
</div>
</div>
</div>

Aşağıdaki kodu da tema kodlarının içindeki ]]></b:skin> kodunun hemen üstüne ekleyerek kaydedin. Abone formunun renkleriyle ilgili değişiklikleri buradan yapacaksınız. Kırmızı ile belirttiğim #374760 kodu arka plan rengini, #3cc091 ise "Gönder" butonu rengini temsil eder. Dilediğiniz renk kodu ile değiştirebilirsiniz.

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:52%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}