Earn money with your blog by selling Ad spots to advertisers and Today I'm going to share such a widget which will help you place 125x125 ads on your blog. So without wasting any time, Lets begin.

How to Add 125x125 Ads Widget to Blogger

The Installation process is simple and any one can do it without any problems. Just follow the steps given below.

• From Blogger, Go to Design > Add a Gadget
• Choose HTML/Javascript 
• Add the following code inside it

<div align="center">       
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"><tbody>

<tr><td><center><a href="Advertiser URL" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="BANNER URL" height="125"/></a></center></td>
<td><center><a href="Advertiser URL 2" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="BANNER URL" height="125"/></a></center></td></tr>

<tr> <td><center><a href="ADVERTISER URL 3" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="BANNER URL" height="125"/></a></center></td>
<td><center><a href="ADVERTISER URL 4" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="BANNER URL" height="125"/></a></center></td></tr>
</tbody></table></div>

• Save Widget

Things to Replace

1: To Change width, Change width="256" to the required value.

2: Replace ADVERTISER URL with the Ad link

3: Replace BANNER URL with Banner image link

4: Replace AD DESCRIPTION with Description about Ad.

 

 

Done!!!

Credit: The-Area51.com

How about adding yahoo smileys to the Blogger Threaded comments? This will be really awesome!! Kang Ismet has scripted some wonderful tricks of adding smileys to the blog comments. Check out the steps and you will really appreciate his work. It is a real good job!

Here are the instructions for you. Firstly, you have to CSS code, then the JavaScript code and lastly the HTML code. The steps for adding these codes are given clearly below. Take a look.

How to Add Yahoo! Smileys in Blogger Comments

• Log in to Blogger Account.
• Go to Template > Edit HTML (Click on Proceed)
• Search for ]]></b:skin> (Press CTRL+F for finding the code)
• Add the following code just before ]]></b:skin>

img.bhacksmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

• Next step is to add javascript code. Search for </body>
• Add the following code just before </body>

<script src='https://netoopscodes.googlecode.com/svn/branches/Js files/ysmiley threaded comments-min.js' type='text/javascript'/>

• Save Template.

Adding the HTML Code

• Again go to Template > Edit HTML and Tick 'Expand Widget Template'
• Using CTRL+F, Search for <div class='post-footer-line post-footer-line-3'>
• Find </b:includable> and copy the below code above it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='netoopsblogysmile' id='ysmile' style='
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
</div><a href="http://netoopsblog.blogspot.com"></a></b:if>

• Now Save Template

Done!!! Now you can simply add smileys :) :-) ;) ;P etc. 


About Author: Steven Garcia is a technical engineer and a blogger. He has shared some useful tips of adding smileys to the threaded comments. He contacts the wireless network security services to settle any kind of discrepancies.


Previous Post: Thesis Style Subscribe Widget for Blogger

WordPress Blogs are usually better looking then blogger, Same goes for widgets. Today I'll show you How to get WordPress Style Thesis Subscribe widget for blogger.

Features

• Social Buttons: Facebook, Twitter, Google+, RSS, YouTube.
• Email Subscription Form.
• Professional looking.

How to Add it on Blogger.

• Log in to Blogger
• Go to Layout > Add a Gadget
• Choose HTML/Javascript
• Add the following code to it.

<!- Thesis Email Subscribe Widget ->
<div id="sidebars">
<ul class="sidebar_list">
<li id="social-profiles">
<ul>
<li>
<a class="social facebook" rel="nofollow" target="_blank" title="Facebook Fan Page" href="https://www.facebook.com/trickyblogger">Facebook</a>
</li>
<li>
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/trickyblogger">Twitter</a>
</li>
<li>
<a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/117521503834739609237">GooglePlus</a>
</li>
<li>
<a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/TrickyBlogger">Rss</a>
</li>
<li>
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/user/area51blog">Youtube</a>
</li>
</ul>
</li>
<li id="sidebar-social">
<p id="email-notice">
Join over 300 people who get free and fresh content delivered automatically.
<span></span>
</p>
<div id="email-form">
<h6>Get Email Updates</h6>
<form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="input-text" type="text" name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter Your Email Address&#39;;}" onfocus="if (this.value == &#39;Enter Your Email Address&#39;) {this.value = &#39;&#39;;}" value="Enter Your Email Address" />
<input type="hidden" value="InfozGuide" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="button" type="submit" value="Hook Me Up" />
<p>
We Respect Your Privacy.
<br />
We never encourage SPAM. You can unsubscribe any time.
</p>
</form>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
   ">
 <a style="color:#000000;" href="http://www.the-area51.com">Get this</a> </span>
