Social Media Follow Buttons Widget For Blogger

Learn how to add social media follow buttons widget for blogger in your blog. The Social media icons like Facebook, Twitter, Goggle+, Pinterest on this follow widget makes it easy for readers to connect with your blog. Just like the social share buttons that can increase your blog's pageviews when your post is shared, this widget also increases your blog's traffic. This is because those who subscribed from this blogger widget will get your updates in their social accounts, meaning an increase in your returning visitors and the number of fans on your twitter, facebook, google+ accounts. Also Included in this widget is an email subscription box that sends your latest blog posts as an email to your blog's subscribers. I'll say it is one of the best and most popular blogger widget, beacuse you'll see it on visiting most websites. Below are the guidelines on how to add the social media follow buttons in your blogger blog.

                      How to Add 'Link to This Post Widget' For Blogger

How to Add Social Media Buttons To Blogger

  • Goto your blogger dashboard,
  • Navigate to 'layout'.
  • Click on 'add a gadget'
  • Select 'Html/Javascript'
  • Copy any of the codes below for your preferred style and paste in the text field.

Social Media Follow And Subscription Widget For Blogger




<style type="text/css">

img.beintouch:hover {

    background: none repeat scroll 0 0 #D6D6D6;

    border-radius: 16px 16px 16px 16px;

    box-shadow: 0 0 10px #565656;

}

.emailtext {

    background: url("http://2.bp.blogspot.com/-j-CXUeGodJI/T0H9qpD6cjI/AAAAAAAAAI8/uuryDfQYWVI/s1600/mailbox.png") no-repeat scroll 4px center transparent;

    border: 1px solid #7E4E27;

    border-radius: 4px 4px 4px 4px;

    box-shadow: 1px 1px 4px #7E4E27 inset;

    color: #444444;

    font-weight: bold;

    margin-left: 2px;

    padding: 7px 15px 7px 35px;

    text-decoration: none;

    width: 176px;

}

.ebutton {

    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;

    border: 1px solid #D3D3D3;

    border-radius: 4px 4px 4px 4px;

    color: #FFFFFF;

    cursor: pointer;

    font-weight: bold;

    margin-left: -18px;

    margin-top: 5px;

    padding: 6px 15px;

    text-decoration: none;

    text-shadow: 1px 1px 0 #000000;

}

</style>

<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/USERNAME"><img src="http://2.bp.blogspot.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/gLqbjiBuBfc/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/USERNAME/" rel="nofollow"><img src="http://3.bp.blogspot.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/FEEDBURNERID" rel="nofollow"><img src="http://2.bp.blogspot.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://detutor.com"></a></td></tr></tbody></table>

<div>Get Latest Tips via e-mail</div>

<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNERID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">

<input type="hidden" value="FEEDBURNERID" name="uri" />

<input type="hidden" value="en_US" name="loc" />

<input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />

<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />

</form>



Animated Social Media Follow Wigdet For Blogger



<style>
#abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#abt .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh6.googleusercontent.com/-O_eNfqyGbXY/Ua7QecE1aiI/AAAAAAAAA_M/CyeEAD56u1M/w35-h158-no/facebook+and+google%252B+.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#abt .icon{overflow:hidden; color:#fafafa;}
#abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#abt li:hover .icon,
.touch #abt li .icon{width:210px;}
.touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/USERNAME"target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/ID/posts"target="blank">Follow us on Google+</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://www.twitter.com/USERNAME"target="blank">Follow us on Twitter</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/USERNAME/"target="blank">Follow us on Pinterest</a></li>
<li data-alt="Subscribe for Updates"><a class="icon rss" href="http://YOURURL/feeds/posts/default"target="blank">Subscribe for Updates</a></li>
</ul>
<small><div style="font-size:50%; text-align:right;"><a href="http://www.detutor.com/2015/01/social-media-follow-buttons-widget-blogger.html" target="_blank" title="Get This Widgets">Blogger Widgets</a></div></small>





Social Network Popup Widget for Blogger


<style>
#socialslide{background: rgb(41, 40, 40) url(http://3.bp.blogspot.com/-FZRJ9cS-Mkk/UXpZC0CGyrI/AAAAAAAAAgg/tnE5hftHXuM/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FUSERNAME&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/USERNAME" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @USERNAME</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<div class='clear'></div>


Also Read:       How to Customize Labels Cloud Widget In Blogger  
                        Square Popular Posts Blogger Widget with Rotating Effect
                        Sliding Recent Post Widget For Blogger

  • Save your gadget.

Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Share on Google Plus

About Grace Joseph

Grace Joseph is an educational and tech blogger. Other than having passion for gadgets and generally the tech niche, she's a writer at heart and reading is forever a hobby.

4 comments:

  1. Hello Grace!

    I have been following your blog for quite some time now, and I must say I love what you are doing here. Especially the blog new face and design.

    As for the blogger blog share buttons, the 2nd and 3rd are my favorite.

    Very attractive and attention seeking. Which will actually compel the toughest dude to click on them.

    However I would have preferred you to include easy edit tips for my fellow bloggers whom might be finding it hard understanding HTML codes, to easily edit and change the colors to their own unique standard and taste. You know uniqueness matters.

    Your writing skills are enamours. And I just bought for myself 2 sit belts awaiting your 2015 ride in full.

    Uche Francis!

    ReplyDelete
    Replies
    1. Hello Uche,

      Thanks for your kind words, it's really encouraging. From your suggestion, i'll definitely edit the post and put up some guidelines on how to customise each code for the social folllow widget. Good thing you pointed this out, hope to get more visits from you mister.

      Delete
  2. I really like what you are doing on your blog. I just need facebook button. Thank you for writing this, it is vrey helpful and you have so pretty design on your blog :)

    ReplyDelete
    Replies
    1. you're welcome Miroslava, twas good to have you here. Stick around to get other best blogger widgets just like the Social Media Follow Buttons.

      Delete

Please share your views on this topic with Grace Joseph by leaving a comment.