Mr. Bean Facebook Like Box PopUp

Rate this Post:

{[['

']]}

Hello Friends,
I am here with you after a long time. Today i am sharing a blogger widget that is awesome. Many of you have used Facebook Like box, but this box is of some different style and will make your blog looks better and some how funny. Yes this like box contains Mr. Bean's Cartoon saying "Welcome to My Blog"

Lets start how to install this widget;

Login to Blogger>Layout>Add HTML Widget and Paste the Following code;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
< Style >
# Colorbox, # cboxOverlay, # cboxWrapper {position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden;}
# CboxOverlay {position: fixed; width: 100%; height: 100%;}
# CboxMiddleLeft, # cboxBottomLeft {clear: left;}
# CboxContent {position: relative;}
# CboxLoadedContent {overflow: auto;}
# CboxTitle {margin: 0;}
# CboxLoadingOverlay, # cboxLoadingGraphic {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
# CboxPrevious, # cboxNext, # cboxClose, # cboxSlideshow {cursor: pointer;}
. CboxPhoto {float: left; margin: auto; border: 0; display: block;}
. CboxIframe {width: 100%; height: 100%; display: block; border: 0;}

repeat 0 0;}
# Colorbox {}
# CboxTopLeft {width: 21px; height: 21px; no-repeat-101px 0;}
# CboxTopRight {width: 21px; height: 21px; no-repeat-130px 0;}
# CboxBottomLeft {width: 21px; height: 21px; no-repeat-101px-29px;}
# CboxBottomRight {width: 21px; height: 21px; no-repeat-130px-29px;}
# CboxMiddleLeft {width: 21px; left top repeat-y;}
# CboxMiddleRight {width: 21px; right top repeat-y;}
# CboxTopCenter {height: 21px; 0 0 repeat-x;}
# CboxBottomCenter {height: 21px; 0-29px repeat-x;}
# CboxContent {background: # fff; overflow: hidden;}
. CboxIframe {background: # fff;}
# CboxError {padding: 50px; border: 1px solid # ccc;}
# CboxLoadedContent {margin-bottom: 28px;}
# CboxTitle {position: absolute; bottom: 4px; left: 0; text-align: center; width: 100%; color: # 949494;}
# CboxCurrent {position: absolute; bottom: 4px; left: 58px; color: # 949494;}
# CboxSlideshow {position: absolute; bottom: 4px; right: 30px; color: # 0092ef;}
# CboxPrevious {position: absolute; bottom: 0; left: 0; no-repeat-75px 0; width: 25px; height: 25px; text-indent:-9999px;}
# CboxPrevious: hover {background-position:-75px-25px;}
# CboxNext {position: absolute; bottom: 0; left: 27px; no-repeat-50px 0; width: 25px; height: 25px; text-indent:-9999px;}
# CboxNext: hover {background-position:-50px-25px;}
no-repeat center center;}
no-repeat center center;}
# CboxClose {position: absolute; bottom: 0; right: 0; no-repeat-25px 0; width: 25px; height: 25px; text-indent:-9999px;}
# CboxClose: hover {background-position:-25px-25px;}

. CboxIE # cboxTopLeft,
. CboxIE # cboxTopCenter,
. CboxIE # cboxTopRight,
. CboxIE # cboxBottomLeft,
. CboxIE # cboxBottomCenter,
. CboxIE # cboxBottomRight,
. CboxIE # cboxMiddleLeft,
. CboxIE # cboxMiddleRight {
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 00FFFFFF, endColorstr = # 00FFFFFF);
}

. CboxIE6
. CboxIE6
. CboxIE6
. CboxIE6
. CboxIE6
. CboxIE6
. CboxIE6
. CboxIE6

. CboxIE6 # cboxTopLeft,
. CboxIE6 # cboxTopCenter,
. CboxIE6 # cboxTopRight,
. CboxIE6 # cboxBottomLeft,
. CboxIE6 # cboxBottomCenter,
. CboxIE6 # cboxBottomRight,
. CboxIE6 # cboxMiddleLeft,
. CboxIE6 # cboxMiddleRight {
_behavior: expression (this.src = this.src? this.src: this.currentStyle.backgroundImage.split ('"') [1], this.style.background =" none ", this.style.filter =" progid : DXImageTransform.Microsoft.AlphaImageLoader (src = "+ this.src +", sizingMethod = 'scale') ");
}

# Subscribe {
font: 12px/1.2 Arial, Helvetica, san-serif; color: # 666;
}
# Subscribe a,
# Subscribe a: hover,
# Subscribe a: visited {
text-decoration: none;
}

. Box-tagline {
color: # 999;
margin: 0;
text-align: center;
}
# Subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a: link, a: visited {
border: none;
}
. Demo {
display: none;
}
</ Style > < script SRC = "http://bloggerprofessionals.googlecode.com/files/color-box.js" > </ script >
< script type = "text / javascript" >
jQuery (document). ready (function () {
if (document.cookie.indexOf ('visited = true') == -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: "600px", inline: true, href: "# btt"});
}
});
</ script > < Div Style = 'Display: none' > < Div id = 'BTT' Style = 'padding: 10px? 512px? " > < tbody > < tr > < TD Height = "342" width = "513" > < Div Align = "right" >

< iframe SRC = "/ / www.facebook.com/plugins/likebox.php?href=LINK TO YOUR PAGE overflow: hidden? width: 320px? Height: 255px? " allowtransparency = "True" > </ iframe > </ Div > </ TD > </ tr > </ tbody > </ table > </ Center > </ Div > </ Div >