Saturday, 21 June 2014
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.
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=yeahgotit" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/yeahgotit" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=yeahgotit', '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 == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address')
{this.value = '';}" value="Enter your email address" class="txt" />
<input type="hidden" name="uri" value="yeahgotit" />
<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%2Fyeahgotit&send=false
&layout=button_count&width=80&show_faces=false
&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href="http://www.facebook.com/yeahgotit" 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.yeahgotit.blogspot.com"></g:plusone>
</div>
<a href="https://plus.google.com/117626945037027621323/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/thepcsoft" class="twitter-follow-button">Follow @thepcsoft</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> </div>
</div></div>
Now Change The Following values With Your Own
- on line 53 , 55 , 59 and 68 Change YEAHGOTIT with your Feedburner ID
- on line 75 and 80 Change YEAHGOTIT with your Facebook ID
- on line 87 Change http://www.yeahgotit.blogspot.com with your site name
- on line 89 Change 117626945037027621323 with Your Google+ ID
- on line 95 and 96 Change thepcsoft with Your Twitter ID
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
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
Author:Muhammad Shoaib
Mohammad Shoaib is a Passionate Blogger,Have Very Creative Ideas About Blogging. Read More →
Related Posts:
blogger widgets
Subscribe to:
Post Comments (Atom)
0 comments: