Now you can Subscribe using RSS

Submit your Email

Thursday, January 29, 2015

How to add facebook like button widget floating on blog

Irvan Dev
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
Facebook Like Button Widget [images:acebangsam.us]


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

Irvan Dev / Author & Editor

I am Irvandev, I m a fairly easy blogger and it's, untill today My spouse and i still love writing and submitting articles for blog site "Blog Irvandev".

7 comments:

  1. Hmm… I read blogs on a similar topic, but i never visited your blog. I added it to favorites and i’ll be your constant reader.
    buying facebook likes

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Greetings dear,many many thanks for sharing such wonderful information with us.I am eagerly waiting for your next post.Kindly please visit buy facebook likes site for social information.buy real likes

    ReplyDelete
  4. I must admit I have popped in a read a good number of your blogs but I have no idea how to post a response over there, so I'll tell you now how good you are at describing the stuff your at - I must admit I find it insightful to read your blogging. Keep up the good work. If you want to know more about a sites, please visit our website buy twitter followers

    ReplyDelete
  5. I'll give you a pat on the back just for the sheer effort in screencapping all those blogs.Giving a blog talk to beginner bloggers in the not-too-distant future, I'll be pointing people in the direction of your efforts. Nicely put together dude.Here is our small effort aboutbuy instagram followers

    ReplyDelete
  6. Amazing post dude.It will be very helpful for begginers like me.Thank you very much for this important post.Waiting for your next post.You can visit our site also
    buy real facebook likes

    ReplyDelete

Coprights @ 2016, Blogger Templates