Adding Floating Contact Form To Blogger

Just a quick news before I start the stuff. Google Code has suspended my code account & all repositories I hosted there, so all my code that I use in this website & in tutorials in no longer controlled by me. That's it!

If you're not satisfied with adding Blogger's contact form widget to a specific page of your blog, you can also use it as a floating widget.

BloggerItems has created a cool floating contact form widget for Blogger. First, add Blogger's official contact form widget to your blog.

• Go To Blogger > Template > Edit HTML

• Search and paste this code just about ]]></b:skin>:

.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Then paste the below code before </body> tag in your template:

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

That's IT!

Add Falling Snow To Blogger

Single bells single bells single all the way! It's HOLIDAY SEASON, and we're back with another great script. It's a great script and will work everywhere, not just Blogger.

This great script comes from schillmania.com. It's just a single .js file, we don't need any jquery support for this script. Just add this script to your Blogger blog and we're done. For newbies, here's how to add:

• Blogger > Template > Edit HTML> Add following script just above </head> tag:

<script src="https://widcraft.googlecode.com/svn/snowstorm.js"></script>

Want to customize snow fall effects? See Customizing Snowstorm for more.

WordPress Style Admin Bar For Blogger

First of all, this is the most foolish Blogger widget on this entire blog. This widget is very useful but still a dumb idea from me.Still it's an awesome navigation bar for Blogger admins.

This widget is inspired from the WordPress Admin Bar menu and Blogger Admin Control Panel widget. This widget will be only visible to blog admins. It'll provide you some quick actions in the front end of your Blogger blog. Let's get started:

Locate Your Unique Blog ID Number:

To add this widget, it's important to find your unique blog ID number. It's really easy. Just open your Blog's dashboard (overview, posts, and backend other pages) and copy your unique blog ID from address bar.

For example, your ID will look something like this:

http://www,.blogger.com/blogger.g?blogID=1415638240907948#posts

Red part of the above URL is my blog ID. Visit your blog and copy your unique blog ID.

Add Admin Bar To Blogger Template:

To add the control panel to your Blogger template, go to Template > Edit HTML. Search and add following code just above </body>:

<style>
#wpadminbar {
    direction: ltr;
    color: rgb(204, 204, 204);
    font: 400 13px/28px sans-serif;
    height: 28px;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    min-width: 600px;
    z-index: 99999;
    background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70);
}

#wpadminbar .quicklinks {
    border-left: 1px solid transparent;
}

#wpadminbar div {
    outline: 0px none;
}

#wpadminbar * {
    height: auto;
    width: auto;
    margin: 0px;
    padding: 0px;
    position: static;
    text-transform: none;
    letter-spacing: normal;
    font: 400 13px/28px sans-serif;
    color: rgb(204, 204, 204);
    text-shadow: 0px -1px 0px rgb(68, 68, 68);
    -moz-box-sizing: content-box;
    transition: none 0s ease 0s;
}

#wpadminbar {
    direction: ltr;
    color: rgb(204, 204, 204);
    font: 400 13px/28px sans-serif;
}

#wpadminbar .quicklinks ul {
    text-align: left;
}

#wpadminbar .ab-sub-wrapper, #wpadminbar ul, #wpadminbar ul li {
    background: none repeat scroll 0px 0px transparent;
    clear: none;
    list-style: none outside none;
    margin: 0px;
    padding: 0px;
    position: relative;
    text-indent: 0px;
    z-index: 99999;
}

#wpadminbar .quicklinks > ul > li {
    border-right: 1px solid rgb(85, 85, 85);
}

#wpadminbar ul li {
    background: none repeat scroll 0px 0px transparent;
        background-color: transparent;
        background-image: none;
        background-repeat: repeat;
        background-attachment: scroll;
        background-position: 0px 0px;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: auto auto;
    clear: none;
    list-style: none outside none;
    margin: 0px;
    padding: 0px;
    position: relative;
    text-indent: 0px;
    z-index: 99999;
}
#wpadminbar li {
    float: left;
}

#wpadminbar .quicklinks > ul > li > a, #wpadminbar .quicklinks > ul > li > .ab-empty-item {
    border-right: 1px solid rgb(51, 51, 51);
}
#wpadminbar .quicklinks a, #wpadminbar .quicklinks .ab-empty-item, #wpadminbar .shortlink-input {
    height: 28px;
    display: block;
    padding: 0px 12px;
    margin: 0px;
}
#wpadminbar a, #wpadminbar a:hover, #wpadminbar a img, #wpadminbar a img:hover {
    outline: 0px none;
    border: 0px none;
    text-decoration: none;
    background: none repeat scroll 0px 0px transparent;
}

#wpadminbar .ab-top-secondary {
    float: right;
    background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70);
}

