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.
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 == '') {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="techfunters" />
<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&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/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.techfunters.blogspot.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/Techfunters" class="twitter-follow-button">Follow @Techfunters</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> </div>
</div></div>
Finally, Save the widget.
Also Read: How To Add 5 in one Subscription Widget to WordPress Blog?
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.
0 comments:
Post a Comment