</div>
</li>
</ul>
</div>
<style>
 #sidebars {
    border: 0 none;
    float: right;
    padding: 0 15px;
    width: 310px;
}
#email-notice {
    background: none repeat scroll 0 0 #66CCFF;
    color: #000000;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
    padding: 15px 20px;
    position: relative;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#email-notice span {
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 10px solid #66CCFF;
    bottom: -10px;
    height: 0;
    position: absolute;
    right: 40px;
    width: 0;
}
#email-form {
    background: none repeat scroll 0 0 padding-box #313131;
    border-bottom: 5px solid #202020;
    border-radius: 2px 2px 2px 2px;
    text-shadow: 0 -1px 0 #000000;
}
#email-form h6 {
    color: #FFFFFF;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 15px 20px 0;
    text-transform: none;
}
#email-form form {
    color: #FFFFFF;
    margin: 0;
    padding: 20px 18px;
}
#email-form input.input-text {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #222222;
    margin: 0 0 10px;
    padding: 8px;
    width: 94%;
}
#email-form .button {
    background: none repeat scroll 0 0 #FFFFFF;
    float: right;
    margin: 0 0 0 10px;
}
#email-form p {
    color: #CCCCCC;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
}
#sidebar-social {
    float: left;
    font-size: 12px;
    margin: 0 0 15px;
    width: 100%;
}
ul.sidebar_list {
    list-style: none outside none;
}
li.widget ul {
    list-style: none outside none;
}
#social-profiles {
    float: left;
}
#social-profiles ul {
    float: left;
    list-style: none outside none;
    margin: 0 5px 20px;
}
#social-profiles ul li {
    float: left;
}
#social-profiles ul li a {
    display: block;
    float: left;
    height: 32px;
    margin: 0 15px;
    text-indent: -999em;
    width: 32px;
}
#social-profiles a.social {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV4HGsKEtzkAHVEOYjI_utD2AMVf4KFy7pFd_pHC0r31e_Bdd9eVtMsu1KCaLorkASHwmclZGZB6ZSggd5vkVFOvmscLkLm9EBXgYMrp0tebd30REwd4Y3HxOTxCJaw6alrh778kXkpPk/s1600/social.png") no-repeat scroll 0 0 transparent;
}
#social-profiles a.facebook {
    background-position: -79px 0;
    height: 32px;
    margin: 0 15px 0 5px;
    width: 32px;
}
#social-profiles a.facebook:hover {
    background-position: -79px -74px;
    height: 32px;
    width: 32px;
}
#social-profiles a.twitter {
    background-position: -5px -111px;
    height: 32px;
    width: 32px;
}
#social-profiles a.twitter:hover {
    background-position: -42px 0;
    height: 32px;
    width: 32px;
}
#social-profiles a.youtube {
    background-position: -42px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.youtube:hover {
    background-position: -5px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.rss {
    background-position: -42px -74px;
    height: 32px;
    width: 32px;
}
#social-profiles a.rss:hover {
    background-position: -79px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.googleplus {
    background-position: -5px 0;
    height: 32px;
    width: 32px;
}
#social-profiles a.googleplus:hover {
    background-position: -5px -74px;
    height: 32px;
    width: 32px;
}
* {
    margin: 0;
    padding: 0;
}
.custom .sidebar ul.sidebar_list {
    padding: 15px 0;
}
</style>
<!- Thesis Email Subscribe Widget ->

• Now Make the following changes.

Replace trickyblogger with your Facebook Username.
Replace trickyblogger with your Twitter Username.  
Replace 117521503834739609237 with your Google+Username. 
Replace TrickyBlogger with your FeedBurne Username.

• Save Widget.

Please leave your comment below and let us know if you liked this widget.

You must have seen Facebook like box on many blogs but have you heard about Twitter Follow box? Yes Today I'll show you How can you add a Beautiful Twitter Follow Box on your Blogger blog.

Live Demo

Features

• Twitter Follow button
• Shows Faces of Followers
• Customizable

How to Add Twitter Follow Box to Blogger

• Log in to Blogger
• Go to Layout > Add a Gadget
• Choose HTML/Javascript
• Add the following code inside the widget box.

<script type="text/javascript">
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("trickyblogger");</script>

• Now change trickyblogger with your Twitter Username.

If you want to change the width of the widget then simply change 300 to the desired value.

Credit: Mark Carey

Today I found this beautiful blogger widget on Netinfozblog.in and decided to share it here. The widget has 4 big size Social buttons of Facebook, Twitter, RSS and Google+, They look really good and professional.

How to Add them to Blogger

• Log in to Blogger Account.
• Go to Template > Edit HTML (backup your blog first)
• Search for ]]></b:skin>
• Add the following code just before ]]></b:skin>

#TB { width: 210px; margin: 0 auto; min-height: 200px; }
#TB img { width:100px;
opacity: 0.8;
/*Transition*/ -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); }
#TB img:hover { opacity: 1;
/*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
 -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }

• Save Template

Adding HTML Code

• Go to Blogger > Layout > Add a Gadget
• Choose HTML/Javascript
• Add the following code inside it

<div id="TB"><a href="http://www.facebook.com/trickyblogger">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6RFPJUPR_P6Pebg6GrW4wPVRUhJ3lQDjUu5LxLmuTJ6qal22ZtmN_M7DoiEjZRdKdp-QI8R7KcudCa4rUDq9-6FGnCag59Ofd0JIGfLDGTflOzZCL2VAyz_bjI5cflfto2WnboWIjTb7E/s1600/facebook-icon.png"></img></a><a href="http://www.twitter.com/trickyblogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfTpMAZ-jzeQfLaod4Ol-RAJyLY9wmzpecQgaG1z_gVFHGgYFcvFZIUeZGhyphenhyphenHZXT2zFic590od49nz3ujMvyb9Vx7m4xXLrWX02gKZ2CH0Ma1xmm15ElCnJ0mB2CEIK8SezDHifrN7oRy/s1600/twitter-icon.png"></img></a>
<a href="https://plus.google.com/u/0/117521503834739609237">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiowuZVdlNNO3VwWw3M3izC1TSCLb1ZNvOxzAr1mKWU-eBxeOy3dDipB8FSCC2Scni-9vu8-wtsHEuBhQ-qegSMsJvTFaQaIQy8UdYCr1zS749yAgRh7owPclig4w8q2Q9fFTCFm92mqjWH/s1600/google-icon.png"></img>
</a><a href="http://feeds.feedburner.com/trickyblogger/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgb3-6BHEae32Gseleo8M_h45dTXQCu3tew9iuqgaFS9OJQrBKagf_UM9MVVNTBBep7pgMg7u_rSCo1AIMXV8V3xH-sr1YlaUScleUXeihlX-SQj8tmK9RmdrRYIowbXUzvtnAu0vBGlXa/s1600/rss-icon.png"></img>
</a>
</div>

• Now make the following changes to it.

Replace trickyblogger with your Facebook Username

Replace trickyblogger with your Twitter Username

Replace 117521503834739609237 with your Google+ ID

Replace trickyblogger with your Feedburner Username.

• Save Widget.

Done!!! I hope you like this widget. Please leave your comment below.

Credit: NetInfozblog.in

You must have seen blogs using keyboard keys effect on Text. Today I will show you How can you use keyboard keys effect on Text using CSS. This is compatible with both Blogger and WordPress.

How to Add Keyboard Keys Effect to Blogger

• Log in to Blogger account.
• Go to Template > Edit HTML
• Now search for ]]></b:skin> 
• Add the below CSS just before ]]></b:skin>

TB{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid gray;padding:1px 5px;margin:0 5px;font-family:courier new;font-size:1.2em;-webkit-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;-moz-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;background:-moz-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(25%, #e2e2e2));background:-webkit-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-o-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-ms-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:linear-gradient(left, #fff 0%, #e2e2e2 25%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1 )}TB.space{padding:0 90px}TB:hover{cursor:default}

• Save Template

Now that you've added CSS to your Blogger Template. You've finished 90% of the Job.

How to Use it in Blog Posts

Now whenever you want the Keyboard keys effect just use the following code.

<TB> YOUR TEXT HERE </TB>

Just Replace YOUR TEXT HERE with your Text and Done.

DEMO

I hope this article was helpful. Please leave your comments below if you are having any problems.

Credit: HackingUniversity.com  

Hacking University is a very popular blog run by Rishabh Jain, It is one of my favorite blogs and Today I will show you How to Add Hacking University like Email Subscribe widget to your Blogger Blog.

Features

• Attractive Design
• Fast Loading
• Responsive

Hacking University Style Subscribe Widget

• Log in to Blogger
• Go to Layout > Click on Add a Gadget
• Choose HTML/Javascript
• Add the following code inside the box.

<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMqvGM_ZfA89nN8BeRSWZpkJC01F64UlxXUZNG9iWrGaPHDjDcHgDLGvh1rby3Ua7cZDegVFGUN8n6LmpynhP7nPgyybpjQXwdgVzWGpNEJWiHN7hrVkAQ1ho2-vnqzuQf0Py6DysU0tfI/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4debf-zNNlSGurO3rDVMBbfPVHw3d6mLKCinDMVrs5OxvN9j-SOe6MyUdrEd8ypCIvUbGDY-cY232QyTxiesGB4W1T8KS0QG6GOaCaZWpZPxwVfEPB_ymu3nafY7IPH5VYdWiWiwhIooI/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq2Zxy4LbJIqS9T6eBBbW9SLJfDtd13eh2TL9m7AtqRKcONNjXpadqq7YvfbXDNbzVTjInB9Jkk_LVuqSM4gaTn8-M-_aNCfz8sBXr80CYJnt2bXX-Y7PhQLnjQN8C6e_dqXWQPZjcBq2n/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix4QhrAp4pgH5qgShYckfRGAo6qdoeiefmXhLcZBRv1vEg7ZkhlHZ7LCq8OlKXc-dsRgl73JSl4e4PTMszX-5sx5uNItgEg7ux6rrKzyJl2qvLhLyVuSPOaNhrXdYsojoZetxWWN2ybv3v/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=trickyblogger" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=trickyblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="trickyblogger" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>

• Now Replace trickyblogger with your FeedBurner Username.
• Save Widget

Done!!! You've successfully added the HU style widget to your blog.

Need Help

If you are having any problems with this widget then you can leave your comments below.


Credit: TrueBloggerTricks