Add A Beautiful Subscribe Box In Blogger

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/AVvXsEjbS0dQzRy8HiASSmEFaLimJ7C1WuF8y2J92jdaM1jdD7gqadbm2SUAXWOXphBhRjWx35pne8Cd175BpZFSr_bqhLzg2jCWsNG2-fJhDkq82cO4fiGQL0B5dVz8zV83ocGLIOFaUfAHESRI/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/AVvXsEjGF5UmMJKU7CfuAIGV3KkXCoouav1lA67DtB5bp6mXa466_ppkCapgti-eDXEe6vmLraI3FWSvNgXmaMLt9aHiXLMbgKtr25ziRTsKLEXRfWRa3bid9WVhh5xYgpR8ey0BD6VFZj3Hlr8z/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>&nbsp;<a href="http://feeds.feedburner.com/blogspot/ImmjQ" rel="nofollow" style="color: #333333; text-decoration: none;" target="_blank">&nbsp;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/AVvXsEjGF5UmMJKU7CfuAIGV3KkXCoouav1lA67DtB5bp6mXa466_ppkCapgti-eDXEe6vmLraI3FWSvNgXmaMLt9aHiXLMbgKtr25ziRTsKLEXRfWRa3bid9WVhh5xYgpR8ey0BD6VFZj3Hlr8z/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>&nbsp;<a href="https://plus.google.com/u/0/107458552955931931823" rel="author" style="color: #333333; text-decoration: none;" target="_blank">&nbsp;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/AVvXsEjGF5UmMJKU7CfuAIGV3KkXCoouav1lA67DtB5bp6mXa466_ppkCapgti-eDXEe6vmLraI3FWSvNgXmaMLt9aHiXLMbgKtr25ziRTsKLEXRfWRa3bid9WVhh5xYgpR8ey0BD6VFZj3Hlr8z/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>&nbsp;<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/AVvXsEjGF5UmMJKU7CfuAIGV3KkXCoouav1lA67DtB5bp6mXa466_ppkCapgti-eDXEe6vmLraI3FWSvNgXmaMLt9aHiXLMbgKtr25ziRTsKLEXRfWRa3bid9WVhh5xYgpR8ey0BD6VFZj3Hlr8z/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>&nbsp;<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/AVvXsEjJHtMmmdqQ2jjXs5-mA17dGBX_FU4izalQmr2H1Av9LCau5oItFqp_RimrQ3GESk-C-fg1InlmTqpXXQzTGdBPDuMEDrUS6M63u5U4rJnyFg8X_GilORW57szf95L1BEB3ZJFLKuvEx_Y/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 &nbsp;&nbsp; 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

Finnally you are done ! Share with your Friends and if you face any problem then leave a comment