Android Century
  • Home
  • Android Zone
    • Android Apps
    • Android Games
    • Apps APk Files
    • Games Apk Files
    • Apps Hack Tricks
  • Reviews
  • Fantasy Zone
    • Entertainment
    • Quotes and Status
    • Life Style
    • Home Made Tips
    • Hair Care
    • Skin Care
    • Fantasy Tips
  • Tricks
    • Free Recharge
    • Free Internet
    • shopping Cashback
    • Recharge Cashback
  • Tech
  • Mobiles
  • Gadgets
  • News
  • How To's
  • Software
Breaking
Loading...

Featured post

How to Take Great Photos With Apple's iPhone X

Recent Posts

Labels

  • Android Apk Files
  • Android Apps
  • Android Games
  • Apps Apk Files
  • Entertainment
  • Fantasy Tips
  • Gadgets
  • Hair Care
  • HomeMade Tips
  • How To's
  • News
  • Quotes
  • Quotes & Status
  • Recharge Cashback
  • Recharge Promo Codes
  • Shopping Cashback
  • Technology
  • skin care
Home / How To's / How to add Facebook Like Box with Hover Effect for Blogger

How to add Facebook Like Box with Hover Effect for Blogger

Latest Govt. Jobs 23:09:00 How To's Edit

Facebook Like Box with jQuery Hover Effect

Adding Static Facebook Pop Out Like Box Widget To Blogger layout...Now let's start adding it. Just follow below producer.


  1. Login to your Blogger Account.
  2. Click Layout > Add A Gadget.
  3. Select HTML/Javascript
  4. Then Paste The Following Code In content Box from one of code given below.

(Style I) Static Facebook Pop Out Like Box with Hover Effect

 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
img, a { border: 0; }
#on { visibility: visible; }
#off { visibility: hidden; }
#facebook_div { width: 196px;
height: 340px;
overflow: hidden; }
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
right: -200px; }
#facebook_right img {
position: absolute;
top: -2px;
left: -35px; }
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left: -2px;
top: -3px; }
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
left: -200px; }
#facebook_left img {
position: absolute;
top: -2px;
right: -35px; }
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px; }
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#facebook_right").hover(function () {
jQuery(this)
.stop(true, false)
.animate({ right: 0 }, 500); }, function () {
jQuery("#facebook_right")
.stop(true, false) .animate({ right: -200 }, 500); });
});
</script> <br /> <div id="on"> <a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="Indian Education Blog"><img src="http://img1.blogblog.com/img/blank.gif" alt="Indian Education Blog" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><div id="facebook_right" style="top: 10%;">
<div id="facebook_div">
<img alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh38ZLicG4047QrsBgTYcQ4G3hTDHYkBop_k68zZfuk7o0YOnv7m4lmY8AcjLoYZGq5xEkhyK4XvXNmlLf5qKO2J_8IAyITKp-vv9VKyggh8bRYvksITF22OwTKip1IQEAjdn4_24ol7ZlS/s1600/NBTfacebook_right.png" />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages/Goandroidauthority/281417998619583&amp;
width=200&amp;
height=346&amp;
colorscheme=light&amp;
show_faces=true&amp;
border_color&amp;
stream=false&amp;
header=false" style="border: none;
height: 346px;
overflow: hidden;
width: 200px;">
</iframe>
</div>
</div></div>

Before adding these code please replace pages/Goandroidauthority/281417998619583 with your Facebook fan page URL.

(Style II) Facebook Stylish Popup Widget with Lightbox Effect

 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Ar_NFeca9uZZ1HCUAi3miRoJKWQvEpU8P9gY1dgrdX2CGbL09rhpj_t0Hz5H6p3acqqV8ZANM9KXrRq4LjnvoCdeNjZlO5Rzj8ovkOWmWKSvPleRqWqVIXK8fRH4jI3XtQ7fF4awrrE6/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style> <script type="text/javascript"> //<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
//]]> </script><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <script type="text/javascript"> jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/pages/Goandroidauthority/281417998619583&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
</center>
</div>
</div>

Before adding these code please replace pages/Goandroidauthority/281417998619583 with your Facebook fan page URL.

Customization: These widget only shows up the first time the user visits your page. If you would like the Facebook box to popup everytime the page loads, then remove this line of code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

If you are facing any error during adding above widgets into your blog or website then please leave your comment below, we will catch you back as soon as possible.
Share on Facebook Share on Twitter Share on Google Plus

RELATED POSTS


How to Get Free Internet on Idea An...

How to Use DroidVPN App For Free In...

How to HACK Google Play Music App
How to add Facebook Like Box with Hover Effect for Blogger How to add Facebook Like Box with Hover Effect for Blogger Reviewed by Latest Govt. Jobs on 23:09:00 Rating: 5

0 comments:

Post a Comment

Newer Post Older Post Home
Subscribe to: Post Comments ( Atom )

Search This Blog

TEST BOOK FOR GOVT ENTRANCE TEST

TEST BOOK FOR GOVT ENTRANCE TEST
Find All Latest book for preparation of SSC,RAILWAYBANK PO,RBI,BANK CLERK,GATE ME,GATE CE are available here in less prices, to check out the books click here

Translate

  • Popular Post
  • Random posts
  • Category