#wpadminbar .quicklinks .ab-top-secondary > li {
    border-left: 1px solid rgb(51, 51, 51);
    border-right: 0px none;
    float: right;
}
#wpadminbar ul li:last-child, #wpadminbar ul li:last-child .ab-item {
    border-right: 0px none;
    box-shadow: none;
}

#wpadminbar #wp-admin-bar-search .ab-item {
    background: none repeat scroll 0% 0% transparent;
}
#wpadminbar #wp-admin-bar-search .ab-item {
    padding: 0px;
}
#wpadminbar .quicklinks .ab-top-secondary > li > a, #wpadminbar .quicklinks .ab-top-secondary > li > .ab-empty-item {
    border-left: 1px solid rgb(85, 85, 85);
    border-right: 0px none;
}
#wpadminbar ul li:last-child, #wpadminbar ul li:last-child .ab-item {
    border-right: 0px none;
    box-shadow: none;
}

#wpadminbar #adminbarsearch {
    height: 28px;
    padding: 0px 2px;
}

#wpadminbar #adminbarsearch .adminbar-input {
    font: 13px/24px sans-serif;
    height: 24px;
    width: 24px;
    border: 0px none;
    padding: 0px 3px 0px 23px;
    margin: 0px;
    color: rgb(204, 204, 204);
    text-shadow: 0px -1px 0px rgb(68, 68, 68);
    background-color: rgba(255, 255, 255, 0);
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj28b9E4prJNAbLzgGAVLnghfUUI68B9WpuPYgIA5eRH17OOV6miL_c29kKSoG7Nfq6j0XkDoYgfwp_JQjPN4KixsnU_fc-5o2UORtJLhrOzBENCn8gFoie_HCBkSvbgmwaRSPmqeOMVM/s1600/admin-bar-sprite.png");
    background-position: 3px 2px;
    background-repeat: no-repeat;
    outline: 0px none;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    box-shadow: none;
    -moz-box-sizing: border-box;
    transition-duration: 400ms;
    transition-property: width, background;
    transition-timing-function: ease;
}

#wpadminbar .ab-icon {
    position: relative;
    float: left;
    width: 16px;
    height: 16px;
    margin-top: 6px;
}

#wp-admin-bar-comments > .ab-item .ab-icon {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj28b9E4prJNAbLzgGAVLnghfUUI68B9WpuPYgIA5eRH17OOV6miL_c29kKSoG7Nfq6j0XkDoYgfwp_JQjPN4KixsnU_fc-5o2UORtJLhrOzBENCn8gFoie_HCBkSvbgmwaRSPmqeOMVM/s1600/admin-bar-sprite.png");
    background-position: -1px -134px;
    background-repeat: no-repeat;
}

#wpadminbar #wp-admin-bar-new-content > .ab-item .ab-icon {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj28b9E4prJNAbLzgGAVLnghfUUI68B9WpuPYgIA5eRH17OOV6miL_c29kKSoG7Nfq6j0XkDoYgfwp_JQjPN4KixsnU_fc-5o2UORtJLhrOzBENCn8gFoie_HCBkSvbgmwaRSPmqeOMVM/s1600/admin-bar-sprite.png");
    background-position: -2px -182px;
    background-repeat: no-repeat;
}

#wpadminbar a:focus, #wpadminbar a:active, #wpadminbar input[type="text"], #wpadminbar input[type="password"], #wpadminbar input[type="number"], #wpadminbar input[type="search"], #wpadminbar input[type="email"], #wpadminbar input[type="url"], #wpadminbar select, #wpadminbar textarea, #wpadminbar div {
    outline: 0px none;
}

#wpadminbar #adminbarsearch .adminbar-button {
    display: none;
}

#wpadminbar .ab-top-menu > li:hover > .ab-item, #wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar .ab-top-menu > li > .ab-item:focus, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus {
    color: rgb(250, 250, 250);
    background: linear-gradient(to top, rgb(58, 58, 58), rgb(34, 34, 34)) repeat scroll 0% 0% rgb(34, 34, 34);
}
#wpadminbar .quicklinks > ul > li > a, #wpadminbar .quicklinks > ul > li > .ab-empty-item {
    border-right: 1px solid rgb(51, 51, 51);
}

#wpadminbar #adminbarsearch .adminbar-input:focus {
    color: rgb(85, 85, 85);
    text-shadow: 0px 1px 0px rgb(255, 255, 255);
    width: 200px;
    background-color: rgba(255, 255, 255, 0.9);
    cursor: text;
}
</style>

