Add css feedburner email subscription widget in blogger blog.

Posted by Android Market on -


Hi friends now add this special feedburner email subscription widget box in blogger with social network.

PREVIEW:-














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/AVvXsEhYf3pG9iBetq3Jt852Bu6f6lzu8wFtHQXRTz7hw9uHqGfYHhHCdIcAeRy6MZI-f6vZLmarboE1qSb52rdd3WwYXIbbS6O_fPySmFDxtwd62PklH50BLt2T5PKe8IN5MiVZsdHN-DTBgTxe/s48/RSS.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2bmail{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIlUOUsfW1dlYQtptikT0kqFfNNxbv-N6CThEWdWQB7Nbxx9hFSSRwd6rX2R_QNrspMgQckws-gxI1USMGrREUYDpu2RkcSsjJOkxCsNzwcGq5qmZp3-lOmMUuXGmIoCAvnuoUoebqr-Vl/s48/Mail.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2btwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyvG4xI0MuO97VM_etqZwn9KwTLpSsC7aZcheL9lngtJpVcF3l5en6ltxzYnXoKb8lPuMbntsB5xBHvTpmzIzLwhi-mmnKtsk4gVTDMpoQeNRJsgAWLKrO7DehXEMccLtPztr_cO8OQMph/s48/Twitter2.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2bfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAeOMarRQM5MrQmTn2GRyJoQ0GO5U7HYqPX-4cI-uGI5bWvxMGN-JjPvfk5VoP983SO_JSt7vaJp3hSmRM2N2dACjpSeqJI2BdcLsFHrS1oIyyzt9ZJK07Xc3A2tv8r95ypupW2I4LdepE/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/AVvXsEjJfs5_kvF1Qtt5fAmTYCatf6Eq-ft0_M24TbSjSWD28wlcidy-Ntg6LbLd39p_2Id_iKb8gZL30nimolfVOKuHjWYfxt48WPtB1P_D3sKgfahg8VPza4AB5RaU391FUBzmv382RH1xibZV/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.

Categories: , , , , , , ,

Leave a Reply