Subscribe Box is very important to through the traffic and also your other pages. Today I’ll show you how to add a beautiful Subscribe Box in Blogger. This box contains your Facebook Page, your RSS Feed, your Google + Account, Twitter Account, Which can help the visitors to subscribe your site. This subscribe box have a beautiful look as I’m also using this one.
Live Demo
How To Add This Widget In Blogger ?
- First Go to Blogger Dashboard > Layout
- Add a HTML / JavaScript Gadget
- Paste the following code in it
<div dir="ltr" style="text-align: center;" trbidi="on"><div style="text-align: -webkit-auto;"><span style="background-color: white;"><img alt="button_subscribenow.png (314×89)" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh25p4urLO-e4b-JkDjAVS9dWFc0rskfOaXzeshvV7D9VBb4U8J6LsTRAiM9szto2KkA8icMpG2vJDUeNkuYFgIoxEjHBo2sIHRlRmCyYPdGkyENKJKdARofQPE26vJFbOv0ZniUPeswyYL/s1600/1.gif" width="300" /></span></div></div><b></b><div class="subicons" style="background-color: white; border-bottom-color: rgb(230, 230, 230); border-bottom-style: solid; border-bottom-width: 1px; color: #666666; float: left; font-family: Helvetica, Arial; font-size: 12px; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: -webkit-auto; width: 300px;"><div class="rssicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPcV6u5eTp9XSkaMYb1Os84QJDe6rhYQOSm4yBwdegVoELkmsgxVC1YwN6U1_iZ3CZcQKDwlPGVoDyrAvdyrHF3MgwOgTU9et2m5GnAmxbQ6xXimshBvLO8G1tazz5cbSkpDbmOYRPFF_z/s400/rsssprite.png); background-origin: initial; background-position: 0px 5px; background-repeat: no-repeat no-repeat; border-right-color: rgb(230, 230, 230); border-right-style: solid; border-right-width: 1px; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 2px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;"><b> <a href="http://feeds.feedburner.com/blogspot/ImmjQ" rel="nofollow" style="color: #333333; text-decoration: none;" target="_blank"> RSS</a></b></div>
<div class="googleicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPcV6u5eTp9XSkaMYb1Os84QJDe6rhYQOSm4yBwdegVoELkmsgxVC1YwN6U1_iZ3CZcQKDwlPGVoDyrAvdyrHF3MgwOgTU9et2m5GnAmxbQ6xXimshBvLO8G1tazz5cbSkpDbmOYRPFF_z/s400/rsssprite.png); background-origin: initial; background-position: 0px -37px; background-repeat: no-repeat no-repeat; border-right-color: rgb(230, 230, 230); border-right-style: solid; border-right-width: 1px; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 2px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;">
<b> <a href="https://plus.google.com/u/0/107458552955931931823" rel="author" style="color: #333333; text-decoration: none;" target="_blank"> G+</a></b></div>
<div class="fbicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPcV6u5eTp9XSkaMYb1Os84QJDe6rhYQOSm4yBwdegVoELkmsgxVC1YwN6U1_iZ3CZcQKDwlPGVoDyrAvdyrHF3MgwOgTU9et2m5GnAmxbQ6xXimshBvLO8G1tazz5cbSkpDbmOYRPFF_z/s400/rsssprite.png); background-origin: initial; background-position: 0px -79px; background-repeat: no-repeat no-repeat; border-right-color: rgb(230, 230, 230); border-right-style: solid; border-right-width: 1px; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 20px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;">
<b> <a href="https://www.facebook.com/pages/My-Blogger-Widgets/476605042387302" rel="nofollow" style="color: #333333; text-decoration: none;" target="_blank">FB</a></b></div>
<div class="twittericon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPcV6u5eTp9XSkaMYb1Os84QJDe6rhYQOSm4yBwdegVoELkmsgxVC1YwN6U1_iZ3CZcQKDwlPGVoDyrAvdyrHF3MgwOgTU9et2m5GnAmxbQ6xXimshBvLO8G1tazz5cbSkpDbmOYRPFF_z/s400/rsssprite.png); background-origin: initial; background-position: 0px -121px; background-repeat: no-repeat no-repeat; float: left; height: 48px; line-height: 57px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; min-width: 20px; padding-bottom: 0px; padding-left: 30px; padding-right: 10px; padding-top: 0px; vertical-align: middle;">
<b> <a href="https://twitter.com/MyBloggerWidget" rel="nofollow" style="color: #333333; text-decoration: none;" target="_blank">Twitter</a></b><br />
<br /></div></div>
<div class="emailsub" style="background-color: white; border-bottom-color: rgb(230, 230, 230); border-bottom-style: solid; border-bottom-width: 0px; color: #666666; float: left; font-family: Helvetica, Arial; font-size: 12px; line-height: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 15px; text-align: -webkit-auto; width: 300px;">
<div class="emailicon" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ujpKTnHEOiJzIYjFjJ9Xt4ZUILX_5FZgo3wb5tyEfOi4Q8YR2o-UJ5IDcscZZw7q7TEicUcGAWXWfEc-ZtRSeP2xOm3HAGIIBWUr0caAQEm7LiiHONoAy5IqUpD92eIUnaAwR-gfomM/s400/email.png); background-origin: initial; background-position: 0px 2px; background-repeat: no-repeat no-repeat; color: #333333; float: left; font-size: 14px; line-height: 20px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 40px; padding-right: 15px; padding-top: 0px; vertical-align: middle; width: 300px;">
<div style="color: #3a3a3a; font-size: 13px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 270px;">
Receive Quality Updates Straight in your Inbox by submitting your Email ID below<b>.</b></div></div>
<div class="emailupdatesform" style="float: left; margin-bottom: 5px; margin-left: 5px; margin-right: 0px; margin-top: 15px; width: 300px;">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/ImmjQ" method="post" target="popupwindow">
<b><input class="emailupdatesinput" gtbfieldid="10" name="email" style="background-attachment: initial !important; background-clip: initial !important; background-color: rgb(255, 255, 255) !important; background-image: initial !important; background-origin: initial !important; border-bottom-color: rgb(210, 210, 210); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(210, 210, 210); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(210, 210, 210); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(210, 210, 210); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-top-width: 1px; color: #a19999; float: left; height: 25px; padding-bottom: 0px; padding-left: 8px; padding-right: 8px; padding-top: 0px; width: 185px;" type="text" value="Enter your email here..." /><input class="joinemailupdates" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(87, 171, 254)), to(rgb(32, 144, 254))); background-origin: initial; border-bottom-color: rgb(32, 144, 254); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(32, 144, 254); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(32, 144, 254); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(32, 144, 254); border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-style: solid; border-top-width: 1px; color: white; cursor: pointer; font-family: arial; font-weight: bold; height: 25px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 12px; padding-right: 12px; padding-top: 0px; text-transform: uppercase;" type="submit" value="Submit" /></b></form></div></div><b></b>
Customization
- Now replace this http://feeds.feedburner.com/blogspot/ImmjQ with your RSS Feed address
- Rplace this https://plus.google.com/u/0/107458552955931931823 with your Google Plus Address
- Replace this https://www.facebook.com/pages/My-Blogger-Widgets/476605042387302 with your Facebook Page Address
- Replace this https://twitter.com/MyBloggerWidget with your Twitter Address
