How To Add Cool Stylish Email Subscription Box in Blogger

Sharing The Subscription Widget, Such a it very Usefull Widget for Blog. First of all it Created For only Wordpress. Now We Provide it in Stylish Subscription Box for blog, and you can easily Add it to blogger blog. it is a best Email Subscriber widget to increase traffic from Social Media RSS, Google+ Facebook, and Twitter. The widget Provide new update on the blog and atumaticaly send an email from the blog to the subscriber. Now, The widgets fully customized no need more customization, Sample Method to use it in blogger blog. This Tutorial will show you How to Add Cool Stylish Email Subscription Box in Blogger. We hope you will Enjoy it Widgets. Now follow Some sample steps and add it to blogger blog. After adding it Email Subscription Widget Simply Change the Social Media (URL) and Put your Social Media urls and you are ready to use it.

Live Demo

How To Add it To Blog

1. Go To Blogger Daseboard

2. Go To Blogger = Layout

3. Click Add a Gadget or Page Element

4. Select HTML Widget.

5. Now, Inside This HTML Widget Paste the below code.

<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="http://4.bp.blogspot.com/-zTEOdXhZUM/Tv1n9zevmlI/AAAAAAAAAq8/Z31S49oHxlU/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/AVvXsEj9acmtt6FpSNOH_vNVVw2araVELn9AmZ63c7KcZ8p9y1g_Wgra5d4uXao7lA9-rSBPg5Zu6pewe9LaSBhXTbS1yy7VO6Fhe6linG53DuzgJzxbrRuruqypeLNTJxkIFmMqgVCtALP9kc6P/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/BestBloggerRecipes" 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/AVvXsEj9acmtt6FpSNOH_vNVVw2araVELn9AmZ63c7KcZ8p9y1g_Wgra5d4uXao7lA9-rSBPg5Zu6pewe9LaSBhXTbS1yy7VO6Fhe6linG53DuzgJzxbrRuruqypeLNTJxkIFmMqgVCtALP9kc6P/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/113110741508807709179/posts" 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/AVvXsEj9acmtt6FpSNOH_vNVVw2araVELn9AmZ63c7KcZ8p9y1g_Wgra5d4uXao7lA9-rSBPg5Zu6pewe9LaSBhXTbS1yy7VO6Fhe6linG53DuzgJzxbrRuruqypeLNTJxkIFmMqgVCtALP9kc6P/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/Best-Blogger-Recipies/1423411951219788" 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/AVvXsEj9acmtt6FpSNOH_vNVVw2araVELn9AmZ63c7KcZ8p9y1g_Wgra5d4uXao7lA9-rSBPg5Zu6pewe9LaSBhXTbS1yy7VO6Fhe6linG53DuzgJzxbrRuruqypeLNTJxkIFmMqgVCtALP9kc6P/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="http://twitter.com/mybloggerrecipi" 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/AVvXsEjb7BuC9ZDXJrM71XzB_Dqaq29mkmvNt1f-ustj8RekAGIp6Wfck4oWn7-axhGhhlJppqA24eBGrdND1x-ujOmackE3-lHZ77R0c7fZlQOS0EraqsttWn_qfCunLtEvf9g3D50uZGEa2cc/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=MyBloggerRecipes" 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(0, 128, 255))); background-origin: initial; border-bottom-color: rgb(0, 128, 255); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(0, 128, 255); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(0, 128, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(0, 128, 255); 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>

Now Simply Change Some URLS

Replace The Yellow Color Link:

With Your (FeedBurner) Link To Find your Feedburner visit your feedburner account then navigate to Edit Feedburner setting

Replace The Red Color Link:

With Your (Google + Profile) By Visiting G+ Home Navigate to Profile copy the Link and Replace

Replace The Orange Color Link:

With Your (FaceBook Fan Page) By Visiting Your Facebook account open your facebook page and copy the Url and Simply Replace the URL with Yours

Replace The Blue Color Link:

With Your (Twitter URL) By Visiting Your Twitter Navigate to Me on Twitter and Copy the URL and Replace The URL With Yours

Finally Word BBR

We Hope You Enjoyed this tutorial and would have helped for you, For any problem Kindly leave your comment below and we recommend to share the post with others to save their blog from unwanted or harmful updates from google panda updates.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Best Blogger Recipes

Friday, 1 November 2013