Tuesday, November 3, 2015
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 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH3lvQwqdfMhXxRuE_z_zL2UQCD-m-ilgeWmyZD1KryPtx1UdwcxyGloZI64ljkcDgNFIlOoR4Lz7oMU0UrJp-sD97QYaVHOu6UClrnv-z1Y5hPGU_N5ii1XTD-xJx3IjEV0oMx7ebqpk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwOyt9IiufWcIEpJF07jJa9jvuBvAsom87ITOh7kfqkDnRJCshc3m_EEy448Y6gaMbCpAXRvhkiUvXXnSahKpUb_os2xhXTjZ5dNgj7N1wX0gVvre0AIgr4Ibh5RZLozEWSxQpJmWoN5A/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/USERNAME/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlAMynXmNx1all-AYcVgfD5_AbXDVt2Y8QK58wiHRsmI81xBbyJlCrss-keHliDc0MVrDQMzV-PK1LV15mj-QHaVh1P-uuG_iHyCauLF2EaQHeMiULdFXBUSbCcTS5Xh8z223Q1vjkC8/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/FEEDBURNERID" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifX68qbK8dD0V_5vn0eAth852VTeVBw5VzSogM7x-g9HUn2_9Jm9k60VAtgvzQS_HOiF_YXY6YvNWwSzaZTthdNrimserc5rolmdpjEFk0jO9j0gQjYnCkhuCSqAaB-xXUkVq-GOKWUes/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://informationtutorial15.blogspot.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 == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj547C3HUKhmXMEYgh2nB01nsnoboxhcjnEihwDYqkL4QrCAXMzKLSjQlsAXIZKbq5zSAVN-xlI8Cq15A7QYCe-LLDU-yxDZbxNDisme-LgUkpvf4r5xRSYMzRh799t1RxcsmI1A9E5DUc/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.informationtutorial15.blogspot.com/2015/11/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhHeViFSiseGWo_rFWlai3LvD5vI7XSQES9_Mrd5hNenXMHRkwvwxo_CghIuyZtg2K5u2V0T-Hbqj8YHBo4jCejUbNUh2-6JngSLtZzPWlz45HsIcjDSdLmYIqG91bUe12MWbmkOoQ-4/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&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&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.
