0
Best Advanced Social Subscription Widget for Blogger

Best Advanced Social Subscription Widget for Blogger


Social Media Subscription Widgets play an important role to increase blog traffic and also Facebook Likes, RSS Subscribes, Twitter and Google Plus Followers. Keeping in mind the importance I am going to share another Social subscription Widget for Blogger. his is the best and easiest way to increase blog traffic. This Widget contain 4 Social Networks links with additional search box. It consists of Facebook Page link, Twitter Profile link, Google Plus Link, Feedburner Feeds link. I already shared All-In-One Social Media Subscription Widget. This widget is lighter and stylish have black tone shade which makes this widget awesome and best for using on blogs. So toady I am sharing a Social Media Subscription with Search Box Widget for Blogger.

Tutorial to install Advance subscription box


  • Go To Blogger >> Layout >> Add a Gadget
  • Choose "HTML/JavaScript"
  • Paste The Following Code In The Content Box



<style type="text/css">
/* RB Style sheet for subscription box */
#rb-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
#rb-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
#rb-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
#rb-subscribe-box .email-box {background:#e3edf4; padding:11px;}
#rb-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
#rb-subscribe-box .email-box .txt,#rb-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;}
#rb-subscribe-box .email-box .btn,#rb-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;}
#rb-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
#rb-text {
border: 4px solid #C8e993;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:300px;
}
#rb-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: bold;
text-transform: uppercase;
letter-spacing: 0;
}
</style>
<div class="rb_widget">
<div id="rb-text">
<div id="rb-subscribe-box">
<div class="email-box">
<h4>Subscribe FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggerplanet" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/bloggerplanet" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerplanet', '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="bloggerplanet" />
<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%2Fbloggerplanet&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/bloggerplanet" 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.bloggerplanet.com"></g:plusone>
</div>
<a href="https://plus.google.com/u/0/b/115508725363370825317" 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/bloggerplanet" class="twitter-follow-button">Follow @bloggerplanet </a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> <br/>
<div >
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggerplanet&amp;width=297&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:297px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
</div></div>



Customization:




  • Replace the Highlighted Data with yours



If you have any doubt in your mind, you may ask via comments or contact form.

DON'T FORGET TO "SUBSCRIBE" or"LIKE" FOR FURTHER UPDATES

Comment below, let me know what do you think?

Post a Comment

 
Top