About Blogging - Adding Facebook Pop-Up Like Box

August 23, 2016

About Blogging - Adding Facebook Pop-Up Like Box

Hello there friends!

A new blogging tweak I learned today which made me happy and I wanna share it to you J

Thanks to this website – Helplogger –Facebook Pop-Up Box. This is a re-blogged post from Helplogger and simplified. If you want further details, click the above link.

You can add a Pop-up box to your blogger page in 3 basic steps:

1. Go to your LAYOUT section, choose Add Gadget then click HTML/Javascript

2. On it Copy and paste below codes

3. Change the highlighted Facebook address to your own address.

Note: This set up will load in 5 seconds and as a default, it will only show up for first time visitors.

></o:p><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><o:p></o:p><style><o:p></o:p>#fbox-background {<o:p></o:p>display: none;<o:p></o:p>background: rgba(0,0,0,0.8);<o:p></o:p>width: 100%;<o:p></o:p>height: 100%;<o:p></o:p>position: fixed;<o:p></o:p>top: 0;<o:p></o:p>left: 0;<o:p></o:p>z-index: 99999;<o:p></o:p>}<o:p></o:p><o:p> </o:p>
#fbox-close {<o:p></o:p>width: 100%;<o:p></o:p>height: 100%;<o:p></o:p>}<o:p></o:p><o:p> </o:p>
#fbox-display {<o:p></o:p>background: #eaeaea;<o:p></o:p>border: 5px solid #828282;<o:p></o:p>width: 340px;<o:p></o:p>height: 230px;<o:p></o:p>position: absolute;<o:p></o:p>top: 32%;<o:p></o:p>left: 37%;<o:p></o:p>-webkit-border-radius: 5px;<o:p></o:p>-moz-border-radius: 5px;<o:p></o:p>border-radius: 5px;<o:p></o:p>}<o:p></o:p><o:p> </o:p>
#fbox-button {<o:p></o:p>float: right;<o:p></o:p>cursor: pointer;<o:p></o:p>position: absolute;<o:p></o:p>right: 0px;<o:p></o:p>top: 0px;<o:p></o:p>}<o:p></o:p><o:p> </o:p>
#fbox-button:before {<o:p></o:p>content: "CLOSE";<o:p></o:p>padding: 5px 8px;<o:p></o:p>background: #828282;<o:p></o:p>color: #eaeaea;<o:p></o:p>font-weight: bold;<o:p></o:p>font-size: 10px;<o:p></o:p>font-family: Tahoma;<o:p></o:p>}<o:p></o:p><o:p> </o:p>
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {<o:p></o:p>color: #aaaaaa;<o:p></o:p>font-size: 9px;<o:p></o:p>text-decoration: none;<o:p></o:p>text-align: center;<o:p></o:p>padding: 5px;<o:p></o:p>}<o:p></o:p></style><o:p></o:p><script type='text/javascript'><o:p></o:p>
//<![CDATA[<o:p></o:p>
jQuery.cookie = function (key, value, options) {<o:p></o:p>
// key and at least value given, set cookie...<o:p></o:p>
if (arguments.length > 1 && String(value) !== "[object Object]") {<o:p></o:p>
options = jQuery.extend({}, options);<o:p></o:p>
if (value === null || value === undefined) {<o:p></o:p>
options.expires = -1;<o:p></o:p>
}<o:p></o:p>
if (typeof options.expires === 'number') {<o:p></o:p>
var days = options.expires, t = options.expires = new Date();<o:p></o:p>
t.setDate(t.getDate() + days);<o:p></o:p>
}<o:p></o:p>
value = String(value);<o:p></o:p>
return (document.cookie = [<o:p></o:p>
encodeURIComponent(key), '=',<o:p></o:p>
options.raw ? value : encodeURIComponent(value),<o:p></o:p>
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE<o:p></o:p>
options.path ? '; path=' + options.path : '',<o:p></o:p>
options.domain ? '; domain=' + options.domain : '',<o:p></o:p>
options.secure ? '; secure' : ''<o:p></o:p>
].join(''));<o:p></o:p>
}<o:p></o:p>
// key and possibly options given, get cookie...<o:p></o:p>
options = value || {};<o:p></o:p>
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;<o:p></o:p>
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;<o:p></o:p>
};<o:p></o:p>
//]]><o:p></o:p>
</script><o:p></o:p><script type='text/javascript'><o:p></o:p>
jQuery(document).ready(function($){<o:p></o:p>
if($.cookie('popup_facebook_box') != 'yes'){<o:p></o:p>
$('#fbox-background').delay(5000).fadeIn('medium');<o:p></o:p>
$('#fbox-button, #fbox-close').click(function(){<o:p></o:p>
$('#fbox-background').stop().fadeOut('medium');<o:p></o:p>
});<o:p></o:p>
}<o:p></o:p>
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });<o:p></o:p>
});<o:p></o:p>
</script><o:p></o:p><div id='fbox-background'><o:p></o:p><div id='fbox-close'><o:p></o:p></div><o:p></o:p><div id='fbox-display'><o:p></o:p><div id='fbox-button'><o:p></o:p></div><o:p></o:p><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?<o:p></o:p>href=https://www.facebook.com/inmyheartjmkayne&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'<o:p></o:p>style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe><o:p></o:p><div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">Helplogger</a></div><o:p></o:p></div><o:p></o:p></div>textarea>[/code] 
  
  
Hope this one helps you!<o:p></o:p><o:p> </o:p> 
God bless!<o:p></o:p> 
JM Kayne |<a href="http://www.iamjmkayne.com/">www.iamjmkayne.com</a></div>

* * *

Hope this one helps because it did helped me! Enjoy blogging!

God bless!

JM Kayne | www.iamjmkayne.com

Search This Blog

THE CREATIVE PASSPORT ✎

About Blogging - Adding Facebook Pop-Up Like Box

Popular Posts

DOs & DONT's on CV Writing