When you point Facebook img, it hovers and slide on left. Then you can see Facebook like box.
Follow the given steps to add fixed Facebook Like Box in the sidebar of blogger template:-
Step 01: Login to blogger dashboard and click on layout>>add gadget.
Step 02: Now choose HTML/Javascript gadget and paste the following block of codes:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".facebookstaticlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-252"}, "medium");}, 502);});
//-->
</script>
<style type="text/css">
.facebookstaticlikebox {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiblxYsV1eFW-Pcwch-AJjIC5QtVg0CUJi-QFTWqDc2_0-6iN8Q7PtqB5bIL-S-PmL1xzYenewsHOfKXpHZPrMjRpFxxOR7RYcKfwYwR4b2j3d7vGdSXdFPat__ybqQC3-EC3i9tDxrbe1G/s1600/facebook-png.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 272px;
padding: 0 6px 0 45px;
width: 247px;
z-index: 99999;
position: fixed;
right: -250px;
top: 16%;
}
.facebookstaticlikebox div {
border: none;
position: relative;
display: block;
}
.facebookstaticlikebox span {
bottom: 12px;
font: 10px "lucida grande", tahoma, verdana, arial, sans-serif;
position: absolute;
right: 6px;
text-align: right;
z-index: 99999;
}
.facebookstaticlikebox span a {
color: #808080;
text-decoration: none;
}
.facebookstaticlikebox span a:hover {
text-decoration: underline;
}
</style>
<div class="facebookstaticlikebox" style="">
<div><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips and Tricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ot-RmuAU_R44s3dPu5V7c8cArtqbVX_JUmTaQ2GAZeDB9udqWY5rTtbWSj04-fV1gGHLAt2Pb5LBwGHeAdXkeaR3fCdCwwIGGpvhT2iO4RaB_isZs3Znl1rJjP7SAhg7hD5FmzM0jBY/s1600/all.png" width="60" alt="All Blog Solution" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Solution"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ot-RmuAU_R44s3dPu5V7c8cArtqbVX_JUmTaQ2GAZeDB9udqWY5rTtbWSj04-fV1gGHLAt2Pb5LBwGHeAdXkeaR3fCdCwwIGGpvhT2iO4RaB_isZs3Znl1rJjP7SAhg7hD5FmzM0jBY/s1600/all.png" width="60" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ot-RmuAU_R44s3dPu5V7c8cArtqbVX_JUmTaQ2GAZeDB9udqWY5rTtbWSj04-fV1gGHLAt2Pb5LBwGHeAdXkeaR3fCdCwwIGGpvhT2iO4RaB_isZs3Znl1rJjP7SAhg7hD5FmzM0jBY/s1600/all.png" alt="All Blog Solution" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/allblogsolution&width=247&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=272" scrolling="no" frameborder="1" scrolling="no" style="border:none; overflow: hidden;background:#f7f7f7; height: 272px; width: 247px;">
</iframe>
</div>
</div>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".facebookstaticlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-252"}, "medium");}, 502);});
//-->
</script>
<style type="text/css">
.facebookstaticlikebox {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiblxYsV1eFW-Pcwch-AJjIC5QtVg0CUJi-QFTWqDc2_0-6iN8Q7PtqB5bIL-S-PmL1xzYenewsHOfKXpHZPrMjRpFxxOR7RYcKfwYwR4b2j3d7vGdSXdFPat__ybqQC3-EC3i9tDxrbe1G/s1600/facebook-png.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 272px;
padding: 0 6px 0 45px;
width: 247px;
z-index: 99999;
position: fixed;
right: -250px;
top: 16%;
}
.facebookstaticlikebox div {
border: none;
position: relative;
display: block;
}
.facebookstaticlikebox span {
bottom: 12px;
font: 10px "lucida grande", tahoma, verdana, arial, sans-serif;
position: absolute;
right: 6px;
text-align: right;
z-index: 99999;
}
.facebookstaticlikebox span a {
color: #808080;
text-decoration: none;
}
.facebookstaticlikebox span a:hover {
text-decoration: underline;
}
</style>
<div class="facebookstaticlikebox" style="">
<div><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips and Tricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ot-RmuAU_R44s3dPu5V7c8cArtqbVX_JUmTaQ2GAZeDB9udqWY5rTtbWSj04-fV1gGHLAt2Pb5LBwGHeAdXkeaR3fCdCwwIGGpvhT2iO4RaB_isZs3Znl1rJjP7SAhg7hD5FmzM0jBY/s1600/all.png" width="60" alt="All Blog Solution" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Solution"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ot-RmuAU_R44s3dPu5V7c8cArtqbVX_JUmTaQ2GAZeDB9udqWY5rTtbWSj04-fV1gGHLAt2Pb5LBwGHeAdXkeaR3fCdCwwIGGpvhT2iO4RaB_isZs3Znl1rJjP7SAhg7hD5FmzM0jBY/s1600/all.png" width="60" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ot-RmuAU_R44s3dPu5V7c8cArtqbVX_JUmTaQ2GAZeDB9udqWY5rTtbWSj04-fV1gGHLAt2Pb5LBwGHeAdXkeaR3fCdCwwIGGpvhT2iO4RaB_isZs3Znl1rJjP7SAhg7hD5FmzM0jBY/s1600/all.png" alt="All Blog Solution" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/allblogsolution&width=247&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=272" scrolling="no" frameborder="1" scrolling="no" style="border:none; overflow: hidden;background:#f7f7f7; height: 272px; width: 247px;">
</iframe>
</div>
</div>
Step 03: Now save the template.
Note:
- Before saving the template, you have to replace http://www.facebook.com/allblogsolution by your own facebook page url.
- Do not use jquery link if there is already jquery link into your blogger template.
No comments:
If You Have Any Question Please Comment Back ..