
Installing a Facebook Pop Up Like Box Widget has been one of the popular features amongst blog users and website owners, ever since the social media websites like Facebook became viral.
Facebook Pop up Like Box For Blogger:
This is an amazing and magical Facebook pop up like box specially for Blogger blogs that will help you to increases Facebook page likes of your blog rapidly. The name of this widget itself proves that when someone enters into your blog while loading page, page gets dark transparent background and this widget appears in order to ask the user for liking your page. This widget will work in every webpage of your blog.
How To Add Facebook Pop up Like Box in Blogger?
- Go To Blogger >> Layout >> Add a Gadget
- Choose HTML/JavaScript
- Paste The Following Code in Content Box
<style type="text/css"> #fb-back { display: none; background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999;} #fb-exit { width: 100%; height: 100%; } .fb-box-inner { width:300px; position: relative; display:block; padding: 20px 0px 0px; margin:0 auto; text-align:center; } #fb-close { cursor: pointer; position: absolute; top: 5px; right: 5px; font-size: 18px; font-weight:700; color: #000; z-index: 99999; display:inline-block; line-height: 18px; height:18px;width: 18px; } #fb-close:hover { color:#06c; } #fb-box { min-width: 340px; min-height: 360px; position: absolute; top: 50%; left: 50%; margin: -220px 0 0 -170px; -webkit-box-shadow: 0px 0px 16px #000; -moz-box-shadow: 0px 0px 16px #000; box-shadow: 0px 0px 16px #000; -webkit-border-radius: 8px;-moz-border-radius: 8px; border-radius: 8px; background: #fff; /* pop up box bg color */ border-bottom: 40px solid #f0f0f0; /* pop up bottom border color/size */ } .fb-box-inner h3 { line-height: 1; margin:0 auto; text-transform:none;letter-spacing:none; font-size: 23px!important; /* header size */ color:#06c!important; /* header color */ } .fb-box-inner p { line-height: 1; margin:0 auto 20px;text-transform:none;letter-spacing:none; font-size: 13px!important; /* header size */ color:#333!important; /* text color */ } a.fb-link { position:relative;margin: 0 auto; display: block; text-align:center; color: #333; /* link color */ bottom: -30px; } #fb-box h3,#fb-box p, a.fb-link { max-width:290px; padding:0; } </style> <!-- facebook plugin --> <div id='fb-back'> <div id="fb-exit"> </div> <div id='fb-box'> <div class="fb-box-inner"> <div id="fb-close">X</div> <!-- edit your popup header text here --> <h3>Like This Template?</h3> <!-- edit your supporting text here --> <p>Show your Support. Become a <b>FAN!</b></p> <!-- edit your fb name below --> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/seohuntt&width=290&height=275&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false'style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'></iframe> <!-- edit your supporting link here --> <a class="fb-link" href="//YOUR_BLOG_NAME.blogspot.com">Contact Us</a> </div> </div> </div> <!-- popup plug-in snippet --> <script type='text/javascript'> //<![CDATA[ //grab user's browser info and calculates/saves first visit 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; }; // the pop up actions $(function ($) { if ($.cookie('popup_fb') != 'yes') { $('#fb-back').delay(400).fadeIn("slow"); // options slow or fast $('#fb-close, #fb-exit').click(function () { $('#fb-back').stop().fadeOut("slow"); // options slow or fast }); } //initiate popup function by setting up the cookie expiring time $.cookie('popup_fb', 'yes', { path: '/', expires: 0 }); }); //]]> </script> <!-- facebook like box ends -->
- Replace SEOHUNTT With Your Facebook Fan Page Username
- Leave The Title Box Empty!
- Click Save!
T20 world cup 2016 Highlights
ReplyDeleteThis really works, I added it to my blog http://www.pookulomodda.com
ReplyDeleteTHank A lot Bro Thank Q For Sharing This Valuable Information
ReplyDeleteTHANKS WORK AT MY BLOG
ReplyDeletehttp://www.kaltimmerdeka.com/
tenho um blogger com um template premium comprado da PTB template, e esse código é apagado depois que salvo, parece que meu site é incompatível com linguagem css, acho que é isso n sei ao certo...
ReplyDelete