android nexus 7

How To Add Facebook Likes Lightbox To Blogger

• Visit Blogger Dashboard.
• Now click on your site.
• Then click on layout tab there.
• Now click on the Add a gadget Link there.
• A box will pop up, Now copy the below code and paste it inside that box.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#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/AVvXsEhghQitCIh5PSGzzvESbWka5-hLcWx-jyeXUy9vzM2sy73aMhaTLqIAC5vK-iM4_vFQLa3l9oLAqOD6bqqcqmBy6brx9v2HGwgY8j9Qj1ahnpNMWR22cOXYioiG5LVuccBcmReZeWJU0keE/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;
}
</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>
<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='//www.facebook.com/plugins/likebox.php?

href=https://www.facebook.com/pages/Trickspunch/1397531987130417?ref=hl&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'

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

•  Now change the Text in red to your Facebook page Address.
• Thats it, Save that gadget.
• See the change with Facebook likes Lightbox.

• Proceed in the Template coding and search for the ]]></b:skin> tag.
• Now copy the below code and paste it below ]]></b:skin> tag. 

#Main-Menu {
float:right;
width : 1018px;
height : 70px;
margin : 0 auto;
padding : 0px 0px 0px 0px;
}
#Main-nav {
margin : 0px 0px 10px 15px;
padding : 10px;
}
#Main-nav ul {
float: left;
list-style: none;
margin: 10px auto;
padding: 0;
}
#Main-nav li {
list-style: none;
margin: 17px -10px 0px 0px;
padding: 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbmX3tysnJhpYpnk-fJ75QgpuBpffgCyF7PHuI-hHGCIG0MUJSWxaJrzB9_S2rikuhd-ptfxSRinhQO487k0jYRwahAj_Bnypy0IBKyK9trC7Mq5jsRwZ5e07nl5VIeVgBUggVBfKdMQ4/s320/menu-bg.png) no-repeat;
background-position: 0px 0px;
width:169px;
height:42px;
float:left;
}
#Main-nav li:hover {
background-position: 0px -52px;
}
#Main-nav li.highlight {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4EQHEcBnvAyLyrtjbDRg9Gt3L07VtDBAxP95NHxgRawoLsiXmKHA2H2kH4UhRwcunTJjlflX-vz9fQ8QKHlpNUZM5v4se9eBOFg9UdGF4XOu_QT3ogUhL740yX2yG633o_qFZqOu7_1os/s400/menu_button_white.png) 0px 0px no-repeat;
}
#Main-nav li.highlight a {
color: rgb(51, 51, 51) !important;
text-shadow: 1px 2px 1px #9E9E9E !important;
font-size: 12px !important;
font-family: arial;
font-weight: bold;
text-transform: none;
}
#Main-nav li a{
color: #FFF;
display: block;
font-size: 12px;
font-family:arial;
font-weight: bold;
text-transform: none;
margin: 0;
padding: 15px 0px 9px 60px;
text-decoration: none;
text-shadow:1px 1px 3px #333;
letter-spacing:0.09em;
}
#Main-nav li a:hover {
color: #333;
text-shadow:1px 2px 1px #9E9E9E;
}

• Now save your template!
• If you do the above steps, then click on layout.
• Click on Add a gadget link. 
• Now select HTML JavaScript gadget from the gadget list as shown below.

Floating Facebook Like box

How To Add Floating Facebook Like Box To Blogger

• First of all Go to Blogger Dashboard.
• Then click on your Blog.
• Now click on the Template tab as shown below.

• Proceed in the HTML coding.
• Now search for the </head> tag in the template coding ( by pressing CTRL+F you can find).
• Now copy the below jQuery script and paste it above the </head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

• Now save your template!
• If you do the above steps, then go to Layout tab .
• Click on the Add a Gadget link as shown below.

•  A list of gadget will appears, select the HTML/Javascript gadget from that list as shown below.

 

• A box will appears, Now copy the Below script and paste it in that HTML JavaScript box.

<a href="http://trickspunch.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRjnKvSa0qwdYfIZVod-cL5HP_72lQ-72bcPZ51eYHEVNqihDC4LZyBRwXbnpmgH094iZfEmZEXGhvoElVqas3hqszlA4adcVlJKlt9eWCSUQkESn9lto-RDFtSGm7mF1OWL3pAA3wGca2/s1600/facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Trickspunch/1397531987130417?ref=hl&amp;width=245&amp;colorscheme=light&amp;show_faces
=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span> / <a href="http://trickspunch.blogspot.com/2013/10/facebook-like-box.html">Get This Widget! </a></span></div></div>
</div>

Customization Before Saving

- All you have to do is, change the text in red to the Facebook page address of your page.

- Now that's it! Click on the save Button.

- If you have any problem while adding this widget to your Blog simply share your problem with us through the comment box, it will not spoil up! We are always here to solve your problems!