Phum-share

Last Updated:    Sunday, July 31, 2016

How to add fixed facebook like box in the blogger Right Scroll

One of the most useful and popular way of getting more likes into your business's facebook page is to put facebook like box into your blog or sites. Basically, you should copy the script given by facebook to add facebook like box into your site as documented by Facebook developer.
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&amp;width=247&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;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: 


  1. Before saving the template, you have to replace http://www.facebook.com/allblogsolution by your own facebook page url.
  2. Do not use jquery link if there is already jquery link into your blogger template.

Share this

No comments:

If You Have Any Question Please Comment Back ..

HTML Code Encoder