Thesis Style Email Subscription Widget for Blogger

A few ago I was searching for an email subscribe widget and I found this cool widget, So I decided to re-share this widget here. Today I'll show you How to Add a Premium Thesis Style Email Subscription widget with social media buttons to Blogger blog. This widget looks very cool and will surly increase your social followers.

This widget contains Email Subscription and buttons to all Major Social Networks like;

Facebook
Twitter
Google+
YouTube
RSS Feed

How to Add Thesis Email Subscription Widget to Blogger.

The Installation of this widget is very simple and beginners can also do it without any problems. Follow the steps given below for installation of this widget.

Step 1: Go to Blogger Dashboard > Layout.

Step 2: Click on 'Add a Gadget' button and choose 'HTML/Javascript' widget.

Step 3: Copy and Paste the following code into the widget.

<!- 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/thearea51blog">Facebook</a>
</li>
<li>
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/jimmieluthra">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/The-Area51">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 == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" 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/AVvXsEgMTxZmTglmGHd4YrEeZrISdhkhQrOkm8t6361oHMb1cnUS7GoCMATDCHyqAQ02Nj_3r1tBhWQukJkzTxiBcqb40fitHW9e8p9A5CxRW2b9MNGpE9iJsZ6ud_Ym17fGeaDmcDp_nPifBjI/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 ->

Step 4: Now make the following changes to the code.

- Facebook Username

- Twitter Username

- Google+ ID

- RSS Feed

- YouTube Username

Step 5: Save the widget.

This will enable the widget on your blog. Please leave your comments below and let us know What do you think about this widget.

Widget Credit
The Widget code belongs to Bloggingehow.com. Thanks for such an awesome wiget.

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.