CARA TAMBAHKAN BERLANGGANAN FORM DI BLOG

HOW TO ADD SUBSCRIPTION FORM IN BLOG

Posted by Mohammad Nafis On 23:38 Blogger Widget

hey welcome back ,today in this post i will show you how to add "beautiful subscription" form in your blogger blog,with social media,after adding this widget into your blog, your visitor easily contact with your social network,and in this subscription form i have added e mail subscription form also there your visitor, can join with your feed burner to get free update into her/his e mail box

---

How To Add This widget

---

To Add Beautiful subscription box follow these step

1  Log in Your account

2.click on the layout

3 click Add gadget

4.Select  HTML/JAVASCRIPT

5.Copy the below code and past it

<style>
  .mbtbar{width: 100%; float: left;}

    .mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}

    .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}

    .mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
    .mbtbar .subicons a{text-decoration: none; color:#333333;}
    .mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
 

.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyYlvmw9K1MjMT3glZV_HONbrTu5MOUSQlXLU1rZcPuZjF_bPIUSo0JS_zAW8eEPWtlZVsvbbd0m7J8pjzAzLOspOG9z_5yipiqNX8m9-LKBHIa_OYVtwu1ydWsYii8znG5tR5XjnMiyw/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
   


    .mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG24uBKCU3WcR7AxawCTSBiMTzZZv0BJTMqMfqjuO4eBs0LqUQv9oT79lNeClQ4Rk4wb2_QgDmg-NTNTGtaEZu2JdbTv3YtfuRsi9mIjcIHTqhdx8lV24I921W4K3KScbDd0REB6EjkHs/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

    .mbtbar .subicons .twittericon{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj148qEK4TgUtyEt8DRX4zuUgJldRB5UYrC8ZxsFaP8rO412-H8CAmZ0oYVBqprJnxM6qKNM3ZruT8g8-4CN2qJ15UVld0QRzo9ZlFpTkNO_haQY0oCOS1cynSkQ0u9dxyrklKv4Mp_5z4/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

    .mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

    .mbtbar .emailsub .emailicon{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhofzXkynl43c1Ea1_FFO1Ll0zLCdzU2otGeimr6sAmiZA12JG_K8R-LYmGk-aBPqdG-28p3Q8MqgqEm1tOejYDLSHQD8ESynzJUgVjj8Ocdn3HNcGs6vz5JvHENRXPDJdKJ2TF2W9XFbk/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }

    .mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}

    .mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

    .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradientundefinedtop,#57ABFE 0%,#0080ff 100%); background:-webkit-gradientundefinedlinear,left top,left bottom,fromundefined#57ABFE),toundefined#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
    </style>

    <!--[if IE 7]>
    <style>
   .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }

    .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
    </style>
    <![endif]-->

    <div class="mbtbar"><div class="count">Join <span class="bigcount">100+</span> People Following HTD</div><div class="subicons"><div class="rssicon"><a href=&;http://www.nafisflahi.blogspot.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/alltypsms" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/nafis922" target="_blank" rel="nofollow">Twitter</a></div></div>
    <div class="emailsub">
    <div class="emailicon">Stay Updated via Email Newsletter</div>
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qoWbk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if undefinedthis.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" onfocus="if undefinedthis.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="blogspot/qoWbk" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

• Replace thehttp://www.nafisflahi.blogspot.com/feeds/posts/defaultwith you
  feed Burner Rss link
• Replace thealltypsmswith your Facebook page name 
•  Replace thenafis922with your Twitter user name 
•  Replace theblogspot/qoWbkwith you feed burner RSS E mail link 
• Replace the blogspot/qoWbkwith you RSS feed burner title