Blogger İçin 4 Şık E-Posta Aboneliği Widget'ı

Blogger İçin 4 Şık E-Posta Aboneliği Widget'ı

E-posta aboneliği widget'ı , feedburner tarafından sağlanan blogger kenar çubuğu için bir abonelik formudur ; bu widget,  ziyaretçilerin e-posta yoluyla blogunuzdan en son güncellemeleri almalarına yardımcı olur. İnsanlar sadece e-posta adreslerini girip " Abone Ol " düğmesini tıkladığında, blogunuzun tüm güncellemelerini e-postalarının Gelen Kutusu'ndan alırlar. Bu widgetlar yalnızca trafiğinizi arttırmakla kalmaz aynı zamanda sadık bir okuyucu topluluğu oluşturmanıza yardımcı olur.

E-posta Abonelik Widget'ının Faydaları

E-posta Aboneliği kutusu aynı zamanda bir web sitesini tanıtmanın en iyi yolu olarak kabul edilir. Abonelik widget'i , aktif bir okuyucu topluluğu oluşturmanıza ve blog trafiğinizi artırmanıza yardımcı olur. Daha fazla trafik = Daha fazla AdSense kazancı . Bu widget, okuyucularınıza anında E-posta yoluyla en son gönderileri göndermenize yardımcı olur ve bu widget'in en iyi yanı, okuyucularınızı sosyal medya kanalları üzerinden bağlantı kurmanıza yardımcı olacak sosyal medya bağlantılarını ücretsiz alabilmenizdir.

Blogger’a E-Posta Aboneliği Widget Nasıl Eklenir

Blogger kendi   E-posta aboneliği mevcut ancak bu sosyal medya entegrasyonuna sahip şık bir e-posta aboneliği kutusu kadar çekici değildi . Özel e-posta aboneliği eklendi , e-posta aboneliği hizmeti ve sosyal medya hizmeti sağlar. Blogger için en iyi abonelik widget'ları aşağıdadır, bu nedenle blogunuzun tasarımına göre seçim yapın ve aşağıdaki adımları izleyin:

Seçenek 1:

