.

Saturday, September 7, 2013

Add a Beautiful Social Subscribe Widget to Blogger

Posted by Categories: , ,  No comments

blogger subscribe widget
A Blog is lonely without subscribers and visitors, Social sharing plays an important role in a blogs popularity. More subscribers means more traffic and traffic converts into income and high search engine rankings. There are many Widgets available for this purpose but Adding different javascript widgets for different social networks makes blog slow, Here is a Cool Stylish Social Subscribe Widget with Multiple Subscription Options. One widget and you're done, It doesn't make blog slow and loads pretty fast.
This Widget contains following subscribe options, It has a Beautiful bar with social icons like Facebook page, Twitter page, Google plus, Pinterest, RSS.


  • Facebook Like Button
  • Twitter Follow Button
  • Google +1 Button
  • Email Subscribe Form



Click on this button to see working demo of the widget.

How to Add it to Your Blog

Here are the steps to Add the Widget to your Blogger Blog.

Step 1: From your Blog Dashboard, Go to Layout.

Step 2: Click on 'Add a Gadget'

Step 3: Scroll down and choose HTML/Javascript Widget.

Step 4: Copy and Paste the following code inside the window.

<style>
#socialwidget {
border: 1px solid #ebebeb;
width: 300px;
}
.TZ-social{
padding: 10px 10px 10px 10px;
border-bottom: 1px solid #ebebeb;
}
.TZ-social img:hover{opacity:0.8}
.googleplus {
background: #ffffff;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
ine-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
margin: 9px 70px;
width: 310px;
}
.g-plusone {
float: left;
}
.twitter {
background: #ffffff;
border-bottom: 1px solid #ebebeb;
padding: 10px;
}
.TZ {
background: #ffffff;
border-top: 1px solid white;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.TZ span {
color: #000;
font-size: 11px;
position: absolute;
margin: -12px 100px;
width: 310px;
}
#widgetbox .author-credit a {
font-size: 10px;
font-size: 10px;letter-spacing: 1px;
color: #1E598E;
text-decoration: none;
}
.email-subscribe-emailbox {
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-image: initial;
height: 42px;
background: #EFF8FB;
width: 280px;
}
.email-subscribe-emailbox form {width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.email-subscribe-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.email-subscribe-emailbox input.emailu:focus {color: #333;}
.email-subscribe-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.email-subscribe-emailbox input.submitu:hover {text-decoration: none;}
.TZDefault {border: 1px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id="socialwidget">
<!-- Begin Widget -->
<div class="TZ-social">
<!-- social ico -->
<center>
<a style="margin-right: 10px;" href="http://facebook.com/thearea51blog" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPnlS_QvsI5UoZrD05FjXj0952T7N417XIBXjl36Qo0GdKUHhEabNm9tM3I7IgD_MXs0imAqCURKSWnjAIplygoZb41aCPCWMjxTb8NAtJgLkLsOYomqON2q8xrbuqC4r0iZhP-L4HOQ/s1600/facebook.png" title='Facebook'/></a>
<a style="margin-right: 10px;" href="http://twitter.com/jimmieluthra" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZgB8o0BtqYucCap824oJcWNWN1wXXWEBQ1lCiJOyHlTKQMq3y_tFKg7SCjpMh9jhG293x8257S_8ir2w8Ejv8ldORGcqAV1wkaFsAi7YLe_N9V4XsL7e8G-mVQH9Nf3YbmF5iaVb-cbs/s1600/twitter.png" title='Twitter'/></a>
<a style="margin-right: 10px;" rel="me" href="https://plus.google.com/117521503834739609237" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgOvvLYxkPQYwqGsMh9RqnJz5DTG9ebpmz3yTHqAPd55d4TnXxJNzxPYouWTxt-WplJEexWFgSu_fpA3ZKYLR_Sq1XTs2AZ0HJlQ3zOVnYwer95e0FkKR84AWatBzRWMu1_pT5BxPbBJ4/s1600/gplus.png" title='Google Plus'/></a>
<a style="margin-right: 10px;" href="http://pinterest.com/jimluthra/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyr9FoTIsNPg6Zol_5Ott0-E5mJ4MFDfO-yPo3rcdiH7YHBES7ep5IflD-o3rrjcSP_ejTGg7GxgSWG5LKx-IUxfhI1muGilHn0ZQDDUNXCwsksAIFfNAg2C6i-ISYXAdTnDFYy_gK8Ko/s1600/pinterest.png" title='Pinterest'/></a>
<a style="margin-right: 10px;" href="http://feeds.feedburner.com/The-Area51" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJQQNx-z8IrTG09sm5DwtUCKWUm-dtXF8SteFXRL3RoSoTZllh5HtSQP-rE9aPBtH8jKdIrMYnLnk8E8jHkYtCHuK9gOLkGY6SBoE4g-3aBNu0OLwJSg8XHKjPLYB4WByYad_TXfrdw9U/s1600/rss.png" title='RSS Feed'/></a>
</center>
</div>
<div class="googleplus">
<span><font><font>Recommend Us On Google </font></font></span>
<!-- GooglePlus -->
<!-- Place this tag where you want the 1 button to render -->
<g:plusone size="medium" href="http://www.the-area51.com/"></g:plusone>
<!-- Place this render call where appropriate -->
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="TZ">
<!-- facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fthearea51blog&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true">
</iframe>
<span>Like Us On Facebook</span>
</div>
<div class="twitter">
<!-- Twitter -->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=jimmieluthra&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
</iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="email-subscribe-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="70px">
<input class="submitu TZDefault" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="The-Area51"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
<div id="widgetbox" style="background: #EBEBEB;border-top: 1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.the-area51.com/2012/10/how-to-add-multi-social-subscription.html" target="_blank">Get this</a></span>
</div>
<!-- End Widget -->
</div>

Step 5: After Adding the code inside the window, Make the following Changes.

         -  Facebook Username

         -  Google+ Username 

         -  Twitter Username   

         -  Pinterest URL  

         -  Feedburner Username   

         -  Blog URL             


Step 6: Now click Save.
Spread The Love, Share Our Article

Do You Like This Article ?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

0 comments:

Post a Comment

 

 about US


SoftGlad is a leading blog which providing Latest News, Social Media, Web Design, Blogging, PC tutorials and many other stuffs. We will always trying to relate with our valuable readers by updating the quality contents. There are millions of blogs which providing technological knowledge but our goal is to provide dainty articles and useful technological knowledge.
See More

RECENT POSTS


RECENT Comment