Creating Pop Up Like Box in Blogspot

After posting about Facebook Pop Up like box for wordpress some of my readers ask if this feature can also be applied on blogspot so I decided to create another post on creating pop like box for blogger blogs.

Here’s how to do it.

1. Login to Blogger account
2. Go to template > Edit HTML
3. Click Proceed
4. Copy the code below and paste it before the </head> tag.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> <script src="https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js"></script> <link rel="stylesheet" href="https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dfbpopup.css" type="text/css" /> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=flase') == -1) { var fifteenDays = 1000*60*60*24*30; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"400px", inline:true, href:"#mdfb"}); } }); </script>


      5. Save
      6. Now, Go to Layout
      7. Add a Gadget
      8. Choose HTML/Javascipt
      9. Paste the code below



<div style='display:none'> <div id='mdfb' style='padding:10px; background:#fff;'> <h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" ></p></center></h3> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2reginaldsonlinerealm&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><p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.reginaldsonlinerealm.blogspot.com">Reginald's Online Realm</a></p>
</div> </div>

1         10. Save and you’re done.

*don’t forget to change reginaldsonlinerealm by your facebook username
https://www.facebook.com/reginaldsonlinerealm

2 comments:

  1. want make money online for free ,you can visit my site http://ectheme.blogspot.com/
    or contact me with howaves@gmail.com i will teach you step by step

    ReplyDelete
  2. Pretty portion of content. I just stumbled upon your website and in accession capital to say that I get actually enjoyed account your blog posts.Anyway I’ll be subscribing to your feeds or even I success you get entry to persistently fast.
    website design

    ReplyDelete

Comment