Bootstrap Templates Bundle

Thursday, January 17, 2013

Slide out Facebook Like Box

Just page this code where you want to show : ( You can add it to your sidebar/ widget)
Check Demo:   JNnews24.com   bdnews24.com,

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>(function(d,s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

$(document).ready(function () {
bottompx = "0px";
$('#facebook_likebox').slideDown(1500).css({bottom: bottompx});
//facebook likebox
});
function closefaceboxlike(){
$('#facebook_likebox').slideUp(1500);
}</script>
<div id="facebook_likebox" style="float: left;
 position: fixed;
 left: 5px;
margin-bottom: 10px; border: 2px solid rgb(205, 219, 228);
background-color: #888fff; z-index: 10; bottom: 0px;">
<div style="position:absolute; left:-10px; margin-top:-10px;
 margin-right:174px; z-index:15;">
<a onClick="Javascript: closefaceboxlike()" href="Javascript:void(0);">
<img height="20" src="http://paimages.prothom-alo.com/secured/theme/public/
newdesign/style/images/closebox.gif"> </a></div>
<fb:like-box>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/JNnews24com/452277951480704"
 data-width="150" data-height="180" data-show-faces="true"
data-stream="false" data-header="false"></div>   </fb:like-box>

N.B: Change the red color portion by your own url

You can make other ads by replacing the Fade background colored portion. You can add image/paragraph etc.

Such as: 

<div style="height:180px;width:280px;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div> or 

<a href="http://jnnews24.com/?page_id=1622" target="_blank"><img style="vertical-align: top;" src="http://jnnews24.com/wp-content/uploads/2012/11/as.jpg" alt="" width="280" height="60" /></a>  

No comments:

Post a Comment

Murphy - Home Maintenance & Repair Service HTML Template

Murphy is a handyman repair service Bootstrap HTML Template. It is ideal for either all-rounders or professional teams to introduce the...