Social With Email Subscription Widget For Blogger

Hello There !!
Yesterday there was a Google Pagerank Update and Tech Ghoul's rank was updated from PR-0 to PR-1.

So as to share the enjoyment, 
Here I am with yet another interesting widget for blogger platform.
Today I am going to introduce a Social Subscription Widget For Blogger With Email Subscription.

I tried to integrate an Email Subscription because it's very important to get Email subscribers for your blog.

What's Special In This Widget ?

I have tried to add almost all the 5 important Social Media buttons along with email subscription.

You know how important is Social Media's nowadays to gain traffic and followers for your blog.A blog with good social and email subscribers will eventually get enormous traffic and popularity.

Similar Articles In Tech Ghoul ---> Scrolling Marquee Recent Post Widget For Blogger

Now without wasting much time, let's go to the widget.

You can get the Live Demo of the widget in the sidebar of this page. (At the top.)

How To Install This Widget To Your Blogger Blog ?

I hope you liked it. If so, you can add this widget to your Blogger Blog in a few easy steps :

Similar Articles In Tech Ghoul ---> HTML Code Box For Blogger With CSS Effect

1. Go to www.blogger.com and select your desired blog.
2. Go to the Layout section of your blog.
3. Click on Add A Gadget.
4. From the list that appears, select HTML/Javascript.
5. Paste the below code into the box that appears.

<div class='widget-content'>
<style type='text/css'>
.social a{padding: 6pt 6pt 6pt 5px;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{
background: #fff;
width: 270px;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #389af2;
}
.emailform{margin:30px 0 0; display:block; clear:both;}
.emailtext{margin:20px 0 0;background:#f6f6f6 url(http://3.bp.blogspot.com/-3nqMfDFqsUQ/T4_x8t_XbaI/AAAAAAAAAok/oVXZ6X2RKsg/s1600/email.png) no-repeat scroll 0px center;padding:5px 5px 4px 30px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:170px;}
.emailtext:focus{outline:none;}
.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:6px 8px; border:1px solid #666;cursor:pointer;background:#ff748c}
.sub-button:hover{color:#eee;border-color: #999;background:#ffa7b6}
</style>
<div class='sub-box'>
<center><div class="social">
<table><tbody><tr><td>
<a href='http://facebook.com/techghoul' target='_blank'><img alt='Facebook' src="http://2.bp.blogspot.com/-iMYhRYzNht8/UREupfLBsoI/AAAAAAAAB08/iu09lgouzGc/s1600/facebook.png" border="0" title='Follow Us On Facebook'/></a> </td>
<td> <a href='http://twitter.com/techghoulakhil' target='_blank'><img alt='Twitter' src="http://4.bp.blogspot.com/-_d9Zpk_CQeo/UREuqNEg5-I/AAAAAAAAB1I/0g5FhJxVwRU/s1600/twitter.png" border="0" title='Follow Us On Twitter'/></a> </td>
<td> <a href='https://plus.google.com/103503580424052614840/posts' target='_blank'><img alt='Google Plus' src="http://2.bp.blogspot.com/-mL-U8z3UiDI/UREupgQldyI/AAAAAAAAB1E/BWqEC0NTAY0/s1600/googleplus.png"  border="0" title='Follow Us On Google Plus'/></a> </td>
<td> <a href='http://www.pinterest.com/' target='_blank'><img alt='Pinterest' src="http://3.bp.blogspot.com/-uWHKe5F1DvU/UREupR_-hUI/AAAAAAAAB1A/1PGhhRARQgg/s1600/pinterest.png"  border="0" title='Follow Us On Pinterest'/></a> </td>
<td> <a href='http://www.stumbleupon.com/stumbler/AkhilPulotil' target='_blank'><img alt='Stumble Upon' src="http://4.bp.blogspot.com/-fj_fcgS8HHg/UREwbeEQRRI/AAAAAAAAB1k/uz42DFR_rbc/s1600/stumbleupon.png"  border="0" title='Follow Us On Stumble Upon'/></a>
</td></tr></tbody></table> </div></center>
<center>
</center>
<div style="text-align: left; display: inline-block;">
<h8 style="display:block;font-family:'calibri';font-size:17px;font-weight:bold;">Enter Your Email Below And Subscribe To Our Daily Newsletter !!</h8>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techghoul', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="techghoul" name="uri"/>
<input type="hidden" name="loc" value="en_EN" />
<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="sub-button" value="Enter" title='' alt='' />
</form></div><small> PS : We Hate Spamming Too ! You Are Safe With Us.</small></div></div>

Customizations :

1. Replace http://facebook.com/techghoul with your Facebook Page URL.
2. Replace http://twitter.com/techghoulakhil with your Twitter Profile URL.
3. Replace https://plus.google.com/103503580424052614840/posts with your Google Plus profile URL.
4. Replace http://www.pinterest.com/ with your Pinterest Profile URL.
5. Replace http://www.stumbleupon.com/stumbler/AkhilPulotil with your Stumble Upon Profile URL.
6. Replace techghoul with your Feedburner ID. You will find techghoul 2 times in the code.
7. Save and Enjoy !!

If you liked this article, Please Share This !!

And Subscribe Us On Facebook,Twitter,Google Plus or via Email.

Akhil Pulotil

About the Author:
Akhil Pulotil is the Founder and Administrator of Tech Ghoul. He is a 17 year old boy from India. He writes articles based on technology,blogging and smartphones. You can contact him via Facebook,Twitter or Google Plus.