Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Wednesday, June 20, 2012

CSS-LightBox POP-UP Facebook Like Box Widget For Blog & Website

This Article Was Live On: Wednesday, June 20, 2012 And Till Now Have68 comments.
 CSS-LightBox POP-UP Facebook Like Box Widget For Blog & Website

As you know that many of the blogger has also have this but here the golden thing is that this is made up of World First Unblockable CSS Lightbox POPUP Works With IE+7 And Other Browsers Too. This is that main thing that make it different from others.
Get the more fans to your fanpage blogger by adding a popup facebook like box to your blogspot.By adding this customized widget may know the visitors to know the number of people like your website and join your site directly. Facebook likebox is widely used social plugin from Facebook developers. The importance of the Facebook Likebox is tremendous in terms of the number of likes it brings. About 90+ % of the fans that you can get here from the Like box installed on the blog.
Today we'll be sharing the latest Facebook Lightbox style popup widget that you can add to your blogger blog (blogspot). There are only one simple step to add is quickly.To get this widget follow below procedure:-
First See The Demo In The Screen Shoot.
Features:
1.) Un-Blockable POP-UP By All Browsers.
2.) POP-UP With LightBox Effect.
3.) Close Button Also Included.
4.) Quick, Quick, Quick To Load And Easy To Install.
5.) Simple And Stylish Design.
6.) No J-Query Only CSS.
7.) Works With IE+7 And Others Too..


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.


How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done. 



<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<style type="text/css">

/***********************************************
* CSS POP-UP With Light Box Effect- © EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
* Visit http://www.exeideas.com/ for full source code.
***********************************************/
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://lh3.googleusercontent.com/-rUv4L_9nz-8/T9sfSSJaZNI/AAAAAAAACf0/ETEgFKt-rR4/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;z-index:999999;}
#exestylepopup {background-color: #fff; overflow:none;z-index:999999;}
.exestylepopup {width:400px; height:420px; position:fixed; top:45%; left:50%; margin-top:-210px; margin-left:-200px; border: 10px solid #999; padding: 20px;z-index:999999;}
.exe-title {background:#000;color: #fff;font-size: 20px !important;font-weight:bold;margin:5px 0;border:20px solid #ddd;padding:10px;line-height:25px; font-family:arial !important;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center><h3 class="exe-title">Receive All Updates Via Facebook. Just Click the Like Button Below...</h3></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FEXEIdeas2010&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<br />
<center style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.exeideas.com">EXEIdeas</a></center>
<center style=" float:left; margin-left:35px; font-size:9px;cursor:pointer;" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">Skip To Continue</a></center>
</div>
</div>
<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->



Customization:
1.) Change Red Text According To Your Desire.
2.) Change Blue Text With Your Facebook FanPage URL.
3.) Save And Done.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