<span class='item-control blog-admin'>
<div id="wpadminbar" class="no-grav" role="navigation">   
            <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0">
                <ul id="wp-admin-bar-root-default" class="ab-top-menu">
        <li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://draft.blogger.com/blogger.g?blogID=BlogIdNumber#overview">BWidgets.com</a>        </li>
        <li id="wp-admin-bar-comments"><a class="ab-item" href="http://www.blogger.com/blogger.g?blogID=BlogIdNumber#comments" title="Moderate Comments"><span class="ab-icon"></span></a>        </li>
        <li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://www.blogger.com/blogger.g?blogID=BlogIdNumber#editor" title="Add New"><span class="ab-icon"></span><span class="ab-label">New</span></a>        </li>
        <li class="menupop"><a class="ab-item" aria-haspopup="true" href="http://www.blogger.com/logout" title="Logout"><span></span><span class="ab-label">Logout</span></a>        </li>
       
       
        </ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
        <li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="/search" method="get" id="adminbarsearch"><input class="adminbar-input" id="adminbar-search" name="q" value="" maxlength="150" type="text"><input class="adminbar-button" value="Search" type="submit"></form></div>        </li>
       
       
        </ul>            </div>
</div>
</span>

Replace all instances of BlogIdNumber with your unique BlogID. Save your template & that's it!

How To Add An Admin Control Panel To Blogger

Most of Blogger user hide the Blogger navigation bar in their blog. It's not a bad thing but takes a lot of quick links away from you. Those quick links are  “New post”, “Customize” and “Log Out.”

In this article, you'll know how to add an Admin Control Panel widget to your blog, which will be only visible to the blog admin. Thanks to BloggingTips for this awesome trick.

I added some extra options to the admin panel but you can add or remove them if you want to.

Locate Your Unique Blog ID Number:

To add this widget, it's important to find your unique blog ID number. It's really easy. Just open your Blog's dashboard (overview, posts, and backend other pages) and copy your unique blog ID from address bar.

For example, your ID will look something like this:

http://www,.blogger.com/blogger.g?blogID=1415638240907948#posts

Red part of the above URL is my blog ID. Visit your blog and copy your unique blog ID.

Add Admin Control Panel To Blogger Template:

To add the control panel to your Blogger template, go to Template > Edit HTML. Then search for the following line of code (or similar):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediately before this line, paste the following section of code:

<span class='item-control blog-admin'>
<h2>Admin Control Panel</h2>
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#editor'>New Post</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#posts'>Posts</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#stats'>Stats</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#settings'>Settings</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#pageelements'>Change Layout</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#template'>Edit HTML</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#comments'>Moderate Comments</a>
|
<a href='http://www.blogger.com/logout.g'>Sign Out</a>
</span>

Replace all instances of BlogIdNumber with your unique BlogID. Save your template & that's it!

How To Stop Users With AdBlock In Blogger/WordPress

Don't you hate it when a crappy extension is blocking you from getting the payoff of your hard work that you put on your blog? Not sure about you, but I really really hate that. More than AJ Styles-Dixie Carter's TNA Promo that I'm watching right now, it's good. Okay, it was a creative way to end the show.

Back to topic. Antiblock.org found a great script to stop users with AdBlock from viewing your website. Don't forget to check and support their awesome project. There is no bad in stopping users with AdBlock from viewing your site because we blogger needs to earn as much as we can for our hard work. It's not easy to run and manage a full time blog without revenues from ads. Here is how to do it:

Stop Users With AdBlock In Blogger/WordPress/HTML:

First of all, you can also use this script on any other blogging/site platform. It works everywhere, even on a HTML page.

For Blogger:

• Visit Blogger > Template > Edit HTML.

• Press Ctrl + F and search for ]]></b:skin> and paste below code above it:

#g207{position:fixed!important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");left:0;width:100%;height:100%;background-color:#fff;opacity:0.9;filter:alpha(opacity=90);display:block}#g207 p{opacity:1;filter:none;font:bold 16px Verdana,Arial,sans-serif;text-align:center;margin:20% 0}#g207 p a,#g207 p i{font-size:12px}#g207 ~ *{display:none}

• Now press Save Template.

• Now navigate to Blogger > Layout > Add Gadget, Click on HTML/JavaScript Gadget.

• Paste the below code into it and press Save.

<script>(function(w,u){var d=w.document,z=typeof u;function g207(){function c(c,i){var e=d.createElement('i'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('g207')){c('<p>Please disable your ad blocker!<br/>This site is supported by the advertisement <br/> Please disable your ad blocker to support us!!! </p>','g207')}};(function(){var a=['Adrectangle','PageLeaderAd','ad-column','advertising2','divAdBox','mochila-column-right-ad-300x250-1','searchAdSenseBox','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display)=='none'){return f('#'+a[i])}}}());(function(){var t=g(0,'img'),a=['/adaffiliate_','/adops/ad','/adsales/ad','/adsby.','/adtest.','/ajax/ads/ad','/controller/ads/ad','/pageads/ad','/weather/ads/ad','-728x90-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]!==null){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',g207,false)}else{w.attachEvent('onload',g207)}})(window);</script>

That's it!

For WordPress:

It's all same for WordPress. Just add following CSS & JavaScript code to your WordPress template:

CSS:

#g207{position:fixed!important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");left:0;width:100%;height:100%;background-color:#fff;opacity:0.9;filter:alpha(opacity=90);display:block}#g207 p{opacity:1;filter:none;font:bold 16px Verdana,Arial,sans-serif;text-align:center;margin:20% 0}#g207 p a,#g207 p i{font-size:12px}#g207 ~ *{display:none}

JavaScript:

<script>(function(w,u){var d=w.document,z=typeof u;function g207(){function c(c,i){var e=d.createElement('i'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('g207')){c('<p>Please disable your ad blocker!<br/>This site is supported by the advertisement <br/> Please disable your ad blocker to support us!!! </p>','g207')}};(function(){var a=['Adrectangle','PageLeaderAd','ad-column','advertising2','divAdBox','mochila-column-right-ad-300x250-1','searchAdSenseBox','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display)=='none'){return f('#'+a[i])}}}());(function(){var t=g(0,'img'),a=['/adaffiliate_','/adops/ad','/adsales/ad','/adsby.','/adtest.','/ajax/ads/ad','/controller/ads/ad','/pageads/ad','/weather/ads/ad','-728x90-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]!==null){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',g207,false)}else{w.attachEvent('onload',g207)}})(window);</script>

That's it. You can also use this plugin to stop users with AdBlock with some extra options.

After adding above listed code your blog will look something like this:

Image courtesy of HackingUniversity.in

How To Embed Facebook Posts To Your Blog

Update (7/9/13):

Facebook recently announced their official plugin to embed public statuses, photos and more. It has more feature than the outdated article version. You can easily get your embed code by visiting this page.

Getting The Embed Code From A Post:

You can also get the embed code directly from the post itself.  Only public posts from Facebook Pages and profiles can be embedded. Choose 'Embed Post' from the drop down menu that appears. You will get the embed code for the post.

Original Article (9/13/13):

There are bunch of Facebook widgets to embed like buttons, like boxes, subscribe buttons, and more. But there is no way to embed a status, photo, link or video directly from Facebook to your blog. Twitter tweets always have an option to easily embed any Tweet to your blog, website, or any html document.

By embedding a status, you can easily display a status on your website, without editing any bit of it. It's really helpful in displaying images on your blog, without uploading them into your blog. It was helpful for me in this post.

How To Embed A Facebook Status:

Tired of taking screen grabs of Facebook posts? SocialDitto makes it easy to embed a Facebook status update into any article or blog. You can easily grab your embed code in less than a minute by visiting SocialDitto. It's free, safe, easy, and quick. Don't forget to leave a comment.

You can check our live demo below:

Hardeep Asrani56 days ago

Eminem & The Undertaker... -_-

Powered by socialditto  6 likes ·  0 comments

Adding Arrow Key Navigation To Blogger

First of all, all credits to this amazing tutorial and script goes to our friends at Blogger Plugins. Don't forget to check their website for more great blogging tutorials.Also, I took above picture from their website. It's not copyrighted by them, but still they saved my time by creating this image. So thanks a lot guys!

Tons of big sites are using arrow key navigation to make their site more better, and it's a very useful plugin for readers. It saves a lot of time, as they don't have to look for those next or older post/page links. The code is very light, and would not effect your blog's loading at all.

Let's just get started with this easy plugin. You don't need to manually put any code into your Blog, you can install this plugin by clicking on above Add To Blogger button and that's it!!

Adding Google Custom Search Engine To Blogger

Every website and blog must have a search bar to make it easy for visitors to search something. Even our site has a small, but stylish search bar in top. It's a must have stuff for all bloggers and webmasters. You can try it, and you'll find out that our search bar is linked with Google's custom search engine.

Replacing your boring search engine with a custom Google search engine is an awesome idea. You can also turn your old search to Google CSE, but we'll discuss that stuff later. Plus, you can also earn money with your Google CSE, but we'll also discuss it later.

It's time for you to learn how to create your own custom Google search engine, which is 100% embeddable and customization. As I noted before, you can check a live demo in our blog's right top bar, or by clicking here.

Creating A Google CSE:

Creating your own Google custom search engine is quite easy, you just need to type some basic information about your search preference and that's it. Here we go:

• Visit Google Custom Search

• Click on Add button and a form will appear

Now it's time to fill a simple form, with one on text field, and other options. As you can see in below picture, steps are just too easy.

• In first field, enter your blog/site's URL, you can enter more than one URLs (one URL per field)

• In second option, choose your preferred language (English if you're using Adsense)

• In third field, you can edit your search engine's name, which is optional and is only visible to you

• Finally, click on that Create button to finish your setup

Yea!! We're almost done with this section of this post. After clicking on Create button, following page will appear:

• Just click on Get code to get your CSE's code. Also that Google Bot looks freakin' awesome!!

As you can see in above image, just copy that highlighted code, cuz we'll add that code in your blog. You can try different types of Google CSE forms and style by customizing it. Time for next step!

Adding Google CSE To Blogger:

Now you can add that Google CSE code to wherever you wanna display your search engine. You can also try it on a html document. But we'll add it to our blog. Here you go:

• Go To Blogger> Layout > Add A Gadget > HTML/JavaScript

• Paste your Google CSE form and save your widget.

That's IT

Customizing:

Now you can also customize this widget. There are two ways to customize it, first one is by Google CSE's option, and second way is with some CSS and HTML. In this post, we'll only discuss about first method.

Visit Google CSE > Select your custom search engine > Click on Look and feel option in right sidebar
Now in look and feel tab, you'll see lots of option to customize your search engine, like Layout, themes, customize, and thumbnails, as you see in below images.

You can try to customize your search with every option, without using any CSS. It's pretty simple. Also, don't forget to experiment with layout option, as it's a very great way to customize your search's layout. More tutorials and article about Google CSE are coming soon :)

Three Stylish Customized Blogger Contact Forms

Yesterday, I posted a couple of articles about Blogger's new contact form widgets. First, I showed you how to add this widget to your Blog's sidebar, then I showed you how to add this form to a specific page of your blog.

It's time for me to share three stylish customized designs for Blogger's new contact form widget. All three designs are coded with some really simple CSS, and they look really great on your blog's sidebar and pages.

First, I'll showcase three stylish designs with their CSS, then I'll show how to add them on your blog.

Design #1:

/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: #FFFFFF;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

#ContactForm1_contact-form-email-message {
width: 245px;
height: 150px;
line-height: 150%;
}

#ContactForm1_contact-form-submit:hover, textarea:hover,
#ContactForm1_contact-form-submit:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

#ContactForm1_contact-form-submit{
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
height:40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Design #2:

/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1HpAaUCELV4K1-7UCQ99iut8yGa4FWQqg0o0rvFy1V8oigUlb1M1hmQfHy6NucIioVp1bKrkkeCASvBPso0OaFtCZwb3ZYpQmDb2n7496SULzX1SRMyC-WNQOMoMhplo882X6MnPdtAI/s1600/form_name.gif") no-repeat scroll 5px 50% rgb(255, 255, 255);
}

#ContactForm1_contact-form-email {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8stcNavSUoBqa4LbJ4IehqTQeMHV0OCGKDdwydT6mcXss8MDOtFHJP_tLmYS23kM7NxA7Ujx2BOY6PRSRi9YkKqxWij13sDB_bWL9H-niqt0ya00VYsq_tqSq4ov6qVdq2HTbhxTM3F0/s1600/form_email.gif") no-repeat scroll 5px 50% rgb(255, 255, 255);
}

#ContactForm1_contact-form-email-message {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVDUB3LPRdSw2-jYwvT1cBiIEjmYq9N71BQFMMk2lj0UoPUHOR_6ZLqWgUBcNVWtSTUK7EDd3iOgI-3nj8ylkt9hRgRw3uE_RSa11F5SJRba-k0jkkFBgwcEZTE1SHIcBcdbw6D-SK_A/s1600/form_note.gif") no-repeat scroll 5px 6px rgb(255, 255, 255);
}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
margin: 0px;
width: 250px;
border: 1px solid rgb(221, 221, 221);
padding: 3px 5px 3px 25px;
}

#ContactForm1_contact-form-submit {
margin-top: 5px;
padding: 5px;
width: 100px;
background-color: rgb(225, 77, 77);
background-image:none;
border: 1px solid rgb(57, 21, 21);
border-radius: 5px 5px 5px 5px;
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
line-height: 48px;
text-transform: uppercase;
text-shadow: 0px 1px 0px rgb(0, 0, 0);
}

Design #3:

/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email {
border-color: rgb(0, 0, 0);
border: 1px solid rgb(186, 186, 186);
padding: 4px 6px 6px 5px;
background-color: rgb(255, 255, 255);
outline: 0px none;
margin-right: 32px;
min-height: 32px;
position: relative;
-moz-box-sizing: border-box;
line-height: normal;
font-size: 100%;
margin: 0px;
vertical-align: baseline;
font-family: sans-serif;
}

#ContactForm1_contact-form-email-message {
border-color: rgb(0, 0, 0);
padding-right: 5px;
min-height: 100px;
width:265px;
border: 1px solid rgb(186, 186, 186);
padding: 4px 6px 6px 5px;
background-color: rgb(255, 255, 255);
outline: 0px none;
margin-right: 32px;
min-height: 32px;
position: relative;
-moz-box-sizing: border-box;
overflow: auto;
vertical-align: top;
font-size: 100%;
margin: 0px;
vertical-align: baseline;
font-family: sans-serif;
}

#ContactForm1_contact-form-submit {
background-image:none;
background-color: rgb(0, 130, 135);
color: rgb(255, 255, 255);
font-family: 'Segoe UI','Open Sans',Verdana,Arial,Helvetica,sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
vertical-align: middle !important;
min-width: 90px;
min-height: 32px;
height: 32px;
border: 1px solid transparent;
color: white;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
text-align: center;
cursor: pointer;
padding: 4px 10px;
position: relative;
outline: medium none;
border-radius: 0px 0px 0px 0px;
}

How To Add Custom Style To Contact Form:

Adding these custom CSS codes into your blog is pretty simple. Some of you are just going to leave this part, since they know how easy it really is. For those who don't know, here you go:

• Go To Blogger > Template > Edit HTML

• Search for ]]></b:skin>:

• Add your favorite form's CSS above ]]></b:skin>

• Save your template...That's IT!

That was pretty easy! If you're using one of these styles, then please let me know you favorite for future styles. You guys are free to share these styles with your friends and fans, just don't forget to give us credits for our hard work. You can also share your custom styles in the comment section below...

Adding Blogger Contact Form Into Static Page

Earlier today, I posted an article about Blogger's official Contact Form gadget at this link. This contact form is amazingly customizable. You can also add this form into your blog's static page or post with some simple steps. It's a great way to get rid of some extra forms in your drive. You can check this Contact Form in action by clicking here.

I'm going to finish this tutorial really quick, since I'm posting it second time. First post was not save due to an error. It was a huge post, so I'm not going to write it again :'(

Add Contact Form To Your Blog:

You can add this contact form into your blog's sidebar by reading this tutorial. Note: You must have this gadget on your sidebar to add this to your static page.

Hiding Contact Form From Your Sidebar:

Now you must hide this gadget from your site, so it'll only be available on your site's contact page. Here we go:

• Go To Blogger > Template > Edit HTML

• Search and paste this code just about ]]></b:skin>:

#ContactForm1{
display: none ! important;
}

