Add 5 in one Subscription Widget to Blogger Blog

Adding Facebook like box, twitter follow buttons and Google+ button in blog is preventing the loading speed of your blog. All you know that loading speed of your blog is the important factor to keep your audience with your blog for long time. If your blog is simple it can be done easily. Here I have to tell one thing that reducing number of widgets on your blog will increase blog loading speed causing more page views. That's why I'm going to introduce this 5 in one blogger subscription widget.

Email subscribe button, Facebook like button, Google+ button, Twitter Follow button, rss link are 5 properties added in a single 5 in one subscription widget. You can add it to any of your blog. This 5 in one subscription widget got good results.

You Might Also Like:

• Add Stylish Email Subscription Box With Social Icons To Blogger Blog

• Email Subscribe Box With Social Icons For Blogger And Wordpress

Let me allow to explain how to add this widget to blogger blog. Follow below simple steps to add this widget to your blog.

Installation Guide

• Login to your Blogger account

• Go to dashboard and move on Layout section

• Click on Add a gadget link and select HTML/JavaScript option

• Copy the below code into HTML box

<style type="text/css">
#tt-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
#tt-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
#tt-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
#tt-subscribe-box .email-box {background:#e3edf4; padding:11px;}
#tt-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
#tt-subscribe-box .email-box .txt,#tt-subscribe-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 150px;}
#tt-subscribe-box .email-box .btn,#tt-subscribe-box .email-box .btn:focus{background:#E36B0A; border:1px solid #AD5513; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding: 7px 8px; text-shadow: 1px 1px 0 #D08D00;}
#tt-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
#tt-text {
background:#4376b1;
border: 1px solid #CCC;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:300px;
}
#tt-text h3 {
color:white;
border-bottom: 1px dotted
white;
line-height:1.385em;
font-size: 18px;
padding: 0;
margin: 0 0 10px;
border-bottom: 1px dotted
#AAA;
font-wieght: normal;
text-transform: uppercase;
letter-spacing: 0;
font-family: Georgia,"Times New Roman",Times,serif;
}
</style>
<div class="tt_widget">
<div id="tt-text"><h3>Stay Connected With Us</h3>
<div id="tt-subscribe-box">
<div class="email-box">
<h4>Subscribe FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=trickstoo" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/trickstoo" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=trickstoo', 'popupwindow',
'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input 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" class="txt" />
<input type="hidden" name="uri" value="trickstoo" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value="Subscribe" class="btn" />
<div style="clear:both;"></div>
</form>
</div>
<div class="fb-like-box">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Ftrickstoo&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href="http://www.facebook.com/trickstoo" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div>
</div>
<div class="gplusone">
<div style="float:left;width:90px;">
<g:plusone href="http://www.trickstoo.com"></g:plusone>
</div>
<a href="https://plus.google.com/106667632864485528784/posts" target="_blank" rel="nofollow" style="color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Circle us on Google+</a><div class="clear"></div>
</div>
<div class="twitter-follow">
<a href="https://twitter.com/shanmugam39" class="twitter-follow-button">Follow @Shanmugam39</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> </div>
</div></div>

Note: Make some changes as below in above code before add this code into your blog.

• Replace trickstoo with feedburner name of your blog

• Replace trickstoo with facebook page name of your blog

• Replace www.trickstoo.com with your blog url

• Replace 106667632864485528784 with your Google+ page ID

• Replace shanmugam39 with your twitter username

Finally, Save the widget.

That's all, You are done!

Share this if you like this post. If you encounter any problem, feel free and comment below to the post to get a solution. Share your Experience with us by commenting below.