In Previous Post I tell you about How Can Add Twitter follow Button on blog Today I going to tell How Can Add Facebook Popup Like Box On Blog It is necessary to add Facebook Popup like Box in your blog because we can get more like from this and our Blog & Facebook Page Gets more Readers and Followers thus we can get many traffic from Facebook I.e. we add Facebook Popup like Box when a Visitor visit our blog the popup like Box appear first suppose that visitor click like button we can get a visitor and we can connect that visitor Today every Professional Blogger use this to Create close relationship and to increase Visitors also Follow this simple Method I listed Below
Add
It To Blogger
You can Install
This Widget Easily in your Blog By Following These Simple Steps....
Before you edit any template it's better to keep a Backup..So First Backup your Template.
Before you edit any template it's better to keep a Backup..So First Backup your Template.
1. Go to your
Blogger Dashboard>>Template>>Edit Html
2. Find following
code in your template.
</head>
|
3. And paste the
following code before/above </head>
<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*7; 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> |
·
*7 Setting this value will effect cookie
refreshment. I have set the like box to appear once to the visitor and like box
will appear again after 1 week. If you want to display like box to your
visitors after a 1 day then set 7 to 1. if you set the value to 1 then it can
annoying your regular readers.
4. Now Search for </b:skin>.
Click the black arrow to expand the code.
5. And paste
following css code before above </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/AVvXsEjlbfXsImNTiFnCWgdyGtkYdt4tHwVIPy9IZob4B-e6DkhdI3YwjyOfg_YWfXkAggObo15ZHRN4_DLbmFkVY6X6jo2JyoTlzTZ1qfOg_UeAKUUv7MBocSCgWMhCdSgM2EIYkGBO6nI5w7Hh/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/AVvXsEhsVeXyWyhEut1bMaQDFCMaODnkm7nf8PhdBzmMxirdGzGG-7HN5su3aZlroR7G3W6hFSIs6QNsu4xzwv79ecSUu_Ig_SB6l-nJRzjb9tVME5ElxE7qMZ7ZwPs2pTmV0RvhlpSJF6S2-WN6/s130/controls.png)
no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; }
#cboxClose:hover { background-position: bottom center; }
|
6. Save your
template and you are done second last step! Visit your blog to see it working
just perfectly.
7. Now finally
find following code.
</body>
|
8. And paste the
following code before closing </body> tag.
<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%2FThePowerHouseBlog&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> |
·
Replace ThePowerHouseBlogwith your Facebook fan page
username.
save your template
and you are all done. .!!
Visit your blogs
and see it popping up just fine! Remember that the popup will show only once.
To see it again you will first need to delete your browser cookie and then
refresh the page to see it appearing again.
I just hope you
would find this tutorial easy and yet exciting. Please let me know if you need
any help. I just hope you can make your strong facebook fan growth. Wish you
success and peace buddies. Stay updated by subscribing our email news feed or
like our Facebook page.if you want some
suggestion comment it right now, Stay tuned by subscribing our email feed or
follow me on social networks. Thanks for reading our post. happy blogginG........!!!!!!
Very Thanks wait for more Awesome updates and nice posts Thank you once again
ReplyDelete