How add Professional Facebook Popup Like Box to Blogger?

Hello friends,I hope all of you fine and leading a happy life with friends and family. In.In previous Post i discussed about Some seo tips for blogger especially newbies.Now i present you beautiful Facebook popup lies box.Everyone know that Facebook is most used social media around globe and it generates larges number of visitors.Some popup widgets creates problems for visitors but this widget is wonderful creates no problem because it has close button everyone can close it easily.Main thing is that it shows on cookies.If we set day 1, If visitor visit the site and it experience this widget.If visitor visit on same day Popup box don't show due to cookies,It shows after one day.I hope you understand it well.I am new entrepreneur so ignore it.Below I describe the steps to which we easily add to Blogger Blog/website.

Live Demo

Add Popup Twitter Follower Box for Blogger

Steps to add it

Login Blogger and Go to Blogger Dashboard
Select Template >> Edit Template
Find the Following code

</head>

When you find above code,paste below code just above it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var setDays = 1000*60*60*24*5; var expires = new Date((new Date()).valueOf() + setDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"400px", height:"430px", inline:true, href:"#facebook-popup"}); }});</script>

Note: *5 setting this value refreshment of cookies.I have set the like box appear after 5 days once visitor visit it and then again after 5 days it shows it.You can change it from 1 to 7,If you select 1 then it annoy the visitors.

Again search the following code and it similar like this (show in picture.)

</b:skin>

Paste the following code just before above this tag </b:skin>

/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVYunPnJbUHklNK3fLiuQgTd7ih7ZzJAVoL9aMeVQxMVCTDwCzEBfGSRQ0GmKnxxy7yZupf-cJPCWZ9-cdgRDqP0pCdJGLj5DlJEbIOOTpMkjybM7gcqzMgLDNGjPJ6U_oWKFqjj_hVuLA/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4x6EituRANoDJOUh2F-v2oXg2nSlUn96CWyCJ_fylP-zUVjcP2sSHfise4q1Y4rinoZsvzY35At_8Re5xx0bKyVnEHwj-RnKZNUJKDT4FuQq4rRVKz0crImENvljXujeEeqQNBWVgUguP/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }

Save your Template and It is 2nd last step

Now we move on last steps

Now find below code

</body>

Paste the following code just before and above this code </body>

<div style='display:none'> <div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'> <div style='text-align:center;padding-top:15px'> <h3 style='font-family: 'Source Sans Pro', Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmybloggingacademy&width=342&height=300&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false&appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/> </div> </div> </div>

Save Template you done your Job Perfectly.

Note: Bold and Red highlighted area replace with your Facebook Fan Page address.

From Writer's Desk

I hope you understand all these steps easily.I can explain simply as I can.If you lie this widget share it with your friends and Happy Blogging. In case of any problem contact me or comment below