Save your template. Now time for final step:

Adding Contact Form To A Static Page:

I'm going to finish this real quick, here we go:

• Go To Blogger > Posts

• Click on New Page and select Blank Page

• Now in your blank page, click on HTML option to switch to html editor mode

• Now paste following code and publish or update your page:

<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' />
<p></p>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

That's it! Don't forget to comment. You all are free to share this post on your blog, but don't forget to give us credits for out work.

Adding Contact Form Widget To Blogger

Blogger has launched a new amazing contact form widget for all of us. I'm using Google Drive contact form to receive all messages, but I'll use this widget soon on my blog. It's a great and must use widget for all blogs.

This widget was first discovered in Blogger's stylesheet by our friend at Stylify Your Blog. This new gadget release comes with the recent updates announced Google I/O 2013 and it looks like Blogger is still a integral part of the Google's Product line.

Features Of Blogger Contact Form:

• Stylish AJAX form with Google UI.
• Sending simple text messages.
• Custom CSS supported. 
• Message will be delivered right into your inbox.
• No need of any third-party service.
• Plain text messages without any attachments.

Adding Contact Form To Blogger:

• Go To Blogger > Layout > Add A Gadget > More Gadgets

• Choose Contact Form gadget

Give it a suitable name, and click on save to add this gadget. That's IT!!!