<style type="text/css">.hbzsignup-form { background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit7fTZPUmTOrFf7jkzBJPukNoWNIHSS3fY-A7HqKd8hwktTCSUln4NopOI8kQniAWwU2fjVSf_-yebBJ9jUPNpjUw0dzqflLJPSAlvnuywJbofUtjFZOnjf22WRlaxMYcq1AjEFUVyTxsu/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px; height: 150px; width: 250px; margin: 10px auto 60px auto; } .hbzform-inner p { text-align: center; color: #fff; padding: 10px; font: bold 18px "trebuchet MS","Tahoma"; } .hbzemailform { margin: 120px auto 5px; width: 215px; } #hbzemailbox { background: #FEFEFE none repeat scroll 0% 0%; border: medium none; font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif; margin-right: 5px; box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186); padding: 7px; box-sizing: content-box; height: 12px; vertical-align: top; display: inline-block; } #hbzemailbutton { background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%; box-shadow: 0px 0px 2px rgb(182, 37, 32) inset; border: medium none; color: #FFF; cursor: pointer; font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif; padding: 6px; border-radius: 5px; height: 27px; display: inline-block; } #hbzemailbutton:hover { background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%; } .hbzsocial-icons { margin: 20px 0 0; overflow: hidden; display: block; text-align: center; } .hbzsocial-icons ul { display: inline-block; margin: 0 auto !important; text-align: center; padding: 0px } .hbzsocial-icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !important; } .hbzsocial-icons ul li::before, .hbzsocial-icons ul li::after { display: none !important; } .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs_xjpNXw3j8KpRceGfYjdpPihWZxHZlBsEW2KOQq__Sws5RE4N5u6m54viUPbqsNp9YNA_XcZabUZzwMyU3FLkrVZNbqOPPaWPfV6vUsnQkpOTjxkxw9PmqG41_Sd-aorKPmDeW3YhYdJ/s1600/sprite_32x32.png") no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 38px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 38px; } .hbzsocial-icons ul li.social-facebook a { background-color: #3b5998; background-position: -60px 3px; } .hbzsocial-icons ul li.social-twitter a { background-color: #00aced; background-position: -253px 3px; } .hbzsocial-icons ul li.social-gplus a { background-color: #dd4b39; background-position: -93px 3px; } .hbzsocial-icons ul li.social-pinterest a { background-color: #cb2027; background-position: -157px 3px; } .hbzsocial-icons ul li.social-rss a { background-color: #F87E12; background-position: -189px 3px; } .hbzsocial-icons ul li a:hover { background-color: #333; } .hbzsocial-like { display: block; text-align: center; } .hbzsocial-like tbody, .hbzsocial-like tbody tr { display: block; } .hbzfb-likes { display: inline-block; padding-bottom: 15px; margin-right: 5px; } .hbztw-follow { display: inline } </style> <div> <div class='hbzsignup-form'> <div class='hbzform-inner'> <p>Sign Up for Email Updates</p></div><div class='hbzemailform'> <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]'/> <input name='loc' type='hidden' value='en_US'/> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter your email...'/> <input id='hbzemailbutton' title='' type='submit' value='Sign up'/> </form></div></div><div class="hbzsocial-icons"> <ul><li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li><li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li><li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li><li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li><li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li></ul></div><table class='hbzsocial-like'> <tbody><tr> <td class='hbzfb-likes'> <div id="fb-root"> </div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"> </div></td> <td class='hbztw-follow'> <a href="[Twitter url]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script> </td> </tr><tbody> </table></div>

Seçenek 2:

<style type="text/css">.hbzsub { background-color: #1E293B; width: 100%; height: 100%; box-shadow: 0px 0px 10px rgb(30, 41, 59); } .hbzemailform { width: 239px; margin: 10px auto; } .hbzform-inner h4 { color: rgb(255, 255, 255); text-align: center; padding: 10px; font: bold 18px/40px "trebuchet MS","Tahoma"; } #hbzemailbox { background-color: #FFF; border: 1px solid #FFF; border-radius: 7px 0px 0px 7px; height: 20px; padding: 6px; box-sizing: content-box; } #hbzemailbutton { background-color: #F0553B; border: 1px solid #F0553B; color: #FFF; height: 34px; border-radius: 0px 7px 7px 0px; margin-left: -4px; font-weight: 600; cursor: pointer; } #hbzemailbutton:hover { background-color: #1E293B; border: 1px solid #FFF; box-shadow: 0 0 5px #ddd; } .hbzsocial-like { background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGsrALZHZM0DRzbNV87ugRGSIbtTIGqKDF-0FosGP2z1eXjRsljQzpJ7fi1yVYYiVfwmhx6xPE_VR2PuqnF3swi3rLxStXLeT0l7Fh6Oxi4kuGX8mnnhRLu-smYdn42PeBDAWPq6C0c6fv/s1600/Facebook-twitter-rectangle.png") no-repeat scroll center center / 250px 157px; width: 250px; height: 120px; margin: 10px auto; } .hbzfb-likes { margin-top: 90px; margin-left: 20px; position: absolute; display: block; box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73); } .hbztw-follow { display: block; margin-left: 152px; position: absolute; margin-top: 89px; box-shadow: 0 0 10px rgba(2, 81, 173, 0.59); height: 20px; } </style> <div class="hbzsub"> <div class='hbzsignup-form'> <div class='hbzform-inner'> <h4>Get Posts In Your Inbox</h4></div><div class='hbzemailform'> <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]'/> <input name='loc' type='hidden' value='en_US'/> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter Your Email Here...'/> <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/> </form></div></div><table class='hbzsocial-like'> <tbody><tr> <td class='hbzfb-likes'> <div id="fb-root"> </div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"> </div></td> <td class='hbztw-follow'> <a href="[Twitter url]" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script> </td> </tr></tbody> </table></div>

                                                  Seçenek 3:

<style type="text/css">.hbzsub { background-color: rgb(87, 98, 105); width: 100%; height: 100%; padding: 5px; box-shadow: 0px 0px 5px rgb(87, 98, 105); } .hbzform-inner { text-align: center; color: rgb(255, 255, 255); font: bold 16px "trebuchet MS","Tahoma"; } .hbzemailform { width: 240px; margin: 10px auto; } #hbzemailbox { background-color: #798187; color: #FFF; width: 208px; border: 1px solid #697780; padding: 15px; text-align: center; height: 18px; box-sizing: content-box; } #hbzemailbutton { background-color: rgb(243, 93, 92); border: 1px solid rgb(215, 84, 83); color: rgb(255, 255, 255); width: 240px; font: bold 16px "trebuchet MS","Tahoma"; padding: 15px; text-align: center; height: 50px; margin: 10px auto; cursor: pointer; } #hbzemailbutton:hover { background-color: #E64C4B; border: 1px solid #BF4A49; } .hbzsignup-form { margin-top: 15px; } .hbzsocial-icons { overflow: hidden; text-align: center; border-bottom: 1px solid rgb(133, 133, 133); width: 230px; display: block; margin: 20px auto; } .hbzsocial-icons ul { margin: 0px auto !important; text-align: center; padding: 0px !important; display: inline-block; } .hbzsocial-icons ul li { background: transparent none repeat scroll 0% 0% !important; border: medium none !important; float: left; list-style-type: none !important; padding: 0px !important; margin: 0px 2px !important; } .hbzsocial-icons ul li::before, .hbzsocial-icons ul li::after { display: none !important; } .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs_xjpNXw3j8KpRceGfYjdpPihWZxHZlBsEW2KOQq__Sws5RE4N5u6m54viUPbqsNp9YNA_XcZabUZzwMyU3FLkrVZNbqOPPaWPfV6vUsnQkpOTjxkxw9PmqG41_Sd-aorKPmDeW3YhYdJ/s1600/sprite_32x32.png") no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 34px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 34px; } .hbzsocial-icons ul li.social-facebook a { background-position: -62px 1px; } .hbzsocial-icons ul li.social-facebook a:hover { background-color: #3b5998; } .hbzsocial-icons ul li.social-twitter a { background-position: -254px 1px; } .hbzsocial-icons ul li.social-twitter a:hover { background-color: #00aced; } .hbzsocial-icons ul li.social-gplus a { background-position: -95px 0px; } .hbzsocial-icons ul li.social-gplus a:hover { background-color: #dd4b39; } .hbzsocial-icons ul li.social-pinterest a { background-position: -159px 1px; } .hbzsocial-icons ul li.social-pinterest a:hover { background-color: #cb2027; } .hbzsocial-icons ul li.social-rss a { background-position: -190px 0px; } .hbzsocial-icons ul li.social-rss a:hover { background-color: #F87E12; } </style> <div class="hbzsub"> <div class="hbzsocial-icons"> <ul><li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li><li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li><li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li><li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li><li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li></ul></div><div class='hbzsignup-form'> <div class='hbzform-inner'> <h4>Subscribe to my Newsletter</h4></div><div class='hbzemailform'> <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]'/> <input name='loc' type='hidden' value='en_US'/> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/> <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/> </form></div></div></div>

Seçenek 4:

<style type="text/css"> .hbzsub { background-color: rgb(255, 255, 255); width: 100%; height: 100%; border: 1px dashed #ddd; } .hbzsube { color: rgb(255, 255, 255); background-color: rgb(11, 172, 227); padding: 10px 0; text-align: center; font: bold 15px "trebuchet MS", "Tahoma"; width: 100%; } .hbzemailform { width: 235px; margin: 10px auto; } #hbzemailbox { background-color: #FFF; color: #747474; width: 130px; border: 1px solid #D8D8D8; padding: 7px; height: 18px; display: inline-block; vertical-align: top; box-shadow: inset 0px 0px 5px #c2c2c2; box-sizing: content-box; font-size: 13px; } #hbzemailbutton { background-color: rgb(243, 93, 92); border: 1px solid rgb(215, 84, 83); color: rgb(255, 255, 255); width: 85px; font: bold 13px "trebuchet MS", "Tahoma"; padding: 7px; text-align: center; cursor: pointer; display: inline-block; height: 34px; } #hbzemailbutton:hover { background-color: #E64C4B; border: 1px solid #BF4A49; } .hbzsignup-form { margin-top: 15px; } .hbzsocial-icons { overflow: hidden; text-align: center; display: block; margin: 20px auto; } .hbzsocial-icons ul { margin: 0px auto !important; text-align: center; padding: 0px !important; display: inline-block; } .hbzsocial-icons ul li { background: transparent none repeat scroll 0% 0% !important; border: medium none !important; float: left; list-style-type: none !important; padding: 0px !important; margin: 0px 5px !important; } .hbzsocial-icons ul li::before, .hbzsocial-icons ul li::after { display: none !important; } .hbzsocial-icons ul li a { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs_xjpNXw3j8KpRceGfYjdpPihWZxHZlBsEW2KOQq__Sws5RE4N5u6m54viUPbqsNp9YNA_XcZabUZzwMyU3FLkrVZNbqOPPaWPfV6vUsnQkpOTjxkxw9PmqG41_Sd-aorKPmDeW3YhYdJ/s1600/sprite_32x32.png") no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; height: 34px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 34px; } .hbzsocial-icons ul li a:hover { background-color: #aeaeae !important; } .hbzsocial-icons ul li.social-facebook a { background-position: -62px 1px; background-color: #3b5998; } .hbzsocial-icons ul li.social-twitter a { background-position: -254px 1px; background-color: #00aced; } .hbzsocial-icons ul li.social-gplus a { background-position: -95px 0px; background-color: #dd4b39; } .hbzsocial-icons ul li.social-pinterest a { background-position: -159px 1px; background-color: #cb2027; } .hbzsocial-icons ul li.social-rss a { background-position: -190px 0px; background-color: #F87E12; } </style><div class="hbzsub"> <div class="hbzsube">Join Our Free Newsletter</div><div class='hbzsignup-form'> <div class='hbzemailform'> <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]' /> <input name='loc' type='hidden' value='en_US' /> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email address' /> <input id='hbzemailbutton' title='' type='submit' value='Join Us' /> </form></div><div class="hbzsube">Sociliaze with Us</div><div class="hbzsocial-icons"> <ul><li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li><li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li><li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li><li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li><li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li></ul></div><div style="width: 230px; margin: 0px auto;"> <div id="fb-root"></div><script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-page" data-href="[Fb url]" data-width="230" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-hide-cover="true" data-show-facepile="true"> <div class="fb-xfbml-parse-ignore"> <blockquote cite="[Fb url]"><a href="[Fb url]">[Fb Page Name]</a></blockquote></div></div></div></div></div>


Blogger'a Bu Şık Abonelik Widget'ı Nasıl Eklenir

1. Adım . Blogger hesabınıza giriş yapın , ardından Düzen >sol taraftaki ' Gadget ekle ' bağlantısını tıklayın.

Adım 2. Seç HTML / JavaScript gelen pop-up > penceresinin boş kutunun içine abonelik widget yapıştırın.

Keyfini çıkarın !

Artık blogunuza gelen ziyaretçiler Abonelik widget'ını kullanarak blogunuza kolayca abone olabilir . Yukarıdaki Abonelik kutuları ile ilgili herhangi bir sorun için Lütfen Aşağıda yorum yapın. Yakında daha fazla Abonelik widget'ı eklenecek. Güncelleme, için takipte kalın Abone olun :))

Kodlara sosyal medya adreslerinizi ve feedburner adresinizi eklemeyi unutmayın

Bu gönderiyi beğendiniz mi? Lütfen paylaşın.