E-posta abonelik kutusu eklentisi bloglarda çok önemli bir rol oynamaktadır. Ziyaretçi e-postası ile abone olur ve yayınladığınız her yazı onların e-posta adresine gider. Bu yazımda çok şık tasarımlı bir E-posta abonelik kutusunu sizlerle paylaşacağım. 3 Sosyal medya, 1 RSS butonuyla renkli ve güzel bir E-Posta Aboneliği Kutusu. Umarım hoşunuza gider.
● Blogunuza Şık Abone Kutusu ekleyin.
● Blogger E Posta Aboneliği Kutusu.
ÖNİZLEME
E-posta aboneliği
 |  |  |  |
1. Blogger Kumanda Panelinize gidin.
2. Yerleşim sekmesine tıklayın.
3. Gadget/Widget Ekle,
4. HTML / JavaScript seçeneğini seçin.
5. Aşağıdaki kodu isteğinize göre özelleştirerek, kopyalayın ve yapıştırın.
<style type="text/css">
#subscribe-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswVYtRCygh7xSPoGWchjBOKTynDTfWRsrN7Z7LGASQIg2y5Jznq8bimRBv0ALdfxZkz50oV9tqzOFlxK6x-uQKJLBNIDC-KaC_-AXDiydcS0U3vxuhwX505mfVcoh4ZyvQZzoJLhTBQn-/s1600/border.png) 0 0 repeat scroll transparent;padding:3px;}
#subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVASZQaIgWJLwMBb3d_C8Ej_945xPoR3o7EyEIkls9TEBjg5iUfUaP4ZJrr3LGcBt6Fp_ED9Lv1qB2bk75nS3R8FKigPWQTnFj11oTKyyF0WsgKIBG2s-dTBRL1U3NzgS7CRobpy7xDng/s1600/Backgroundsblogtumblrbrushephotoscape20110705-TH2.png) 0 0 repeat scroll #F7F7F7;border-radius:15px;overflow:hidden;padding:5px;}
a.linkopacity img{opacity:0.5;transition:all .5s ease;border:#999 solid 1px;padding:3px;}
a.linkopacity:hover img{opacity:1;box-shadow:0 0 10px 2px rgba(0,0,0,0.44);}
#subscribe-box:hover table{top:0;}
#subscribe-box h1{margin-top:5px;color:#000;font-family:Georgia, arial;font-size:15px;margin-bottom:5px;line-height:14px;font-weight:700;text-align:center;letter-spacing:-1px;}
#subscribe-box table{position:relative;top:40px;transition:all .5s ease;margin-bottom:0;}
#subscribe-box td{padding:2px;}
#subscribe-box input{background:#FFF;border:none medium;font-size:12px;color:#666;font-family:Georgia, arial;margin-bottom:3px;width:55%;padding:10px;}
#subscribe-box input:focus{outline:none;}
#subscribe-box .submit{background:#E73827;color:#fff;cursor:pointer;font-weight:700;text-shadow:0 1px 2px #000;width:90px;font-family:Georgia, arial;margin-left:-3px;font-size:14px;}
</style>
<div id="subscribe-wrapper">
<div id="subscribe-box">
<h1>E-posta aboneliği</h1>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MeftunMede', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<center>
<input name="email" onblur="if (this.value == "") {this.value = "enter your email address...";}" onfocus="if (this.value == "enter your email address...") {this.value = ""}" size="20" type="text" value="E-mail adresiniz..." />
<input name="uri" type="hidden" value="MeftunMede" />
<input name="loc" type="hidden" value="en_us" />
<input class="submit" type="submit" value="Abone ol" /></center></form>
<center>
<table>
<tbody><tr><td><a href="http://feeds.feedburner.com/MeftunMede" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg015HhEr5bXcMuItUkPv93B0NoymkIyLGivAy4TOpvnXKp07S7ZysxalX_7Xc8w39cyKYa4sXfqWQc_Mco0Uj2_fx50DWfHWALdFWayNFnqyYJRxQl0zIIhWwPkpIbXgOaPZoM6-7uq3Q/s1600/_0041_RSS.png" /></a></td>
<td>
<a href="https://www.facebook.com/meftunmede.blogger" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiygzb1objGLqsf15bRXVkCGMzTx6PcEDnTJ3x5Bu267FRc7IOPpUwgLR28bO2v4qeawH0zSHDtFBRry3z614WrbcGcX_7GV3DjhloUdkdmifD9dzPmccbzdBkcvdGvy8EaA11lLmbBE4tL/s270/_0044_Facebook.png" /></a>
</td>
<td>
<a href="https://twitter.com/MeftunMEDE" class="linkopacity" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgHgW8niDiy31DF0cDyCZzrfYzQEfxP09Bt4lwMVc6TwDQWXKCAn4tiq02ILPQ3cYCd2eob-E629xblZ14ujcICisEahmBgglDgozdRuLL6VuumPuyGs0D78VHQl1KmJiZFrx_Lgcc-E/s1600/_0046_Twitter.png" /></a>
</td>
<td>
<a href="https://plus.google.com/111555326072108216342" class="linkopacity" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbc-uuVP7ZcGaj1zrLLdDKApM8uFjjiIGRzNw_6bGQfZgxHjp1pEuVtJrKv1XdnvJxCNkXfYjggPzw2B9yL9j09AKdLLrB9X5SAAcx-p-eHe3XPZQcDhQGKaloOOYwdusEiQyfqBBBEyDa/s1600/Google+.png" /></a>
</td>
</tr></tbody></table>
</center>
</div></div>
Kodu özelleştirmek ve denemek için Online html editor'ü kullanabilirsiniz.
Yukarıdaki kırmızı ile belirttiğim alanları kendi adınıza göre düzenlemeyi unutmayın! Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...
Kaynak:http://www.meftunmede.com/
Yorum Gönder