Blogger9:- Add css feedburner stylish subscription box in blogger blog. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

Hi Now add this best css design feedburner subscription box in blogger easily.

Follow simple and easy step to adding this cool box in your blogger blog ----->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Now click in small box to expand your blogger template.

* Find this code ]]</b:skin> by CTRL+F key.

* Now copy below code and paste before ]]</b:skin>

#subscribe {font-size:14px; color:#999;}
.subscribetext {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ysKErWq8EkDpZh_GvWySs4kLvn0MCvAXg7v9hG7AA_nlzJL7klug8HhtcBoUD4BS2UiBFzis-QszjuPdkYWGhbUkZs3e-gUz37Yi7oC1xQKATSpnGu_09PuabchMEjhbERaWS_XJi8Je/s400/bullet.png) left no-repeat; padding-left:20px; margin-bottom:20px;}
.subscriberss {line-height:35px; font-size:18px; border-bottom:1px dotted #CCC; padding-left:5px;}
.subtext { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_3C7shBH4iu2o_6tN3-_-QrKYtkuRNyzU3LCXQV0yuywGDM7jKkslZylrEQ30PVGDWPSUvwTQTZTCzX11MIZBQUfCZx3LqohXJUl6TBo8lfc_maVyZSIpgl7kBp8AsF_PfDnPt-xaBG6G/s400/feed.png) left center no-repeat; padding-left:37px; padding-bottom:5px;}
.twitter {line-height:35px; margin-bottom:15px; font-size:18px;border-bottom:1px dotted #CCC;}
.twittext { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyq5aFVvldjeiwQwC1kWimWi4rvovUMTW1Xd20NEyYVzbk2k9YPqMIiCD1wcAGX4jpLORI6N6nFQ4dtRb62xo5Om0AaoYymakT2SeZoYclB5Qi3Bc5ABjjf91nJw8IhQOHcpTX5ShXwEt1/s400/twitter.gif) left no-repeat; padding-left:42px;}
.subscribemail {margin-bottom:7px; font-size:11px; font-family:Arial, Helvetica, sans-serif;}
.subscribeinput{border:1px solid #CCC; width:180px; padding:3px;}
.subscribesubmit{ background:#FB9E3D; color:#fff; border:1px solid #FFF; font-family:Arial, Helvetica, sans-serif; padding:3px; width:70px; -moz-border-radius:5px;}
.facebook {line-height:35px;font-size:18px;border-bottom:1px dotted #CCC;margin:-10px 0 15px 0;}
.facetext { background:url(http://www.longislandcateringhalls.com/i/facebook-icon.png) left no-repeat; padding-left:42px;}

* Now click to save your blogger template.

* Again go to your blogger Dashboard .

* Click in design tab and you are here--->>> Page element.

* Now click in add gadget which is in sidebar and when open new window click in HTML/javascript from list.

* And when open new blank box copy below code and paste in blank box easily.

<div class='widget-content'>
<div id='subscribe'>
                  <div class='subscribetext'>Subscribe to our newsletter  updates!</div>
                  <div class='subscriberss'><a class='subtext' href='YOUR FEEDBURNER URL HERE'>Subscribe via RSS feed</a></div>
                  <div class='twitter'><a class='twittext' href='YOUR TWITTER URL HERE'>Follow us on Twitter!</a></div>
                  <div class='facebook'><a class='facetext' href='YOUR FACEBOOK URL HERE'>Join Us On Facebook !</a></div>

                  <div class='subscribemail'>OR, subscribe via Email</div>

                  <form action='http://www.feedburner.com/fb/a/emailverify' id='subscribeform' method='get' onsubmit='window.open(&apos;http://www.feedburner.com&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                  <input class="subscribeinput" id="sub" name="email" type="text" value="" /><input name="url" type="hidden" value="YOUR FEEDBURNER EMAIL URL HERE" /><input name="title" type="hidden" value="WordPress" /><input name="loc" type="hidden" value="en_US" /> <input class="subscribesubmit" type="submit" value="Sign up" />
                  </form>
                  </div>
</div>

NOTE:- Change highlighted text in above code with your own ok.

* Now click to save your HTML/javascript and you are done.