Monday 3 September 2012

Add css feedburner stylish subscription box in blog.

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/AVvXsEiNNX8nbKU7HkFzk0ixuSNY6USYvmXm6gn_NAjV9siLMSJMGk8CbCuOchLYyzCSpoXS24YsNqTcs-YDVeRAL4oP2pGsGNQ8djDmiY8ZWFBibj3I0GWISz2BfRNpEbT6FIjZUR0CklIizFjN/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/AVvXsEiZSKdfeGPjPyNNMARCMae420tgnFCt_QIwbNqIXJMrhRpFGqGmQKPwksDtpb86eLJOWUebdhng_NuAXZhxifbyEyTN9DlswaAWSCt9rqaSgqU11izgKzpuH5jCCSEbiHSWr6R6tmoLSs_N/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/AVvXsEgO_BNeaU06nTvLVDIUdVClhU6PfD_B1weNrUjMsgFAstv8PdSFs7WdUlR3G-0f6fdVBJSvD-HsiNUtkbj-RggVk0OsT1O6OorQq3TTepnl6LGsNNkJZnQU1irS_zj97DuZ0nYOiVS97q63/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.

No comments: