Blogger Sayfanız için Modern E-Posta Abonelik Eklentisi

Blogger 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.

Şimdi Modern E-Posta Abonelik Eklentisinin blogumuza nasıl ekleyeceğiz onu anlatalım ;

Öncelikle Blogger Yönetim panelimize giriş yapalım. Ve HTML editör sayfamızı açalım.

HTML editör sayfamızda Ctrl+F yardımıyla ]]></b:skin> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.

CSS/* 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:35%;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%;}

Şimdi gelelim E-Posta hesabımızı blogumuzda aktif şekilde kullanabileceğimiz yere eklemeye. Ben bunun için </body> kodunu seçtim yani aşağıda ki HMTL kodlarını </body> kodundan öncesine ekleyerek işlemi tamamlayalım.

HTML<div id='subscribe-css'>
<p class='subscribe-note'>
<span>ABONE OL</span> <span class='itatu'>VE</span>YENİ YAZILARDAN HABERDAR OL.</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Blogİsminiz' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=Blogİsminiz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='Blogİsminiz'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='E-POSTA ADRESİNİZ'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

Aşağıda ki Demo sayfamızı kontrol edebilirsiniz.

Demo Buraya Tıkla