--> Custom Facebook Like Box With Mouse Hover Effect | Experience Lab - Online business creation and development guide for bloggers and startups

Custom Facebook Like Box With Mouse Hover Effect

Customize, personalize Facebook like box in any way you like. This is MBT's another unique release of the custom Like box plugin. We hav...

Custom Facebook Like BoxCustomize, personalize Facebook like box in any way you like. This is MBT's another unique release of the custom Like box plugin. We have changed the overall look of the like box and have added borders and background colour above and below the box along with a link to your like page. The link was not included in our previous version and I hope with this new custom like box your blogs and websites will surely stand out high. So lets try the new look by following the same steps as we did before. I am only sharing here the new CSS code and HTML code. For remaining details kindly read the first release here:

Custom Like Box CSS Code

This is the new CSS code which you should use instead of the one I shared ealier,

/* ------ MBT's Custom Like Box ----- */

    .fan_box a:hover{
      text-decoration: none;
    }


    .fan_box .full_widget{
      height: 200px;
      border: 0 !important;
      background: none !important;
      position: relative;
    }


    .fan_box .connect_top{
      background: none !important;
      padding: 0 !important;
    }


    .fan_box .profileimage, .fan_box .name_block{
      display: none;
    }


    .fan_box .connect_action{
      padding: 0 !important;
    }


    .fan_box .connections{
      padding: 4px !important;
      margin:3px 0px 5px 0px!important;
      border: 0 !important;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      color: #666;
    }


    span.total{
      color: #365899;
      font-weight: bold;
      background:#ECEEF5;
      padding:4px !important;
      margin:3px 0px 5px 0px!important;
      border:1px solid #E1E4ED;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
    }

span.total:hover{
     border:1px solid #6383C1;
    }

    .fan_box .connections .connections_grid {
      padding-top: 10px !important;
    }


    .fan_box .connections_grid .grid_item{
      padding: 0 10px 10px 0 !important;
    }


    .fan_box .connections_grid .grid_item .name{
      font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
      font-weight: normal;
      color: #289728 !important;
      padding-top: 1px !important;
    }


    .fan_box .connect_widget{
    position: absolute;
    bottom: 0;
    left: 0px;
    margin: 0 !important;
    }


    .fan_box .connect_widget .connect_widget_interactive_area {
    margin: 0 !important;
    }


    .fan_box .connect_widget td.connect_widget_vertical_center {
    padding: 0 !important;
    }


    /*---------------MBT's Custom Like Box End--------------*/

 

If you want to change the green fondt colour of the profile names then change this 289728

Custom Like Box HTML and JavaScript Code

Place your like box anywhere you like by using this code,

<style>
    #mbtlikebox{
      color: #365899;
      font: bold 11px arial;
      background:#ECEEF5;
      padding:3px !important;
      margin:5px 0px!important;
      border:1px solid #E1E4ED;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
      width:290px;
    }

#mbtlikebox:hover{
     border:1px solid #6383C1;
    }
</style>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
    <script type="text/javascript">FB.init("");</script>
    <fb:fan profile_id="LIKE PAGE ID" stream="0" connections="10" width="350px" height="200px" header="0" logobar="0"   css="STYLESHEET LINK"></fb:fan>
<div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="LIKE PAGE URL">Visit the Like Page »</a><div style="float:right"><a href='http://www.mybloggertricks.com' style="text-decoration:none; color:#365899;">Widgets »</a></div></div>

Make these changes:

  • Replace LIKE PAGE ID with your Like Page User ID. Read the previous post for help.
  • Replace STYLESHEET LINK with the link of your CSS file that you uploaded as made clear in our previous post.
  • Replace LIKE PAGE URL with your Like Page link

That's it!

Credits

All customization credits goes to MBT blog and DaddyDesigns. Web developers and bloggers are requested to link back to them if they wish to share the codes above with their readers.

Troubleshooting

If you faced any problems or received Facebook rendering errors then you may kindly read this post:

If you needed any help with regard to customizing the colors and look of Like box then feel free to post your query. Would be a pleasure to help you. Peace and blessings.

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Custom Facebook Like Box With Mouse Hover Effect
Custom Facebook Like Box With Mouse Hover Effect
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEu1LR0LJuztFgQfqZeaQk7qNd0NSqQsItt94EdkmxjsRIqHZDCN5OrYQAudq71NYbj0CkBiHZVzpjqdd14XpNmqH1QxbSKlRILxOxzO0SVkY8d8d-yMokCpT54wIFRBnHo0nfZFEstQ/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEu1LR0LJuztFgQfqZeaQk7qNd0NSqQsItt94EdkmxjsRIqHZDCN5OrYQAudq71NYbj0CkBiHZVzpjqdd14XpNmqH1QxbSKlRILxOxzO0SVkY8d8d-yMokCpT54wIFRBnHo0nfZFEstQ/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/07/custom-facebook-like-box-with-mouse.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/07/custom-facebook-like-box-with-mouse.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy