How To Add Sliding Google+ Followers Box
1. Go to Blogger > Layout > Add Gadget > HTML/JavaScript.
2. Paste the following code in it. Change https://plus.google.com/u/0/109374794840270407199 with your Google+ url.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9tpFdVpQ3PAA32ybDhkoLM2q0Ruf7mJ_WXrK0lv-p9AXNV6MyHKLK9Truvsrv5R8n7h4FqX4db8ghXPxs_kwuyeoTGDokClkAGxpEx05Hxwau_-GmFKGOrbX0Q3cVQHRV_C2pLByhRCY/s400/g%252B+softglad.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:40%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/u/0/109374794840270407199" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
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>
How to Add Sliding FACEBOOK LIKE BOX
- Go to “LAYOUT” > “ADD A GADGET”.
- Select “HTML/JAVASCRIPT” from the list and add the following code:
$(document).ready (function() { $ (".fblikebox").hover (function() { $(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate ({right: "-250"}, "medium");}, 500);});
</script>
<style type="text/css">
.fblikebox{background: url("http://i1310.photobucket.com/albums/s658/ubaidh/FacebookBadge_zps8026204c.jpg?t=1366893812") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.fblikebox div{border:none;position:relative;display:block;}
.fblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.fblikebox span a{color: #808080;text-decoration:none;}
.fblikebox span a:hover{text-decoration:underline;}
</style>
<div class="fblikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fseosupports&width=245&colorscheme=light&show_faces=true& connections=12&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;">
</iframe>
</div>
</div>
Note: Change “seosupports” in URL, to your own facebook user/page name.
- Click “SAVE”.
That’s it, you are all done. Refresh your blog to see the widget.
