A New Way To Learn Is By Clicking Here! | Lattest Email Subscription Box!

adsense

This Ad Space is empty

Monday, 16 June 2014

Widgets

4 Different Stylish Facebook Like Box For All Blogs

Posted by Unknown , 09:08 Be the first to comment!
Facebook like box is very essential widget for all blogs. Facebook pages help to generate good traffic to your blog. If your facebook page has many fans, your blog will receive good traffic from facebook. Usually, all the blogs having same style of Facebook like box. That is why I planned to make facebook like box widget with different styles.

Here I have added four different style facebook like box for all the blogs including Blogger and Wordpress. You can use this gadget to any of your blog even if it is hosted on any platform. You can use this Stylish facebook like box widget at anywhere on your blog as per your need. You don't want to make any major changes in coding. Just copy the below code and change the Facebook fanpage name then add it to your blog.

Steps to Add this Facebook Like Box to Blogger Blog


Step 1: Login to your Blogger Account

Step 2: Go to dashboard and move on Layout section

Step 3: Click on Add a gadget link and select HTML/JavaScript option

Step 4: Copy the below code and paste it to HTML box

Style 1:



<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCyG14Dcy-tl0E35lgLTDqk5rCrSxNJUtdKDfBA2eUtywxHqX33NRub8aOLrAIhK3J8JKXI2_cAy0UwishND3N1jmHWpsEpLeNE_lolW6i-FCvRGb6qXN-rwQEu2GXjuDGcNOsEHCl12DO/w140-h137-p/style1.png');
overflow:hidden;
border-radius: 110px;
.height:250px;
width: 238px;
border-radius: 0px 13px 0px 0px;
overflow: hidden;">
<div style="height: 250px;
overflow: hidden;">
<a href="http://Yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Blogging Tricks">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Blogging Tricks" border="0" style="position: fixed;
bottom: 10%;
right: 0%;
top: 0px;" />
</a><a href="http://Yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Latest Tips For Bloggers" border="0" style="position: fixed;
bottom: 10%;
right: 0%;" />
</a><a href="http://Yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Blogging Tricks">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Blogging Tricks" border="0" style="position: fixed;
bottom: 10%; left: 0%;" /></a>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FYeahgotit&amp;width=250&
amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false
&amp;show_border=false" scrolling="no" frameborder="0" style="border:none;
overflow:hidden;width:250px;
height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Note: Replace Yeahgotit  in Line 36 with your facebook fanpage name

Finally, Click on Save Button.


Style 2 :


<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3fcRI9PZ7keZrsdh9Q8Yp6bAxe0y7uhxYOHGzaVa32VeV0KBRka8TT1BNIH7D-B6Gu_5Dg7i_C5QjUZe1JnO2BAumcizv-Xyv65mmQsJUi_zJnOm98YzLTumlhppk8jjSrVKeg2IDGPBs/h120/style+2.png');
overflow:hidden;
border-radius: 110px;
.height:250px;
width: 238px;
border-radius: 0px 13px 0px 0px;
overflow: hidden;">
<div style="height: 250px;
overflow: hidden;">
<a href="http://yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Blogging Tricks">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Blogging Tricks" border="0" style="position: fixed;
bottom: 10%;
right: 0%;
top: 0px;" />
</a><a href="http://yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Latest Tips For Bloggers" border="0" style="position: fixed;
bottom: 10%;
right: 0%;" />
</a><a href="http://Yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Blogging Tricks">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Blogging Tricks" border="0" style="position: fixed;
bottom: 10%; left: 0%;" /></a>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FYeahgotit&amp;width=250
&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false
&amp;show_border=false" scrolling="no" frameborder="0" style="border:none;
overflow:hidden;width:250px;
height:258px;" allowtransparency="true"></iframe>
</div>
</div>

Note: Replace Yeahgotit  in Line 36 with your facebook fanpage name

Finally, Click on Save Button.

Style 3:


<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzeosUeIJ7OD4XbQek0FPkRwloopbeML-21DlrJKzGXlsp-cEIydvZ1WceWa8zzoHO9r65C7maiTTZeGjd5948H-ZEAUjtgthuf6Tzfqf2QW9iRC004caU_H09qtwygPzrgfxO1dzsPNXK/h120/style+3.png');
overflow:hidden;
border-radius: 110px;
.height:250px;
width: 238px;
border-radius: 0px 13px 0px 0px;
overflow: hidden;">
<div style="height: 250px;
overflow: hidden;">
<a href="http://yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Blogging Tricks">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Blogging Tricks" border="0" style="position: fixed;
bottom: 10%;
right: 0%;
top: 0px;" />
</a><a href="http://yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Latest Tips For Bloggers" border="0" style="position: fixed;
bottom: 10%;
right: 0%;" />
</a><a href="http://yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Blogging Tricks">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Blogging Tricks" border="0" style="position: fixed;
bottom: 10%; left: 0%;" /></a>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fyeahgotit&amp;width=250
&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false
&amp;show_border=false" scrolling="no" frameborder="0" style="border:none;
overflow:hidden;width:250px;
height:258px;" allowtransparency="true"></iframe>
</div>
</div>

Note: Replace Yeahgotit  in Line 36 with your facebook fanpage name

Finally, Click on Save Button.

Style 4:


<div style="background: url('https://lh3.googleusercontent.com/-3MvLRR8RxK0/UtjCxC6W9NI/ 
AAAAAAAACsE/v2ymWQOYgc4/h120/style+4.png');
overflow:hidden;
border-radius: 110px;
.height:250px;
width: 238px;
border-radius: 0px 13px 0px 0px;
overflow: hidden;">
<div style="height: 250px;
overflow: hidden;">
<a href="http://yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Blogging Tricks">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Blogging Tricks" border="0" style="position: fixed;
bottom: 10%;
right: 0%;
top: 0px;" />
</a><a href="http://yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Latest Tips For Bloggers" border="0" style="position: fixed;
bottom: 10%;
right: 0%;" />
</a><a href="http://yeahgotit.blogspot.com/" rel="dofollow" target="_blank" title="Blogging Tricks">
<img src="https://lh4.googleusercontent.com/-7y5EUoCfk_U/Uti6b5zcrTI/
AAAAAAAACrg/eCho4wCpTf4/h120/blank.gif" alt="Blogging Tricks" border="0" style="position: fixed;
bottom: 10%; left: 0%;" /></a>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fyeahgotit&amp;width=250
&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false
&amp;show_border=false" scrolling="no" frameborder="0" style="border:none;
overflow:hidden;width:250px;
height:258px;" allowtransparency="true"></iframe>
</div>
</div>


If you like this Kindly share it. Which style you have selected for your blog? Share your experience with us by leaving a comment below

SHARE THIS POST   

  • Facebook
  • Twitter
  • Myspace
  • Google Buzz
  • Reddit
  • Stumnleupon
  • Delicious
  • Digg
  • Technorati
Author:Muhammad Shoaib
Mohammad Shoaib is a Passionate Blogger,Have Very Creative Ideas About Blogging. Read More →
Labels:

0 comments:

Subscribe to: Post Comments (Atom)