Sunday 2 September 2012

Add css feedburner email subscription widget in blog.

Hi friends now add this special feedburner email subscription widget box in blogger with social network.
Follow simple and easy step to adding this special box in blogger ---->>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.

* 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>
.sociallinks ul{
font-family:Oswald;
}
.sociallinks ul li{
float:left;
width:90px;
padding-left:55px;
margin:0 0 0 5px !important;
line-height:48px !important;
}
.sociallinks ul li a{
font-size:20px !important;
}
.sociallinks ul li.w2brss{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUVd1bDIEWu-b48N-TjN0m626ZD3wNxbEluY9WgTKQseWlKfjXniR43fEY36atVFvL5VMRFp3gZ5UtY4T7y34RPTp5U6gf35JDGfR1AvOIeG2nRjclOmCw0LL6xqo7y_Wtb0ddf62lrvjG/s48/RSS.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2bmail{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioLHg3NjKErgfuZZB0mtcUqdbNUcC8jTKJKJSpvR0X3_oaexu-YhK1VuAv2AdcspGC0qR4s-SEGdzij8lv53npiNxji7K7ljCoHzHGWnTRdftiV0mpR0rfkCULpVE5miuhdwJTiYh8gAOh/s48/Mail.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2btwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Xise4cezSlvvkuNeFh4mOjR_VHl549D3N6pI1V76-d1NRuSiZSuBflDckRMKh0IqlnkhZg1zHlYgX38_Q-jXv4Yp_F8PpOxgi8NDrOIljgguYj2bSrFybmdjkzW__pLtSFspuqb-wW_h/s48/Twitter2.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2bfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPfy6HpoPqmezFPkwNAwI2g2E6H9Xo6UlRmAMSOoK6U-sFqUlYO4_7y9EJGeBq0kC-doZj9e_VxQI9hLPOCU-DPIcxQAYWhUsZ2ufKvbR_G5Aj51vhsjYbHQtLUdXpI6eaefgZwfcMtstW/s48/Facebook.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvmihEVUlrUDOlpugUKXtGJJdu0oVuFRYAlsBB4LDvQNcYn0fE3YtEHlzh-MPGoXYfYx69opcXjFtxX2jeB_P7evvTaDmT8XHtqzdo8RWxrM2M-pGD4dLwSyPBAUZmPlyBR-kCP2KnqGn/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.ebutton{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
* Now click to save your blogger Template.
* Again go to your blogger Dashboard.

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

* Click in add Gadget which is in your blog 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='sociallinks'>
<ul>
<li class='w2brss'><a target='_blank' href='YOUR FEEDBURNER EMAIL URL HERE'>RSS</a></li>
<li class='w2bmail'><a target='_blank' href='http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER URL LAST NAME'>Em@il</a></li>
<li class='w2btwitter'><a target='_blank' href='YOUR TWITTER URL HERE'>Twitter</a></li>
<li class='w2bfacebook'><a target='_blank' href='YOUR FACEBOOK URL HERE'>Facebook</a></li>

</ul>
</div>
<br />
<div style="text-align: left; display: inline-block;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('YOUR FEEDBURNER EMAIL URL HERE', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">

<input type="hidden" value="Anilhindustani" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="ebutton" value="SignUp" title='' al='' />
</form>
</div>
</div>
<div class='clear'></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: