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 

Blog loading speed plays a very important role in a Blog's success. Blogs which takes time to load often lose traffic. Images are one of the factor which affects a blogs loading speed. So today I'll show you How to Install Lazy Image loading script to blogger. This script forces images to load after the blog has loaded, It means that the images will load slowly after your blog has loaded.

Advantages

• Makes your blog load faster.
• Images load when users scroll

How to Install this plugin to Blogger

• Log in to your Blogger Account
• Go to Template > Edit HTML
• Search for </head>
• Add the following script just before </head>

<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

• Now Save Template 

Done!!! After adding this script, you'll notice image load after blog has loaded.

Need Help

If you are having any problems with this script then feel free to leave a comment below.

Hey Guys, I'm back with another Awesome Social Subscribe widget for Blogger blogs. This widget contains multiple subscribe options including some social buttons and Email subscribe form.

Features

• Social Buttons : Facebook, Twitter, Google+, Pinterest, RSS
• Email Subscription Form
• Facebook Like, Twitter Follow, +1 Button
• Professional Look
• Attractive
• Fast Loading

How to Install this widget

Installation is very simple, Anybody can do it without any problems. Just follow the steps given below.

• Log in to your Blogger Account
• Go to Layout > Click on 'Add a Gadget' 
• Choose HTML/Javascript
• Copy the following code and paste it inside HTML/Javascript widget

     <style>
    #socialwidget {
    border: 1px solid #ebebeb;
    width: 300px;
    }
    .TZ-social{
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #ebebeb;
    }
    .TZ-social img:hover{opacity:0.8}
    .googleplus {
    background: #ffffff;
    border-top: 1px solid white;
    border-bottom: 1px solid #ebebeb;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    ine-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    }
    .googleplus span {
    color: #000;
    font-size: 11px;
    position: absolute;
    margin: 9px 70px;
    width: 310px;
    }
    .g-plusone {
    float: left;
    }
    .twitter {
    background: #ffffff;
    border-bottom: 1px solid #ebebeb;
    padding: 10px;
    }
    .TZ {
    background: #ffffff;
    border-top: 1px solid white;
    font-size: 12px;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;
    font-family: Verdana, Geneva, sans-serif;
    }
    .TZ span {
    color: #000;
    font-size: 11px;
    position: absolute;
    margin: -12px 100px;
    width: 310px;
    }
    #widgetbox .author-credit a {
    font-size: 10px;
    font-size: 10px;letter-spacing: 1px;
    color: #1E598E;
    text-decoration: none;
    }
    .email-subscribe-emailbox {
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-image: initial;
    height: 42px;
    background: #EFF8FB;
    width: 280px;
    }
    .email-subscribe-emailbox form {width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
    .email-subscribe-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
    .email-subscribe-emailbox input.emailu:focus {color: #333;}
    .email-subscribe-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
    .email-subscribe-emailbox input.submitu:hover {text-decoration: none;}
    .TZDefault {border: 1px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id="socialwidget">
    <!-- Begin Widget -->
    <div class="TZ-social">
    <!-- social ico -->
    <center>
    <a style="margin-right: 10px;" href="http://facebook.com/trickyblogger" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ4KhS31I0uBErQi6feGMpBD6x3iZlXq6pkbENq4AvC8wioDfNZqb1pnezWaPtT0vyV_mS7jP8jExzJIReLkserWFyX1mXBI5kp9US2rUd1e9SXT85nnmsF9jN6xUFEBPnZ0njZA69V7Q/s1600/facebook.png" title='Facebook'/></a>
    <a style="margin-right: 10px;" href="http://twitter.com/trickyblogger" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSW4XRjZiRMJBhfDfXHp9Q_cDM4LwgDUBtKPyQ98XUKubYHXvPWnm4NwCeYYqoWVNV-QIBVnf-K5uF-or33xmpbEa_oZuEvRYoCOpvllbEUJzWp2TScAUsoQlVS-PjsjP-hW7Gc5SORu8/s1600/twitter.png" title='Twitter'/></a>
    <a style="margin-right: 10px;" rel="me" href="https://plus.google.com/117521503834739609237" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoucevr2KqLDmklxpj7AtwZzqL4RANupRphJbdOra49BxBThWIbLySwueGiPjzoI-W_RxGUFiunZdCGDvWmL1Mkm4RI6PhUcnbCKV1z8MuE2ohnJx0dEgcd8SMGN0pgddbWbPgbwlFgnk/s1600/gplus.png" title='Google Plus'/></a>
    <a style="margin-right: 10px;" href="http://pinterest.com/jimluthra/" target="_blank">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv-e3_isC_dvbzf7bXE2szaZhB4IiqG1v4L_KPWQhRQNVSVN5Vl9SJva7yZmNqM8SbGWwtC81CFdzK-Hm_K-9BAHtJSZSCOUOru330QYU3YVmEV_MwOPCo_jNjBIbiU6wvUSMzFr-NRpg/s1600/pinterest.png" title='Pinterest'/></a>
    <a style="margin-right: 10px;" href="http://feeds.feedburner.com/trickyblogger" target="_blank" rel="nofollow">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb8VN_6m1NjHlbWtABrTKpL2FCIDrL6tQYErHDacj8YIsAzvjN_bGPwGziiqa9GiCnISz4kW-Lni8mKH7LuZKpdp0WAHhzegeMqGOzdSzdyK3PFFZOKnmWgI5WD1Ad8RB7LeW1XZq931U/s1600/rss.png" title='RSS Feed'/></a>
    </center>
    </div>
    <div class="googleplus">
    <span><font><font>Recommend Us On Google </font></font></span>
    <!-- GooglePlus -->
    <!-- Place this tag where you want the 1 button to render -->
    <g:plusone size="medium" href="http://www.trickyblogger.com/"></g:plusone>
    <!-- Place this render call where appropriate -->
    <!-- Place this render call where appropriate -->
    <script type="text/javascript">
    (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    </div>
    <div class="TZ">
    <!-- facebook -->
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Ftrickyblogger&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true">
    </iframe>
    <span>Like Us On Facebook</span>
    </div>
    <div class="twitter">
    <!-- Twitter -->
    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=trickyblogger&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
    </iframe>
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    </div>
    <div class="email-subscribe-emailbox">
    <form action="http://feedburner.google.com/fb/a/mailverify" 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">
    <table width="100%">
    <tr>
    <td>
    <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
    </td>
    <td width="70px">
    <input class="submitu TZDefault" type="submit" value="Subscribe"/>
    </td>
    </tr>
    </table>
    <input name="uri" type="hidden" value="trickyblogger"/>
    <input name="loc" type="hidden" value="en_US"/>
    </form>
    </div>
    <div id="widgetbox" style="background: #EBEBEB;border-top: 1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;">
    <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"></span>
    </div>
    <!-- End Widget -->
    </div>

• Make the Following Changes

Replace trickyblogger with your FeedBurner Username.

Replace trickyblogger with your Facebook Username.

Replace trickyblogger with your Twitter Username.

Replace 117521503834739609237 with your Google+ ID

Replace jimluthra with your Pinterest Username.

Replace http://www.trickyblogger.com with your Blog Address.

• Save Widget.

Done!!! You've successfully added the widget to your blog. I hope you liked it, If yes then please share it with your friends.

 

Need Help

If you are having any problems then don't hesitate leaving a comment below, I'll try to get back asap!

If you are a regular visitor of ShoutMeLoud.com then you might be knowing that before SML chaged its theme, They used to have an awesome Email Subscribe bar under Header. Many people used to like that widget but SML removed it and now they are using a different style subscribe widget.

Live Demo

Yesterday I showed you How to Add New ShoutMeLoud Style Subscribe widget and Today we will show you How to Add old SML style subscribe widget.

Features

• Attractive
• WordPress Style
• Fast Loading
• Can be easily added under Header

How to Add SML Style Widget to Blogger

• Log in to Blogger account
• Go to Template > Edit HTML (Backup your Template First)
• Now search for ]]></b:skin>
• Add the following code just before ]]></b:skin>

#headline{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCJs0izFm-bYSEhBMVT1ViVykjkgI-N_cSf9lCfPE35RzmoqdiVBLzMDp5qr8-T2jR-MW3bG7sAMstLgvDbAEnRMpIdXDNYZmvekbkSLC1vpns17CKURX-A5_dOPz-bW5bKldym7zw2X81/s1600/headline-bg.png') repeat; color:#fff; margin:0 auto; border-top: 1px solid #000; height:30px; font-size:12px; position:fixed; bottom:0; z-index:1000; width:100%;border-top-left-radius:20px;border-top-right-radius:20px; display:block;}
#headline:hover{background:#333;}
#headline p{line-height:30px; font-size:12px; text-align:center; width:95%; float:left;}
#headline p a{ text-decoration:blink; color:#ffcc00; border-bottom:1px dashed;}
#headline li.widget, #headline li.widget p{margin:0; line-height:30px; list-style:none; font-size:12px; text-align:center;}
.kill-btn{display:block; position:relative; right:15px; float:right;}
.kill-btn a{font-size:18px; font-weight:bold; font-family:"Comic Sans MS"; color:#fc0; line-height:30px;}
/* Subscription Box */
#sleek-subscribe{display: block; margin:0 auto; }
.newsheadline {color:#222; font-size:16px; line-height:50px; float:left; font-weight:bold;}
.newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;}
.newsheadline cite{font-style:normal; color:#f00;}
.signform{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFN4ycPdWjE5fnULD1bNr5JMPmOUTAA_c-RHWR6iErM6koamzZ0piK8jZQoZ__D1PMHFxXSIQXxnNEWbPac0hND4OoN52I0rrOwb2ZvUQl_pgA314-XGU-H-UpdqcQAVOB0nLvYbGtEhc/s1600/dwd.PNG') no-repeat;padding:0 0 10px 100px; float:right; }
      .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#000000; border:1px solid #FF9332; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
      .btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #FF0000; color:#fff; font-size:15px; border-radius:10px;}
            .btn2:hover{background:#6689b0; }

• Now save template.

Next Step is Adding HTML code

Adding HTML Code

• From Blogger Dashboard
• Go to Layout > Click on 'Add a Gadget'
• Choose HTML/Javascript
• Add the following code inside it

<div id="sleek-subscribe">
<div class="newsheadline"><span>Sign-up</span> for <cite>FREE</cite> daily Updates.</div>
<form action="http://feedburner.google.com/fb/a/mailverify?uri=trickyblogger" class="signform" method="post" target="_new">
<input class="txt2" name="name" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Your Name...&#39;;}" onfocus="if (this.value == &#39;Your Name...&#39;) {this.value = &#39;&#39;;}" value="Your Name..." />
<input class="txt2" name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Your Email Address...&#39;;}" onfocus="if (this.value == &#39;Your Email Address...&#39;) {this.value = &#39;&#39;;}" value="Your Email Address..." />
<input class="btn2" type="submit" value="Subscribe Me!" />

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><a href="http://www.the-area51.com/" target="_blank" title="Blogger Widget">Widget»</a></span></div>
></div>
</form>
<div class="clear"></div>
</div>

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

Congratulations! You've successfully added the widget to your blog.

Need Help

If you are having any problems then please leave a comment and we will get back to you asap!

Bloggermint is a very popular blog with very high traffic and awesome design. Many people try to make their blog look like bloggermint but does not have resources to do it. Today I'll show you How to get BloggerMint style Social Subscribe Widget for Blogger Blogs.

 

 

Features

• Email Subscribe Form
• Social buttons of Facebook, Twitter, RSS
• Professional Look

 

Add Bloggermint Social Widget to Blogger

Installation is very simple and anyone can do it without any problems But still if you find any problems then don't hesitate leaving a comment. 

• Log in to Blogger
• Go to Template > Edit HTML (Backup your Template First)
• Now search for ]]></b:skin>
• Copy the following code and Paste before ]]></b:skin>

#pbt_subscribe-box {
    float: right;
    width: 300px;
    margin: 0 0 10px
    }

#bleft {
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) inset;
    background: none repeat scroll 0 0 #EEE;
    float: left;
    height: 160px;
    width: 300px;
    border: 1px solid #CCC;
    position: relative;
    border-bottom: 1px solid #BBB
    }

#bleft .icon {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_QE09JLug4f5_aHxdQOmbQ3wmBf1Fki0E1NAg10HOdFBfdS9OR1naFuIOazshpjgnE3pwJj5eAhmXWB0tE1El6o3BV-UwMQYSm74KjS15m_K4Ur6Hu5llBegUe1fFKFMF-AAd9kNOVdQ2/s1600/letter.png) no-repeat scroll center center transparent;
    display: block;
    float: left;
    width: 70px;
    height: 64px;
    margin: 16px;
    }

#bleft .sub-email {
    float: right;
    width: 195px;
    margin: 10px 0 0
    }

#bleft .sub-email h4 {
    color: #000;
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
    text-shadow: 0 1px #FFF
    }

#bleft .sub-email p.getposts {
    color: #777;
    font-family: arial;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
    width: 175px
    }

#bleft form {
    float: left;
    margin: 0 0 0 20px
    }

#bleft .sbox {
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
    border: 0 none;
    float: left;
    height: 30px;
    padding: 4px;
    width: 165px;
    border-bottom: 1px solid #CCC
    }

#bleft .go {
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 -12px 0 rgba(0, 0, 0, 0.15) inset;
    background: none repeat scroll 0 0 #82B832;
    border: 1px solid #689328;
    color: #FFF;
    float: left;
    font-weight: bold;
    margin: 0 0 0 10px;
    cursor:pointer;
    padding: 5px
    }

#bright {
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    background:#EEE;
    background: -moz-linear-gradient(center bottom, #FFF 0%, #EEE 100%) repeat scroll 0 0 transparent;
    background:-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255,255,255)),
    color-stop(1, rgb(238,238,238))
);
    border: 1px solid #CCC;
    float: left;
    height: 50px;
    margin: -10px 0 10px;
    width: 300px;
    -webkit-box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1) inset
    }

#bright ul {
    float: left;
    list-style: none outside none;
    margin: 20px 0 20px 15px !important;
    padding: 0 !important
    }

#bright ul li {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbK5pGzB9RdsjBH05JZOG1gEiNdQdGXYf9Hr3594kGLm-nldNhGyFuGq9UOe-rIZL1UqKxxmbnzLEbK68UMaOE-sJ-pbIauWSuu_Lb7bvU8lpLgjVgHz9eG0CkxImuOcICMmtyIA2GVfxI/s1600/subs-icons.png) no-repeat;
    float: left;
    margin: 3px 0;
    width: 93px;
    position: relative;
    padding:1px;
    }

#bright ul li a {
    color: #555;
    float: left;
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-left: 25px;
    margin-top: -2px;
    background:0 none;
    text-shadow: 1px 1px #FFF
    }

•  Now Save Template

Next step is adding the HTML Code

 

Adding HTML Code

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

<div id="pbt_subscribe-box"><div
id="bleft"><div
class='icon'>&nbsp;</div><div
class='sub-email'><h4>Subscribe now!</h4><p
class="getposts">Get Our Latest Posts in Your Inbox For Free.</p></div><form
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?trickyblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"> <input
type="email" name="email" class="sbox" placeholder="Your email address here!"> <input
type="hidden" name="uri" value="trickyblogger"> <input
type="hidden" value="en_US" name="loc">&nbsp;&nbsp;<input
type="submit" value="Subscribe" class='go'></form></div><div
id="bright"><ul><li
style="background-position: 0 -3px;"><a
href='http://feeds.feedburner.com/trickyblogger'>RSS Feed</a></li><li
style="background-position: 0 -24px;"><a
href='http://www.facebook.com/trickyblogger'>Facebook</a></li><li
style="background-position: 0 -45px;"><a
href='http://twitter.com/trickyblogger'>Twitter</a></li></ul></div></div>

•  Now make the following changes.

Replace trickyblogger with your FeedBurner Username
Replace trickyblogger with your Facebook Username

Replace trickyblogger with your Twitter Username

 

• Now Save Widget

Congratulations! you've successfully added the BloggerMint widget to your Blogger blog. Please share this post and also leave comments down below.

 

Code Source: ProBloggingTools