How to add facebook like button widget floating on blog

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

Irvan Dev Blog  will share a litle tutorial on how to install or add the facebook like button widget floated on blogspot, before going into the installation process, a little explanation on facebook like button widget, the widget is already widely in use for some blogs that spread across the internet, and this is one of them, if you are interested in using it for your blog or website, please follow the steps below.

Well to start installing the widget with using CSS and Javascript Code.

How To Add Facebook Like Button Widget Floating On Blog

Lets follow the steps bellow:

1. Login to your blogger panel admin

2. Click On Template » Edit HTML

3. Find this kbd Ctrl+F  ]]></b:skin> or </style>

4. Then add the following CSS script just above the kbd ]]></b:skin> or </style>

#facebook-float-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
#facebook-float-close {
    width: 100%;
    height: 100%;
}
#facebook-float-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 348px;
    height: 250px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#facebook-float-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}
#facebook-float-button:before {
    content: "X";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}
#facebook-float-link,#facebook-float-link a.visited,#facebook-float-link a,#facebook-float-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}

5. Add script HTML/Javascript just above the code </body>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', 
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#facebook-float-background').delay(5000).fadeIn('medium');
$('#facebook-float-button, #facebook-float-close').click(function(){
$('#facebook-float-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>

6. Add HTML Code. Click Layout >> Add a Gadget >> HTML/Javascript

<div id='facebook-float-background'>
<div id='facebook-float-close'>
</div>
<div id='facebook-float-display'>
<div id='facebook-float-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Blog-Irvan-Dev/1508985449390375&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 220px;'></iframe>
<div id="facebook-float-link">Powered by <a style="padding-left: 0px;" href="http://irvandev.blogspot.com" rel="nofollow">BLOG IRVAN DEV</a></div>
</div>
</div>

Click save and see the results, good luck

Facebook Like Button Widget [images:acebangsam.us]

Demo

Change This Text: https://www.facebook.com/pages/Blog-Irvan-Dev/1508985449390375
with your own Facebook Url.

Go to Link