Header Ads

Klook.com

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

No comments

Comment

Powered by Blogger.