Popular Posts

  • Teen Patti Offer 2018: Refer and Earn Flipkart Vouchers Free
    Teen Patti Offer 2018: Refer and Earn Flipkart Vouchers Free
    Teen Patti Refer & Earn Offer:  Hey Guys! Today I make an article about Teen Patti Referral ...
  • KingRoot 4.8.1 (136) APK Latest Version Download
    Download KingRoot Latest Version 4.8.1 In Tools by Developer KingRoot Studio ( 4.x / 5  average ...
  • 11 things you should understand approximately iOS 11
    Apple introduced the following version of its running system for the iPhone and iPad, iOS eleven ...
  • How to Upload Your Music Library to Google Play Music
    Google Play Music offers an unlimited music streaming subscription paired with YouTube Red ...
  • How to Disable Your Mac’s Touchpad When Another Mouse Is Connected
    Laptop trackpads can be annoying. Your palm hits them while you’re typing, moving your cursor ...
  • How to Gain Root Access of An Android Device via KingoRoot Software
    What Does Root Access Mean? Gaining root access of Android is the process of modifying the ...

Random Posts

  • iPhone X Review
    iPhone X Review
    05.02.2018 - 0 Comments
    Key Features Review Price: £999 5.8-inch OLED HDR display A11 Bionic CPU 64GB or 256GB storage Face…
  • Paradigm PW Amp review: This DTS Play-Fi amplifier will bring out the best from your speakers
    Paradigm PW Amp review: This DTS Play-Fi amplifier will bring out the best from your speakers
    11.02.2017 - 0 Comments
    Canada-based Paradigm has a long, respected pedigree in the high-end audio world, where it has marketed…
  • iPhone 8 getting wireless charging? Here's the best evidence yet
    iPhone 8 getting wireless charging? Here's the best evidence yet
    13.02.2017 - 0 Comments
    If the iPhone 8 's rumored OLED screen and edge-to-edge display haven't left you chomping…
  • Top 40 best PC games of 20017
    Top 40 best PC games of 20017
    09.03.2017 - 0 Comments
    Best PC games With the gap in graphical capabilities widening every day, there's never been…
  • 08.03.2016 - 0 Comments
    setting Things Up1Go slow. Seduction is all about timing. Part of what makes a person want another…

Labels

Android Apk Files Android Apps Android Games Apps Apk Files Apps Hack Tricks Entertainment Free Internet Freecharge Gadgets Games Apk Files How To's Laptops Guide Mobiles Reviews Technology Viral's android zone free recharge

Entertainment

Tricks

Popular Posts

  • Teen Patti Offer 2018: Refer and Earn Flipkart Vouchers Free
    Teen Patti Offer 2018: Refer and Earn Flipkart Vouchers Free
    Teen Patti Refer & ...
  • Researchers trick 'CEO' email scammer into giving up identity
    Businesses ...
  • How to Gain Root Access of An Android Device via KingoRoot Software
    What Does Root ...
  • Tinyowl Freecharge Offer – Get 15% Cashback + extra 25% cashback using Freecharge [Ultimatez Tricks]
    Tinyowl Freecharge ...
  • How to Disable Your Mac’s Touchpad When Another Mouse Is Connected
    Laptop ...
  • Infocus Vision 3 review
    What happens when ...
  • EVGA redesigns its graphics cards following overheating concerns
    Following a ...

Random Posts

  • BOOM! Latest Huawei P10 and P10 Plus WILL Land Inside Q1 of  2017
    BOOM! Latest Huawei P10 and P10 Plus WILL Land Inside Q1 of 2017
    26.02.2017 - 0 Comments
    Huawei is prepping both P10 & P10 Plus flagships for a launch in the Spring Huawei's 2016…
  • How to create and restore an image backup in Windows 10
    How to create and restore an image backup in Windows 10
    11.02.2017 - 0 Comments
    How do you recover from a dead internal hard drive or SSD? Or if Windows becomes so messed up it's…
  • INFOCUS TURBO 5 PLUS Smartphone
    INFOCUS TURBO 5 PLUS Smartphone
    25.01.2018 - 0 Comments
    The InFocus Turbo 5 Plus mobile features a 5.5" (13.97 cm) display with a screen resolution of HD (720 x…
  • New Intel vs AMD: which chipmaker does processors better?
    New Intel vs AMD: which chipmaker does processors better?
    04.03.2017 - 0 Comments
    Intel vs AMD Building - or simply buying - a PC isn't an easy task. With a seemingly endless…
  • How to use page zoom settings in Chrome
    How to use page zoom settings in Chrome
    29.03.2017 - 0 Comments
    You can easily adjust the way your screen looks with Chrome. Chrome makes surfing the web easier in a…

Most Popular

  • Teen Patti Offer 2018: Refer and Earn Flipkart Vouchers Free
    Teen Patti Offer 2018: Refer and Earn Flipkart Vouchers Free
    Teen Patti Refer & ...
  • SAMSUNG GALAXY J7 (2016) REVIEWS
    SAMSUNG GALAXY J7 (2016) REVIEWS
    SAMSUNG GALAXY J ...
  • Top 5 Best SmartPhones under 7000 Rs (March 2017)
    Looking for the ...
  • Apple, IBM, Cisco are huge because of Indians, do not deny them H-1B visa: RBI Governor Urjit Patel
    ...
  • SAMSUNG GALAXY J7 (2016) Specifications
    SAMSUNG GALAXY J ...
  • BlackBerry Teases Marshmallow Beta Testing for Priv by Next Week
    Blackberry ...
  • LG Q6 Review
    LG Q6 Review
    2017 is ...

Contact Form

Name

Email *

Message *

Offers Zone

Created By Android Century Distributed by Android Century
  • Home
  • About us
  • Contact us
  • Privacy policy
  • Terms of use
  • Advertise here
Subscribe Via Email Subscribe To Android Century By Email And Get Free Updates. ;-)


Your email address is safe with us!