This widget is awesome. However, Google Docs form has more features - like, drop down list, additional fields, select field, more.

In future, I'll tell you how to use this widget on your pages, and also how to customize this widget with some magical CSS.

Email Subscription Slider Widget For Blogger

This widget is inspired from Social Subscription Scrolling Slider Widget. It's feed subscription form, which will slide out after scrolling the page little bit. It's based on jQuery, so don't forget to remove jQuery from our code, if your blog already has it.

I created this widget past Saturday for my blog but then I thought that I should share this with you all. As of writing, this widget will appear on our blog as you scroll down a little bit.

Add This To Blogger:

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

• Paste following code and click on Save:

<!-- Email Subscription Slider Widget For Blogger by BWidgets -->
 <script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#bwsocialslide").show("slow");else $("#bwsocialslide").hide("slow");});function closebwsocialslide(){$('#bwsocialslide').remove();}</script>

<style>
#bwsocialslide{
  background:#f3f3f3;
  -moz-box-shadow:inset 0 0 1px #333;
  -webkit-box-shadow:inset 0 0 1px #333;
  box-shadow:inset 0 0 1px #333;
  padding:12px 14px 12px 14px;
  width:250px;
  position:fixed;
  bottom:13px;right:0px;
  display:none;
  z-index:3;
  height:65px;
}
.bw-email{
  padding:5px 0 0 5px;
  float:left;
  font-size:1.4em;
  font-weight:bold;
  margin:0 0 10px 0;
  color:#686B6C;
}
.bw-emailsubmit{
  background:#9B9895;
  cursor:pointer;
  color:#fff;
  border:none;
  padding:3px;
  text-shadow:0 -1px 1px rgba(0,0,0,0.25);
  font:12px sans-serif;
}
.bw-emailsubmit:hover{
  background:#E98313;
}
.textarea{
  padding:2px;
  margin:6px 2px 6px 2px;
  background:#f9f9f9;
  border:1px solid #ccc;
  resize:none;
  box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
  -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
  font-size:13px;
  width:170px;
  color:#666;
}
</style>

<div style="display: none;" id="bwsocialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closebwsocialslide();">(X)</a>

<div class="bw-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=widgetcraft', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="widgetcraft" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="bw-emailsubmit" value="Submit" type="submit" />
</form>
</div>
</div>
<div class='clear'></div>
<!-- Email Subscription Slider Widget For Blogger by BWidgets -->

In above code, replace widgetcraft with your feed id. You are free to share this widget with your fans and friends. Please attribute the credits back to our blog as the only favor in return. Don't forget to leave a comment.

Twitter Followers Box Widget For Blogger

Facebook provides us a Like Box widget, which is great way to get more likes to your Facebook page from your blog/site. While Twitter developers were just too lazy to create something like that, Mark Carey created a Twitter Fan Box, which works just like the popular Facebook Fan Box, with a few small differences.

Twitter Fan Box displays the 10 most recent followers, which encourages people to follow your Twitter account. When someone clicks the "Follow" button, a popup appears for them to login to their Twitter account or authorize Twitter Fan Box.

Add Twitter Fan Box To Blogger:

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

• Paste following code and click on Save:

<!-- Twitter Fan Box -->
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("HardeepAsrani");</script>
<!-- End Twitter Fan Box -->

Don't forget to replace HardeepAsrani with your Twitter handler. You can test this widget by following me:

3D Flipping Menu For Blogger

Here is a pure css based menu with 3d flip concept. Menu items will flip on mouse hover. Menu is inspired from bunch of flipping menus, and is created by David Walsh. Seriously, David is one of my favorite web developers.

You can download or check a demo of this menu at this link. The HTML structure consists of a list with links. The animation centers around transitions and transforms.  The actual A element wont move -- the parent SPAN element will.

Adding This Menu To Blogger:

Finally, it's time for me to begin the tutorial, which is not much tricky. We're going to add this menu to blogger in two steps. Time for the first one:

• Go To Blogger > Template > Edit HTML > Click on "Proceed"

• Search for ]]></b:skin>

