Add css feedburner email subscription widget in blogger blog. 1

| | , , , , , , , ,

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(http://2.bp.blogspot.com/-HzL4OJ6FzmE/TeTFVVR1A4I/AAAAAAAAA4g/Eiju-1UObXU/s48/RSS.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2bmail{
background:url(http://2.bp.blogspot.com/-YcW06xYPTM4/TeTFU1cvqbI/AAAAAAAAA4c/1fyAl6q9QRw/s48/Mail.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2btwitter{
background:url(http://3.bp.blogspot.com/-d8fPV2jD2p0/TeTFVkAMFOI/AAAAAAAAA4k/0jYlyJGVmXM/s48/Twitter2.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2bfacebook{
background:url(http://1.bp.blogspot.com/-SfiMNXFU9TE/TeTFUbgc_SI/AAAAAAAAA4Y/THAqJLoo_vg/s48/Facebook.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/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.

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Add css feedburner email subscription widget in blogger blog. ~ Twitter FaceBook

1 Responses So Far:

The Fox Multimedia said...

thank you very nice articl (^_^)

Categories

Select Your Categories