Monday, 3 September 2012

Add special background effect feed subscription widget in blog

Hi friends now add special background effect feed subscriptin widget in blogger blog.
Follow simple step to adding this widget in youe blogger blog easily now ---->>>> * First go to your blogger Dashboard.
* Now click in design tab and edit HTML.

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

* Now find this code
]]</b:skin> by CTRL+F key.
* Copy below code and paste before
]]</b:skin>
#submit_btn {float: right;}
.email-rss {
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 10px;
color: #333;
height: 200px;
height: auto;
min-height: 200px;
border: 1px solid #ccc;
background: #dfdfdf url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyKADF74v9XgcgmNn1eFeRooQHNYzoYdYphar2cJXuSll3ykgxBq0CT16e-DzL-od7fHaN4i-nwL8UtmFT7Yt471Pwp4DgVyBGyndc7PkEwHma6luLpRXTCw-s2_DvP6sbh2VjVtTnFcF0//) center -20px no-repeat;
margin-bottom: 5px;
}
.email-rss .first {width: 150px;}
.sb-rss {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjf772hDi3bivJwBfkbyYnlVtpJvQ7zpzEmMvS3Fm23GjNSB8BKSB0aCFdfjsSnt0BZ7Yf3VTUjkib2WDrc1pRaATMBgxlKrmcXWdT0WQd1lOh6tbjsBQQGv41rNJEfuzG7VC2OGksI84/s800/rss.png) left no-repeat; padding-left: 20px; margin-right: 1em; font-weight: bold;}
.sb-email {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHxiRePfxH8HeeeAPeI7zS6CEePrrX44UAXRCyEDl6p3qzNG5pEgaT4xvUNaRqe4szBZ59uNuGKappEHoJJQ60AMadNmRHnPkfyeCpJWH_LHljUx4uJ1dCuPRC-wAnuaQPiPdiZO4-63Q/s800/email.png) left no-repeat; padding-left: 20px; font-weight: bold;}
.phone-email-wrap {margin-right: 20px; width: 645px;}
* Now click to save your blogger template.
* Now again go to your blogger dashboard .

* Click in design tab and you are here ---->>>> PAGE  ELEMENT

* Now click in add a gadget which is in your blogger sidebar,

* When open new window click in HTML/javascript From list.

* When open new blank box copy below code and paste in blank box.

<div class='clearfix email-rss'>
<h2>Get Updates!</h2>
<p class='first'>Subscribe to YOUR BLOG NAME by email for updates to your inbox:</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(\'YOUR FEEDBURNER EMAIL URL HERE\', \'popupwindow\', \'scrollbars=yes,width=550,height=520\');return true' target='popupwindow'><p><input name='email' style='width:258px; border: 1px solid #ccc; padding: 5px; font-size: 1.2em; color: #434343; font-weight: bold;' type='text' value='Enter your email address'/></p><input name='uri' type='hidden' value='YOUR BLOG NAME'/><input name='loc' type='hidden' value='en_US'/></form>
<p>Be informed of new posts by <a href='YOUR FEEDBURNER URL'>subscribing to the RSS feed in your feed reader or by email</a>.</p>
<p><a class='sb-rss' href='YOUR FEEDBURNER URL'>RSS</a>
<a class='sb-email' href='YOUR FEEDBURNER EMAIL URL HERE&loc=en_U'>Email</a><span class='right'><a href='YOUR FEEDBURNER URL'><img alt='' height='26' src='YOUR FEED COUNTER BUTTON IMAGE SOURCE/></a></span></p>
</div>
NOTE:- Change Highlighted text in above code with your own ok.
* Now click to save your HTML/javascript and you are done .

1 comment:

cgi backgrounds said...

Thanks,very good and informative blog.I needed this information to make my blogger look more attractive and adding widgets in blogger blog is too good option.