68 comments :

  1. no close button ?

    ReplyDelete
    Replies
    1. Hava A Look On "Skip To Continue" Text On The Bottom Left Of The POPUP...

      Delete
  2. Hey man!
    Is there a way in order to this box appears just one time until the same computer cleans the cookies?
    Box appears every time, it is boring.

    Tks for helping!

    ReplyDelete
    Replies
    1. This Is A Simple POPUP, Wait For The Next UpDate In Which I Will Make It One Time...

      Delete
  3. how can i stop this script to load every time , when ever i refresh the web page

    ReplyDelete
    Replies
    1. This Is CSS Based, User JQuery Based To Full-fill You Desire.

      Delete
    2. Hi,

      Thanks for the great code!

      May I know how do I use it for my prestashop store?

      Thanks a million

      Delete
    3. You Are Welcome...
      Can I See The URL...???

      Delete
    4. my site is www.belcoutureco.com

      How do I apply it on my site, where do I input the codes into?

      The website can only run on css and not html.

      Thanks a million

      Delete
    5. I Got Exclaimed That Your Site Can't Run HTMl, I Have Ever Seen It First...
      HTML Is The Basic Language...
      Your Site Contains HTML,CSS,JS Languages...

      Add The Above Code Anywhere In The <body Section In Your Every Page...

      Delete
    6. Hi, I tried but can't get it to work in my website(www.belcoutureco.com)

      but it can work in my blogger page(belcoutureco.blogspot.sg)

      I really need some advise from you to make it work in my website.

      my codes are all in .css file so I don't know where to include these codes. I can't body, /body like in html.


      Thanks a million.

      Delete
    7. Go To Your Template...
      Scroll To The End...
      You Will See These Code...

      < /body>
      < /html>

      Just Paste The Given Code Above These Codes...

      Delete
  4. hai bro...
    its working fine but it displays every time when we refresh the page.
    please explain how to display it once when we open the page.

    thanks for coding

    ReplyDelete
    Replies
    1. This Is A Simple POP-Up, For One Time You Have To Use J-Query Based POP Ups...

      Delete
  5. really nice site , hi admin first u have really nice and cool posts if u wand some get from mine bro because sharing is caring , my site is http://www.fobbleup.blogspot.com, we site runners most be more curious in sharing and it will make our traffic more high too bro, so have a review on my site .peace and blessings . :)

    ReplyDelete
    Replies
    1. You Have A Nice Blog, Keep It Up...
      Thanks A Lot...

      Delete
  6. Mate, i tried the j query pop and its not working, anyway you can make this css to appear only on first visits?

    ReplyDelete
    Replies
    1. Can I See The URL Where It's Not Working...???

      Delete
  7. The popup aprecer face time we do a refresh. How to stop appearing only once on site. Thank you.

    ReplyDelete
    Replies
    1. This Is A CSS Version, For One Time Use JavaScript Version.

      Delete
    2. See The Top Article In The "OUR HOTTEST ARTOCLES" Section...

      Delete
  8. Hi there,
    First of all, Thanks for sharing this useful tips.
    I'm trying whole night with the code to add Pop up facebook like window in my website hoping to get more like.

    It does pop up the window but instead link it to my facebook (Wedding Cottage) and allow viewer to click like.. It turns up to be counting down clock for "Congratulations! You have 2 min to claim your prize" or skin product advertisement.


    I can be reach at 012-6900 439 or email: theweddingcottage@hotmail.com

    Hope to hear from you soon!

    ReplyDelete
  9. how to remove tob black box........because not looking nice

    ReplyDelete
    Replies
    1. Just Remove (class="exe-title")From The Code...

      Delete
  10. pop up box is always being hidden behind the image slider. sort out this problem please. http://be4bloggers.blogspot.com/

    ReplyDelete
  11. and how to add appearing time after a specific time like a day, a week or a month?

    ReplyDelete
  12. how to add subscribe via email option in this widget??

    ReplyDelete
    Replies
    1. Remove The Code Form iframe to iframe And Add The Subscribe E-Mail Code Instead Of This, If Don't Know How, Contact Us At Contact Page....

      Delete
  13. its working but
    coming this box any time
    how to make 1 time coming...?

    ReplyDelete
    Replies
    1. Use JQuery Version To Make It One Time POPUP...

      Delete
  14. salam walekum hassan i am getting this error..can u tell me what to do?


    Could not retrieve the specified page. Please verify correct href was passed in.

    ReplyDelete
    Replies
    1. Just Send An E-Mail With Your Facebook FanPage URL To admin@exeideas.tk To Get The Working Widget In Your InBox...

      Delete
  15. very nice tutorial worked for me thanks keep up the good work

    ReplyDelete
  16. Complicated, the cod works here, but not like a POP UP and i do not know why.

    I'm using on my website...
    www.upgrade-store.com

    i think he use CSS plataform

    ReplyDelete
    Replies
    1. You Are Not Using This Code On Your Site, First Add It And Reply...

      Delete
  17. I added this to my page, the css version and it is ok, but I want this pop up to show up only on opening the web page, not every time I start the home page. I tried that with your jquery version but it replaces my other script that I use on my site and I cannot use it. How can I do this? Thank you very much.

    ReplyDelete
    Replies
    1. For One Time, You Have To Use JQuery Version But It Will Intersect With Other JQuieres That Are In Your Blog, Now It's Upto You What You Want...

      Delete
  18. I used your exact code and it works fine, but of course it points to your facebook page. When I change it to my facebook username "Barreldem" the box is blank under "Receive All Updates Via Facebook. Just Click the Like Button Below...". I'm not sure why. My complete facebook page is http://www.facebook.com/Barreldem

    thanks,
    Noble

    ReplyDelete
    Replies
    1. It's Working Fine, Check Your Facebook Message To Get Working Code...

      Delete
  19. Awesome pop up ..... thank you for your hard work....... now my blog look even nicer ( I HOPE ) come and visit my blog.... wasalam

    ReplyDelete
    Replies
    1. You Are Welcome Here, Be With Us To Get More...

      Delete
  20. really nice post hassan :)
    As i am jQuery code is not working for me, i am using this CSS version.and as u said, we cannot restrict from loading this pop-up on every refresh....so i would like to know how to restrict this pop-up for only homepage? if i dont want to appear this on every post then??

    ReplyDelete
    Replies
    1. Thanks For Liking Our Widget, Yes We Can't Resitrict It To OneTime POPUP But We Can Move It Only On Hame Page Too, Just Send Us An E-Mail So We Will Update This Code For You...

      Delete
  21. hey man, i cant seem to use the jquery version on my blog, it doesnt work. heres my blog http://epicfeedtime.blogspot.com/. maybe its because im using an old template. is it possible to add a one time show only feature on css?

    ReplyDelete
    Replies
    1. There Is No Extra JQuery In Your Blog, Just Delete Your HTML1 Widget From Your Blog Layout And Open Your Template And Find "1.6.1/jquery.min.js" Then Delete The Whole Line From There Also...

      Delete
  22. Thank you. Works on my blog. www.apsotech.blogspot.in

    ReplyDelete
    Replies
    1. You Are Welcome To Be Here With Us, Be With Us To Get More...

      Delete
  23. Thanks... awseome widget... I like this very much...

    ReplyDelete
    Replies
    1. Welcome Here And Thanks For Liking This...

      Delete
  24. First off: thank you for your awesome site! :-) I need your help; I can't make this code work on my website: www.elizabethrinne.com and here's my Facebook page: https://www.facebook.com/pages/Fashion-Poetry-by-Elizabeth-Rinne/118732258324061 can you help me?

    ReplyDelete
    Replies
    1. Please Send Us Your Data Via Contact Form, We Will Create The Code For You...

      Delete
    2. Thousands of thanks! :-) Hmmm... the contact form doesn't work (I'm not able to write there) so can I send my blog's whole html via e-mail?

      Delete
    3. It's Working Fine, If You Can't Use It Then E-Mail Us At admin@exeideas.tk

      Delete
  25. I Have Only Found In Your Site Working In My Blog Thans Man Great Widget

    ReplyDelete
    Replies
    1. Welcome Here And Thanks For Giving Us A Try...

      Delete
  26. i have adf.ly entri script and link converter,
    when i click skip, appeart this: adf.ly Sorry, but the requested page was not found!

    the link under the skip button is

    ReplyDelete
    Replies
    1. Leave Your Blog URL And After Removing Our Widget, Its Still Showing The Error?

      Delete
    2. please take a look
      http://maniafilms.blogspot.com/

      Delete
    3. Your Link Contain Virus So I Cant View That...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.