Create Awesome Floating Facebook Like Box For Blogger

 Floating Facebook Like Box Widget is important for every blog. Here's guide for you to Create Awesome Floating Facebook Like Box For Blogger Blog.

As we know Facebook is the biggest social media for sharing latest updates on various purpose. Beside if you've made a blog ,but struggling to get more Facebook likes ? Then for sure it is necessary to use Facebook like box on your blog so that peoples can join your Facebook fan page to get latest updates easily . Today I'm going to show you how to add a floating Facebook like box widget which is very attractive & also helpful to get more likes, The widget remains in a fixed position on the right-hand side of your site. When you hover over the blue Facebook image the like box will then slide and comes out .

Steps To Add Floating Facebook Like Box

• Go To Blogger Dashboard - - Click Layout
• Click on Add a Gadget
• Choose HTML/JavaScript 
• Now copy the following code & paste it in the gadget box

<!--BM Floating Facebook Widget START-->
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".BMlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.BMlikebox{background: url("http://2.bp.blogspot.com/-Ux_CnrAfuLQ/U9pS7i25SyI/AAAAAAAAC1U/Mca-gSNbEFQ/s1600/BloggerMates_facebook_widget.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 200px;padding: 0 5px 0 35px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.BMlikebox div{border:none;position:relative;display:block;}
.BMlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.BMlikebox span a{color: #808080;text-decoration:none;}
.BMlikebox span a:hover{text-decoration:underline;}
</style><div class="BMlikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FBloggerMates&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>Widget by:<a href="http://www.bloggermates.com/" ><img  border="0" src='http://1.bp.blogspot.com/-tyMi1BbHEPY/U9pS7evNDiI/AAAAAAAAC1Q/6BXHzKxl2OA/s1600/BloggerMates.gif' alt="BM Widgets" title="BM Widgets"/></a></span>
</div>
</div>
<!--BM Floating Facebook Widget END-->

After pasting the above code replace BloggerMates  with your own Facebook page username.

Next Step of this Widget

• Go To Blogger - - Template
• Click on Edit HTML
• Now search for the following code

</head>

Now paste the following script just above the </head> section

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

Now save your Template and refresh your Blog , You will see your attractive floating Facebook like box.

If you are still facing problem to do this properly then leave your comment below . I will be happy to assist you .  

Create Awesome Floating Contact Form For Blogger

Don't like the old fashioned style of inserting contact form at static page or right sidebar ?
Then my guide to Create Awesome Floating Contact Form For Blogger would be your perfect choice

Here's a demo screenshot for how its look alike

Step by step procedure:

• 1st of all add a Contact Form gadget to your blog by simply goto - Layout - Add a Gadget - More Gadgets - Contact Form - Click Add .
• Now you can check your blog page , You'll find a contact from .

Customizing The Form:

1. Go To Blogger > Template
2. Click "Edit HTML"
3. Search for  ]]></b:skin>  and just above it paster the following CSS code:

/*Floating Contact Form by BloggerItems.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.contact-form-button-submit{
background-color:#5A2A64;background-image: -moz-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -ms-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -o-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#733889),color-stop(100%,#3F1B3D)); background-image: -webkit-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: linear-gradient(to bottom,#733889 0,#3F1B3D 100%);
border-radius: 8px;
border: 2px solid #DDDDDD;
height: 35px;
margin: 8px 0 0;
width: 70px;
}
.contact-form-button-submit:hover{background:#5B2A65;
padding:0;border: 2px solid #DDDDDD;
}
.tibber {
 position: fixed;
 width: 250px;
 right: 27px;
 bottom: 0;
 z-index: 999;
}
.Rask-ic a {
background-color:#5A2A64;background-image: -moz-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -ms-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -o-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#733889),color-stop(100%,#3F1B3D)); background-image: -webkit-linear-gradient(top,#733889 0,#3F1B3D 100%); background-image: linear-gradient(to bottom,#733889 0,#3F1B3D 100%);
padding: 8px 22px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-left: 2px solid #DDDDDD;
border-right: 2px solid #DDDDDD;
border-top: 2px solid #DDDDDD;
color: white;
display: inline-block;
font-size: 20px;
letter-spacing: 1px;
}
.Rask-ic a:hover{text-decoration:none}
.Rask {
 height: 280px;
 background: white;
box-shadow:rgba(0, 0, 0, 0.8) 4px -4px 6px -4px;
 border: 2px solid #481B59;
 padding: 10px;
 display: none;
}
.Rask-ic {
 text-align: right;
}
.Rask .ContactForm {
 margin: 0;
 display: block!important;
}

1. Then search for  </body>  and just above it paste the following JS code:

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.com*/
$('body').append('<div class="tibber"><div class="Rask-ic"><a href="#no-move">Contact</a></div><div class="Rask"></div></div>');
$('.ContactForm').appendTo('.Rask');
var slide_up_ct = false;
$('.Rask-ic a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.Rask').slideDown();
 } else {
 slide_up_ct = false;
 $('.Rask').slideUp();
 }
});
//]]>
</script>

You are done, You can now see a beautiful Floating Contact Form on the right footer side of your blog, If you wish you can customize the CSS code to do any changes like button color etc.

Feel free to share your views below & stay tuned :)

Awesome Way to Hide Contact Form in Blogger

We can't hide the recently launched Blogger Contact Form permanently, but there's Awesome Way to Hide Contact Form in Blogger, also from homepage.

Recently Blogger has launched their Contact Form which was not available before for the Blogspot user except using Php & other critical methods.

Blogger users got a excellent benefit with the help of this widget , but when we add this it always appears in homepage & unlike other widgets its not easy to hide the contact form from blogger homepage . With the help of some CSS codes it can be possible to hide it from blogger homepage along with other pages .

Steps To Hide Contact Form From Homepage & Sidebar:

• Go to Blogger > Dashboard
• Click on Template [ You can create a Backup of your Template before Proceeding ]
• Click "Edit HTML"
• Search for the following code

]]></b:skin>

Now paste the following code just before it

#ContactForm1
{
display: none ! important;
}

You're done , now "Save Template" & reload your Blog .

If you are facing any problem then leave your comment below . I will be happy to assist you