Here I introduced Beautiful Facebook popup like box with different styles. It looks very nice and beautiful. It is very simple to get more likes on your website fan page. Yes.. You don't need to ask your friends to like your facebook fan page. You can done it without asking anyone. It can be made by your visitors alone. It designed with concentrate on that people always like beautiful things. You can choose four kinds of images on the top portion of popup like box. See the preview of all the four images here and choose which one you want for your blog.
- Login to your Blogger account
- Go to dashboard and move on Layout section
- Click on Add a gadget link and select HTML/JavaScript option
- Copy the below code into HTML box
- Click on the Save button.
Copy This Script:
-------fb-awesome-tricks beautiful facebook popup like box ends------------> <style type="text/css"> * html #fb-awesome-tricksstylepopupdiv { position:absolute; overflow:hidden;} #fb-awesome-tricksstylepopupdiv { display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-color:none; margin:0; overflow-y:hidden;} #fb-awesome-tricksstylepopup { background-color: #fff; overflow:none; overflow:hidden;} .fb-awesome-tricksstylepopup { width:333px; overflow:hidden; height:370px; position:fixed; top:45%; left:50%; margin-top:-210px; margin-left:-200px; border: 10px solid #999; padding: 20px;} </style> <!--[if lte IE 6]> <style type="text/css"> /*<![CDATA[*/ html {overflow-x:auto; overflow-y:hidden;} /*]]>*/ </style> <![endif]--> <div id="fb-awesome-tricksstylepopupdiv"> <div id="fb-awesome-tricksstylepopup" class="fb-awesome-tricksstylepopup"> <center> <h3 class="title"> <img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6UVpK2HM-ODQEZDWHhwN3K3FSa2_PyLHTPKTMnwCcPJyoroZjdrCk-txyKTfyRk3tL2YrhxthCAofnG8AZoHA39Vd6j1MY2bPimLAg45Z9K-HkL6aHKnjfo2NQHvAFU_TFbwvNjTfnTx/h117/fb0.png" /> </h3> </center> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F
AutoLiker.Without.Access.Token& width=300&colorscheme=light& show_faces=true& border_color=%23ffffff& stream=false&header=false& height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:216px;" allowtransparency="true"> </iframe> </center> <div style=" float:left; margin-left:0px; font-size:9px; cursor:pointer;" > <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('fb-awesome-tricksstylepopupdiv') .style.display='none'"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFIvevAZCiOfJwKErfY2I-gcBPKuc408ZBCf7jOZ6-rraO0CAoV3fL_GvlT5Y6QXXkozKdYWslb31PbPxwY4bCsBGt2Hhi2dnko1v3ZtyQXufe6B9xFkngV9WTJDAK4MNlxBnRKO5xOFfS/h120/exit.png"/> </a> </div> </div> </div> <!-------fb-awesome-tricks beautiful facebook popup like box ends------------>
You Must Do It
- Replace Trickstoo (red color) with fanpage name of yourblog fanpage in facebook.
- Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6UVpK2HM-ODQEZDWHhwN3K3FSa2_PyLHTPKTMnwCcPJyoroZjdrCk-txyKTfyRk3tL2YrhxthCAofnG8AZoHA39Vd6j1MY2bPimLAg45Z9K-HkL6aHKnjfo2NQHvAFU_TFbwvNjTfnTx/h117/fb0.png (pink color) with any of the following url to display different styles of facebook image on the top of the facebook popup like box
.____________________________________________________________________
1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpdryaWt2LPFQAJ0y-wHSSVBwLBgW5Zc0CaQXSotwdOPDJfuqkY-rYSsJ3PWoMwLLY2QL8XX1laZXUYopqUzxrV6gEX8Y9JBX41xe8JwrL24xeSZzr3t-bVzRG9P6pjvAvbHRK8mVyWXN2/h109/fb1.jpg
2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCevZW8Q_nIbkyzP0SjHDSaF4eDAl5GimhgDWZuAn_rWH71X7kbl9QYX0NPziNOIqlJgqAG7ZZcEGHjenT3NDlheDoSyQj-b70KMYdtOQ2RBvnQGw1Penjfb9OxvR3kGXw5i1adilrAtlG/h120/fb3.png
3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiakxWr0siSK0lttMp6-I53MKbmZnwaDJZFi0E1MEHLwlo5T0LD8DRQhDH-xixijIQ2iMwwHhzB5adF3qmnkGn4D_D_hZGmTUvNMkexiwRfzWo5jb0y1NgfQLGUAB4-gDM-PpbVUHfSHRzk/h120/fb4.jpg