• Post following css just above ]]></b:skin>:

        /* 3d flipping menu by BWidgets.com */
        .block-menu {
            display: block;
            background: #000;
        }

        .block-menu li {
            display: inline-block;
        }

        .block-menu li a {
            color: #fff;
            display: block;
            text-decoration: none;
            font-family: 'Passion One',Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 24px;
            padding: 15px 10px;
        }

        /* animation domination */
        .three-d {
            -webkit-perspective: 200px;
            -moz-perspective: 200px;
            perspective: 200px;
            -webkit-transition: all .07s linear;
            -moz-transition: all .07s linear;
            transition: all .07s linear;
            position: relative;
        }

            .three-d:not(.active):hover {
                cursor: pointer;
            }

            .three-d:not(.active):hover .three-d-box,
            .three-d:not(.active):focus .three-d-box {
                -moz-transform: translateZ(-25px) rotateX(90deg);
                -webkit-transform: translateZ(-25px) rotateX(90deg);
                -o-transform: translateZ(-25px) rotateX(90deg);
                transform: translateZ(-25px) rotateX(90deg);
            }

        .three-d-box {
            -webkit-transition: all .3s ease-out;
            -moz-transition: all .3s ease-out;
            -ms-transition: all .3s ease-out;
            -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
            -webkit-transform: translatez(-25px);
            -moz-transform: translatez(-25px);
            -o-transform: translatez(-25px);
            transform: translatez(-25px);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .front {
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);
        }

        .back {
            -webkit-transform: rotatex(-90deg) translatez(25px);
            -moz-transform: rotatex(-90deg) translatez(25px);
            -o-transform: rotatex(-90deg) translatez(25px);
            transform: rotatex(-90deg) translatez(25px);
            color: #FFE7C4;
        }

        .front, .back {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

• Save your template.

All done with first step....Now it's time for part - adding our html mark-up.

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

• Paste following mark-up:

<ul class="block-menu">
<li><a href="#" class="three-d">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
Demos
<span class="three-d-box"><span class="front">Demos</span><span class="back">Demos</span></span>
</a></li>
<li><a href="#" class="three-d">
Deals
<span class="three-d-box"><span class="front">Deals</span><span class="back">Deals</span></span>
</a></li>
<li><a href="#" class="three-d">
About
<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
</ul>

• Save widget....All done!!!!

Customization:

Replace all # with your custom links. You can add another option on menu by adding following code above </ul> tag:

<span class="three-d-box"><span class="front">Title</span><span class="back">Title</span></span>

Having troubles? Don't forget to leave a comment....

New Floating Social Sharing Widget For Blogger

Earlier this year, I shared an awesome jQuery floating social sharing widget for Blogger. Now, it's time to share another one, which is from Making Different. It'll really approach your visitors to like, tweet and +1 your blog posts.

Also, it'll appear when your reader will reach your blog post's footer, which will allow him to share this post after reading it.

As of writing, I'am also using this widget on BWidgets. Hopefully, I'll also add this widget to my other blogs, which will help me to gain more social media attention.

Adding This Widget:

Adding this widget is so simple but a bit lengthy. We'll add this widget on our blog in four simple steps. First one is below:

• Go To Blogger > Template > Edit HTML > Click on "Proceed" > Mark the "Expand Template Widgets" option:

Adding jQuery Script:

If your blog already have a jQuery script, then you can skip this step. Now, after following first step, we have to add jQuery script on our template:

• Search and add below snippet code before </head> tag:

<script type="text/javascript" src="https://widcraft.googlecode.com/svn/jquery.js"></script>

Adding Trigger:

This step will work as our widget trigger. Make sure you that "Expand Template Widgets" option is marked:

• Search following code in your template:

<data:post.body/>

• Immediately below it, add the following snippet.

<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>

All Done....Final part time...

Adding Social Sharing Widget:

Finally, it's time for our final step. After this, you can check your blog to see this awesome widget.

• Find and add the below snippet code before </body> tag:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://widcraft.googlecode.com/svn/FloatingSocialSharingWidget.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>          
<div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'>
Are you Awesome? Legend has it that Awesome people can and will share this post!<br/>
<span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>

Save your template....It's done :)

Still Not Working?

Widget still not working?? Then just blame it on BIEBER!!! Just kidding,

So, if your template has more than one <data:post.body/> tag then try the last one. Don't forget to leave a comment.....

Customizing Facebook Like Box Widget

The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. Almost every blogger is using bunch of Facebook plugins on their blog, which is the easiest way to attract new fans to your Facebook page.

Don't you just hate that default Facebook like box design, which really sucks with that header and footer. Do you want to remove it? Yupp, Digital Inspiration (Oppa Labnol Style! ) has found an amazing way to customize your simple like boxes with some CSS touch.

So, I found two amazing customized Facebook like boxes from Digital Inspiration, which are really great. Below is an image of default Facebook like box, which is so common.

Default Facebook Like Box:

Now, as you can see in above image, which is an image of default Facebook like box, it really sucks. I guess, it's only for blue and plain sites. However, you can generate your page's like box widget at this link. You'll find millions of like boxes around the internet.

Custom Facebook Like Box Style #1:

Finally, we got rid of that ugly header and footer. Also, you can check a pic of mine in above widget, which is located at first block. Me and Eminem (Photoshop Rocks!!!). Anyways, copy the code below and paste it anywhere inside your blog or website:

<style type="text/css">
 .facebookOuter {
    background-color:#F4F4F4;
    width:250px;
    padding:10px 0 10px 10px;
    height:250px;
    border:1px solid #CCCCCC;
  }
 .facebookInner {
    height:250px;
    overflow:hidden;
  }
</style>

<div class="facebookOuter">
 <div class="facebookInner">
  <div class="fb-like-box"
      data-width="245" data-height="290"
      data-href="http://www.facebook.com/bwidgetz"
      data-border-color="#F4F4F4" data-show-faces="true"
      data-stream="false" data-header="false">
  </div>         
 </div>
</div>
          
<div id="fb-root"></div>

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

 Replace bwidgetz with your Facebook page's username.

Custom Facebook Like Box Style #2:

This one is even more better. As you can see in above image, this widget is customized very well with some beautiful CSS. Also, you can again see an image of mine with Eminem :p

Finally, it's time to share code of this beautiful like box. Copy the code below and paste it anywhere inside your blog or website:

<style>
.facebookOuter {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.facebookOuter, .facebookOuter:before, .facebookOuter:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.facebookOuter:before, .facebookOuter:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.facebookOuter:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
.facebookInner {
height:155px;
overflow:hidden;
}
</style>

<div class="facebookOuter" style="float:left;">
<div class="facebookInner">
  <div class="fb-like-box"
      data-width="300" data-height="179"
      data-href="http://www.facebook.com/bwidgetz"
      data-border-color="#F4F4F4" data-show-faces="true"
      data-stream="false" data-header="false">
  </div>
 </div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Replace bwidgetz with your Facebook page's username.

More Customization:

The default background color of both Facebook Like boxes is #F4F4F4 but you can use any other web color. Also, if you want to have a more wider or taller Like box for your website, you can need to change the width and height values. All credits on this amazing work goes to Digital Inspiration.

Also, I used Purple Purse fonts on images for this article. Don't forget to leave your comments...