The installation of this widget is damn easy, you can add this widget as an simple HTML/JavaScript widget. Follow below steps to add this widget
1. Go to Blogger Dashboard
2. Select your blog from
3. Go to Layout > Add Widget > HTML/JavaScript
4. Copy and Paste code (don't forgot to change our username with yours)
5. Save your widget
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>
<style>
#hbfanback {
display: none;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#hbfan-exit {
width: 100%;
height: 100%;
}
#hbfanbox {
background: white;
width: 420px;
height: 270px;
position: absolute;
top: 58%;
left: 63%;
margin: -220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#hbfanclose {
float: right;
cursor: pointer;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKlinGy9sYy8r3qCLkN1rVMBI4d-qFnyTlGVQ-T-lRu82oWjBzSqVXec-61UCDe9JskibKkp7wnKXZLzlzYQcTeUTfqVUiyG5wYbd5ddJCWB37EZ-GQzK5kRcqaIPh1ocF9AeQXpN0K5s/s1600/hb-fanclose.png) repeat;
height: 15px;
padding: 20px;
position: relative;
padding-right: 40px;
margin-top: -20px;
margin-right: -22px;
}
.hbremove-borda {
height: 1px;
width: 366px;
margin: 0 auto;
background: #F3F3F3;
margin-top: 16px;
position: relative;
margin-left: 20px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function(key, value, options) {
// key and at least value given, set cookie...
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() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
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_user_login') != 'yes') {
$('#hbfanback').delay(100).fadeIn('medium');
$('#hbfanclose, #hbfan-exit').click(function() {
$('#hbfanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', {
path: '/',
expires: 7
});
});
</script>
<div id='hbfanback'>
<div id='hbfan-exit'></div>
<div id='hbfanbox'>
<div id='hbfanclose'></div>
<div class='hbremove-borda'></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ffuadrz.blogger&width=340&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:340px; height:258px;margin-left: 8%;" allowTransparency="true"></iframe>
</div>
</div>
Widget Customizations
Widget Customizations If you have already installed jQuery library then remove below code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>
Replace fuadrz.blogger with your facebook fanpage username.
This widget appears only once in 7 days (per person), if you want to appear it on every page load then remove below code snippet from widget code
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
By default, This popup appears on screen for 10 seconds . If you wish to change it then edit below code. (Note: 1 Second = 1000,10 Seconds = 10000, 20 Seconds = 20000)
.delay(10000)
0 Response to "Wordpress style facebook likebox"
Post a Comment