Add Floating/Slide Out Facebook Like Box in Blogger

Adding Facebook Like box to blogger blog lots of bloggertips and bloggertricks offered online. Occasionally adding code to blog is not achievable due to error tags on code. Facebook Like box on blog take up more room, to reduce blog room and using for adding another widget is a superior idea. Popup Facebook Like box widget not only save your blog space and attracts visitor on scrolling technique of window.  The following steps will see you add this our amazing likebox into your blogger blog.

Floating/Sliding Facebook Like Box Demo

Live Demo

How To Add Floating Facebook Fan Page To Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now Paste the Code shown below just before/above it

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

• Now go to Layout and select HTML/Javascript and paste the code shown below

<script src="http://js.howtouses.com/blogger/twittersliderjavascript.js" type="text/javascript"></script>
<style>.latesthack2likebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlDQMPzf9p-c5lLQH8xOz4Q58Xm_iH2jGNQvpQWYURstQgqlJMBsAO4Q4XYOjc9SM7OfrjeIvCV3tFxiq0GNiBUw9ie-b4FSvnO0XKd5k08ur7p6CJe47x4xN09Gj_r1Xb9qKn_rH2H5g/s1600/w2b_facebookbadge.png") 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%;}
.latesthack2likebox div{border:none;position:relative;display:block;}
.latesthack2likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.latesthack2likebox span a{color: #808080;text-decoration:none;}
.latesthack2likebox span a:hover{text-decoration:underline;}</style>
<div class="latesthack2likebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Flatesthacking&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>
<span>Mybloggertools.org</span></div></div>

• Replace latesthacking with your facebook username

Like it? Share it.