Asian Collection: HTML

Hover Effect Button using CSS3

<div dir="ltr" style="text-align: left;" trbidi="on">
I have been using this hover button on my blog for Demo links. Some of the readers on this blog requested me write a tutorial on making something like this. So, here's the tutorial! 
If you don't know what button I am talking about then this is what you are going to make after reading this tutorial : 
Hey! Hover me to see the effect 
 
How is it? Lovely, isn't it? If you are a Gmail user then you probably know where this design came from, yup this design is from the Gmail's loading bar. I created the design for buttons when my internet was super slow, I had nothing else to do rather then watching the Gmail's loading bar, so I opened up my developer tools and the notepad, wrote all the CSS properties and next I gave it a hover effect to make it look good and it was ready. 
 
You can also make buttons like this on your blog or website using some small lines of CSS and HTML. Read the following steps to add the button to your site : 
The CSS for button 
We first need to apply a CSS rule for the buttons to give it style. This is the CSS you need to add to your site : 
.mjButton { 
    color:white !important; 
    background-color: #6188F5; 
    text-decoration:none !important; 
    background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent); 
    background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent); 
    background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent); 
background-image: -ms-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent); 
margin:4px; 
    padding:8px; 
    text-transform:uppercase; 
    text-decoration:none; 
    border:1px solid gainsboro; 
    text-shadow:1px 1px grey; 
    font-weight:bold; 
    font-size:11px; 
    background-position: 21px 37px; 
    background-size: 65px 45px; 
    -webkit-transition:all 0.7s ease-in-out; 
    -moz-transition:all 0.7s ease-in-out; 
    -ms-transition:all 0.7s ease-in-out; 
    -o-transition:all 0.7s ease-in-out; 
    transition:all 0.7s ease-in-out; 
} 
 
/* Mouseover State */ 
.mjButton:hover { 
     background-position: 21px 37px; 
     background-size: 999px 45px; 
} 
 
Just include this CSS style rule in your stylesheet and the first step is done. If you are using blogger then check this guide on Adding CSS To Your Blogger Blog 
The HTML for buttons 
After adding the CSS code in your site or blog the next step to create the button on your web pages is to add the HTML. This is the HTML for the button : 
<a href="#" class="mjButton">hey! click this</a> 
Yup the button is an anchor element so you can easily put URL in it to link to pages. If you change the value of class attribute in the <a> element, you also have to change the selectors in CSS to match it with the class of the HTML element.</div>

Hover Effect Button using CSS3

I have been using this hover button on my blog for Demo links. Some of the readers on this blog requested me write a tutorial on making som...

Header Animating Entrance Effect for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Not only for blogger but every one using HTML and web languages to display their blog or website. This is a small animating effect created using CSS3 to give an exclusive look to your website. 
The new CSS transform and animation can create awesome effect if used the correct way. And being a web designer who is still learning I get to learn about new techniques everyday but I don't always share it on my blog for blogger users who are not experts in using these technologies. I decided to post at least one add-on effect for blogger users every week and this is the first one. 
 
In this tutorial I will tell you how to make an animated entrance effect for the blog's title heading in blogger (can be used on any site by using the correct selectors). Here's the demo and file download link. 
Preview Download File 
 
To add this to blogger follow these instruction below 
Adding the CSS 
In most of our tutorials we first add HTML and then the CSS, but here will add the style code before editing the HTML. The CSS we need to create this entrance effect, is a long code, but don't worry, it won't slow down your site. 
 
Here's the code we are going to use : 
 
/* Animation Effect - Credit goes to Dan Eden @_dte */ 
@-webkit-keyframes flipInY { 
    0% { 
        -webkit-transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
    
    40% { 
        -webkit-transform: perspective(400px) rotateY(-30deg); 
    } 
    
    70% { 
        -webkit-transform: perspective(400px) rotateY(10deg); 
    } 
    
    100% { 
        -webkit-transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
} 
@-moz-keyframes flipInY { 
    0% { 
        -moz-transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
    
    40% { 
        -moz-transform: perspective(400px) rotateY(-30deg); 
    } 
    
    70% { 
        -moz-transform: perspective(400px) rotateY(10deg); 
    } 
    
    100% { 
        -moz-transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
} 
@-o-keyframes flipInY { 
    0% { 
        -o-transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
    
    40% { 
        -o-transform: perspective(400px) rotateY(-30deg); 
    } 
    
    70% { 
        -o-transform: perspective(400px) rotateY(10deg); 
    } 
    
    100% { 
        -o-transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
} 
@keyframes flipInY { 
    0% { 
        transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
    
    40% { 
        transform: perspective(400px) rotateY(-30deg); 
    } 
    
    70% { 
        transform: perspective(400px) rotateY(10deg); 
    } 
    
    100% { 
        transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
} 
 
.flipInY { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flipInY; 
    -moz-backface-visibility: visible !important; 
    -moz-animation-name: flipInY; 
    -o-backface-visibility: visible !important; 
    -o-animation-name: flipInY; 
    backface-visibility: visible !important; 
    animation-name: flipInY; 
} 
 
.animated { 
    -webkit-animation-duration: 1.4s; 
       -moz-animation-duration: 1.4s; 
         -o-animation-duration: 1.4s; 
            animation-duration: 1.4s; 
    -webkit-animation-fill-mode: both; 
       -moz-animation-fill-mode: both; 
         -o-animation-fill-mode: both; 
            animation-fill-mode: both; 
} 
 
You know how to add this CSS in your blogger blog. Or if you don't know, then this post will help you http://www.stramaxon.com/2012/03/how-to-add-css-to-your-blogger-blog.html 
 
Thanks to Dan Eden for creating such good effects with CSS animation and transform, Here are some more animation effect on his site http://daneden.me/animate/ 
 
The first step in order to add this effect is complete, now you need to do some HTML edits to make it work. See the next step. 
Editing the HTML 
To animate the entrance of your blog's title heading, we have to edit its HTML in the template. To do that go to your Blog Dashboard -> Template -> Edit HTML -> Check mark Expand Widget Template -> Now use CTRL+F to find the following code 
 
 
<h1 class='title' style='background: transparent; border-width: 0px'> 
<b:include name='title'/> 
</h1> 
 
The code on your template might look different if you have enable background images or other settings, but the code will always contain the b:include wrapped inside it. Find it using the first few letters of the code you will find it. 
 
Now change add animated flipInY in the class attribute of the heading element <h1 class='title' the code should look like this (notice the first line) 
 
<h1 class='title animated flipInY' style='background: transparent; border-width: 0px'> 
<b:include name='title'/> 
</h1> 
Note: The HTML code is two times in the template, you have to edit both codes. 
 
Not only blog's header but you can do this for any element on your blog page just by adding animated flipInY as class name to the element.</div>

Header Animating Entrance Effect for Blogger

Not only for blogger but every one using HTML and web languages to display their blog or website. This is a small animating effect created ...

Fighting MALICIOUS_JAVASCRIPT Notice in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
There have been many cases where a user's blog got deleted because of Malicious Javascript. It's frustrating to get your blog deleted but it's just down for a review. Read why it happens and how to prevent it. 
 
 
Blogger is one of the most popular CMS and the as it's free, spammers love to target their victims using Blogger blogs. Spreading malicious software and viruses has become easy for spammers and thus blogger blogs are becoming a weapon for those evil spam spreaders. The Blogger platform was already secure as it doesn't allow the user to access server side configurations but yet the spammers can use JavaScript to trick their victim and infect their system with malware etc. 
 
Keeping all these things in mind, blogger created a better spam detection system checks blogs for JavaScripts which redirects or does any other weird tasks and take down the site for safety of the readers. 
 
I am not a spammer! Why my blog got deleted? 
The spam detection system scans the blog for any suspicious scripts which can be a possible threat and then takes it down as I already said. It doesn't have anything to do with your profile. 
 
Usually spammers add JavaScript that does a redirect to a site or link to a virus, which infects your system and can do anything the virus creator wants it to do. But recently many normal blogger users' blog were taken down for MALICIOUS_JAVASCRIPT as many users use scripts and codes from external site without knowing what exactly it does. For example, when blogger introduced country specific redirection and a blog posted a script that stopped country specific redirection (which actually redirects the blog URL adding /ncr at the end). Here's the snippet of code used : 
var blog = document.location.hostname; 
var slug = document.location.pathname; 
var ctld = blog.substr(blog.lastIndexOf(".")); 
if (ctld != ".com") { 
var ncr = "http://" + blog.substr(0, blog.indexOf(".")); 
ncr += ".blogspot.com/ncr" + slug; 
window.location.replace(ncr); 
} 
 
The blog that published this article is quite popular and many blogger users used this code to stop country specific redirection. This is an example of scripts which can get blog deleted. 
How do I restore my Blog? 
Blogger spam detection and review system has got better. It now provides option for users to submit their blog for spam review. 
 
If you see a notice for your blog that indicates that your blog has been removed, you can now take action to restore it. Blogs deleted by spam detection system now will appear in the Deleted Blogs section in the Dashboard. 
 
Log into your Blogger Dashboard -> and click on Deleted blogs on the left hand side 
 
 
All your deleted blogs will be on that page, and the blogs deleted for spam and malicious javascript there will be a Restore button next to the blog name. It will send the blog for review to Google/Blogger Spam experts. You will get the reply within 48 hours. 
 
Now beware of of JavaScript codes on the internet, not all of them are spam but before adding them check what people are discussing about it, is it okay to use or has any problem. </div>

Fighting MALICIOUS_JAVASCRIPT Notice in Blogger

There have been many cases where a user's blog got deleted because of Malicious Javascript. It's frustrating to get your blog delet...

Encrypt Your Personal Details with JavaScript

<div dir="ltr" style="text-align: left;" trbidi="on">
When you have a lot of online accounts to handle and don't have enough time to memorize all the passwords it becomes an annoying problem. What if you could save your passwords and other details in a simple text file on your PC ? 
 
That makes sense but if your PC is accessible to others it is not a good idea to explicitly save your personal account details in a text file available to every user on your PC.  
 
There are many other ways to keep your account credentials safe on your computer but they are often a folder password software or something like that, but it is a waste of time and most of the times those software are malware itself. 
 
Another option is using an encryption/decryption software on your PC but you won't be able to decrypt your details if you don't have that particular software on the other PC too. Say you downloaded the encrypted file from your Dropbox on a public PC, now to decrypt it you need to install an extra software on it, and it's not a good idea though.    
Let's Start Encrypting/Decrypting 
 
There's an inbuilt encode and decode function in JavaScript that takes in an string and output the result. The function we are talking about are btoa and atob, in JavaScript these functions are generally used for transmission of data that may cause communication problems. 
 
But I found another use of these functions and when I found myself saving my account details on my PC accessible to anyone. I then used those function to encode the details, save it in a text file and when I needed it I used the decode function. 
Open the JavaScript Console 
First we need to open the Developer Tools with JS Console in the browser. If you want to learn how to open developer tools in different browser check this tutorial.  
http://www.stramaxon.com/2013/10/developer-tools-in-browser.html 
 
If you don't want to read that tutorial then just use these keyboard shortcuts to open JavaScript console on your browser : 
Chrome - CTRL+SHIFT+J (CMD+SHIFT+J on Mac) 
Mozilla Firefox - CTRL+SHIFT+K 
Encode it first 
Finally when we have the Console open, we are ready to use it for encoding any text we like. The function that encodes any text is btoa("Text you want to encode") if you run this in your Console it will output this VGV4dCB5b3Ugd2FudCB0byBlbmNvZGU= . 
 
We now know what the function does now see how can you use it 
? 
1 
btoa("Something here"); 
 
The text between the parentheses and double quotes is the text you are encoding so replace it with your personal details you want to encode and once you run it the console will return the encoded version of it, now you can save that text in your file and no one be able to read it (if you don't have any geek or programmer kind of people near you, can be worry free). 
 
Here's a screenshot  
 
 
 
Time to Decode 
Encoding is of no use if you can't decode it for later use. As btoa() encodes a string similarly atob() decodes the encoded text. 
 
Try running this code in your open JavaScript Console 
 
atob("VGV4dCB5b3Ugd2FudCB0byBlbmNvZGU="); 
 
This will output "Text you want to encode". You use this function in the same way but you just need to pass encoded data in the parentheses. 
 
 
 
Tip: If you want extra protection, you can encoded the encoded data too but you also need to decode it the times you encoded it. 
Bonus Tool! 
 
Even before writing this article I had written a small JavaScript tool you can use to encode/decode data without worrying about the Console and function codes. Click the link below and start using it.</div>

Encrypt Your Personal Details with JavaScript

When you have a lot of online accounts to handle and don't have enough time to memorize all the passwords it becomes an annoying proble...

Add A New Year Background Image to your Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
New year is just hours away and everyone is getting prepared wish new year to their friends and family. If you run a blog it would be a good idea to celebrate new year with your readers by changing its look a bit. 
 
This new year eve, add a bit of code in your blog to wish your blog readers a happy new year. We just add a view lines of code to set a new background image with a happy new year message on your blog. 
 
It's almost 2014, so without much blah blahs, following are the wallpaper's preview and the code you need to add : 
 
 
1. Dark Brown Wallpaper 
 
 
html, body { 
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYmAglhKQ0gm9VBSZ1O6Hb6ajCmhJ3Mv4EussI2P-DdByi9n9wmsq0zAN6NCd4C3vquLaw1F8gvxl8FB_1TJ0dTAcijIcLb8k2ZfdA2N9P37XHGLTs-oxNi2KF9j-UFv6I7TgjAnjiNRg/s1600/1059-happy-new-year-1280x800-holiday-wallpaper.jpg') no-repeat center center fixed;  
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
 
 
 
2. Background with Fireworks 
 
 
 
 
html, body { 
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjxM6_HI-K-_s6KyzxA8xPaIgMnfgVPVveoavdD_dc0MALs1SE-5BavL_sQzqLbJWbPkMJ7aDI4ZWm6-69HBqz6OZx4d5LNGw0LqvvmoKdfYRvLqRDdEQxKE9w3gPk1Rge4lidui2DtGG1/s1600/1961-happy-new-year-1280x800-holiday-wallpaper.jpg') no-repeat center center fixed;  
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
 
 
3. Purple Background 
 
 
html, body { 
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsb2hsg90B1Us91_0f9g3WqXI1Qg4mlLFI1c9qKsCY5U_GTkge2KebHOHSjfPW4nm6zfOSE2MNWqsBSz_emM9OJPlGU1VjhG3lBixOzAi-ykctB8J1SqAXiyC8SMRKj_dMmeox4uDuYnAb/s1600/2084-happy-new-year-1280x800-holiday-wallpaper.jpg') no-repeat center center fixed;  
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
 
4. Classic Gold Shine 
 
 
 
html, body { 
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxfTC7b9Etwp_pWHu0jZebpD0CtN9tHr0EuNY7U9_rQN_7hv85F1CZ21gwz6zt2WnP3LQcYFQntmYp5BlDorFx-Gqfu6Rm08lMqpotthRJJ8Mm2K6AV2HRYd4TqC0z8i9XUfbpkMNn-AL/s1600/2085-happy-new-year-1280x800-holiday-wallpaper.jpg') no-repeat center center fixed !important;  
-webkit-background-size: cover !important; 
-moz-background-size: cover !important; 
-o-background-size: cover !important; 
background-size: cover !important; 
} 
 
Add the code 
 
Once you've chosen a background image that suits with your blog you are ready to apply its code on your blog. To do it, copy the code. 
 
Now go to your Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Now paste the CSS code in the text area in the "Add CSS" tab and save it by clicking the "Apply to Blog" button.</div>

Add A New Year Background Image to your Blog

New year is just hours away and everyone is getting prepared wish new year to their friends and family. If you run a blog it would be a goo...

How to add CSS to your blogger blog

<div dir="ltr" style="text-align: left;" trbidi="on">
In this tutorial you will learn how to add custom styles to your blog with CSS on Blogger. 
CSS is plays an important role in presentation of a blog or website. In Blogger users are allowed to style their blog, but if you are new to Blogger or just don't know about CSS and HTML you might find it difficult to find the right way to do it. So how do you add your custom CSS in Blogger? You will get the answer in this tutorial, for you to understand it better I have also included screenshots. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1s08sF2CNKo3JypgI5oOdYPuWeb7s5iA5SHFWAt_TFBkskwA4nCJnP12phX7dkUBL8dH2XuN9LRGDKvi8f4Uusnzy8stVvqnBsBloJ2kr0LZ9S38m0be0MtEmuIZEU5UTQv1ymRnkFA/s1600/template-editor-new-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1s08sF2CNKo3JypgI5oOdYPuWeb7s5iA5SHFWAt_TFBkskwA4nCJnP12phX7dkUBL8dH2XuN9LRGDKvi8f4Uusnzy8stVvqnBsBloJ2kr0LZ9S38m0be0MtEmuIZEU5UTQv1ymRnkFA/s320/template-editor-new-blogger.png" width="320" /></a></div>
 
There are two ways to add CSS to your blog template. I prefer to use te hEdit HTML mode, it's good for professional web designer, and I suggest to use basic Add CSS option in blogger for peoples who are new to web. 
 
There are two ways to add CSS codes to your blog template. One is using the HTML template editor where you can put the code according to your needs anywhere in the document. And other is to use 'Add CSS' GUI option provided in the visual template designer. 
 
For general users I suggest the Add CSS option as it doesn't require code editing and all, but in some cases you might need more control on how you want that CSS to be loaded (for example, if you want to load a CSS only on item pages) in such cases using the HTML Template editor is the only choice. 
Using Add CSS in Template Designer 
 
Blogger have included an Add CSS option, where you can just copy and paste the CSS styles code and it will be applied to the template. Let's see where's that option. 
 
Blogger has a rich set of template designing tool that you can use to change colors, fonts and layout of your blog without writing even a line of code. The template designer also allows you to define your own styles using CSS to apply on the blog. To access that option follow the instruction below : 
Go to your Blogger dashboard at http://www.blogger.com/home 
Now select the blog from the list (if you have multiple) and go the its Template tab on the left pane. 
 
 
 
On the Template tab, click on the button that says "Customize" and you will be taken to the Template Designer page 
Select the Advance tab from the list of options on left pane and from the sub-menu list select Add CSS, it's at very bottom. 
 
add css option template designer 
Now in right pane, there will be an input area where you can paste your CSS styles 
 
adding custom css in blogger template designer 
In this procedure you won't be able to edit the existing CSS code in your template, you will only be able to add new styles and can only edit the styles that you added using the template designer.  
 
You don't need to add the HTML elements such as <style type="text/css"></style> , we can paste the CSS styles directly. Adding those elements may result in error. 
Adding it using the HTML Template Editor 
 
You can also directly add CSS syles in your template code, but working in the HTML template editor can be difficult for users who don't have much experience with HTML and CSS. As lot of markup codes are lying there already, a general user might feel a bit unformtable, but once you start working with codes you will find it interesting. 
Go to your blogger dashboard at blogger.com/home  
And from dropdown menu of the blog select Template 
 
 
After going to Template menu, click on Edit HTML button to open the template code editor on the page 
 
 
 
Now using the default find-on-page function (by default CTRL+F ) and find </head> and paste your CSS code (inside <style>) and paste it above </head>. Do remember to include the first and last line in the following code around your CSS rule when adding it above the closing </head> tag d 
 
 
<style type="text/css"> 
/* This is a comment, and follow is a CSS rule */ 
body 
{ 
color:#999; 
background-color:whiteSmoke; 
font-family:"Georgia", Helvetica, sans-serif; 
} 
</style> 
 
 
The CSS styles are just for example. 
 
Other way 
You can paste your CSS styles by putting the HTML markup (in green) above and below your raw CSS code and then paste it above </head> in the template 
 
So now you have the idea where to paste the CSS codes in your blog. For more web designing help subscribe to our blog. 
 
Remember to Backup your template before making any changes to it. To Backup your template Go to Blogger Dashboard >> Template tab >> On top right corner there will be a Backup/Restore button and then download the template, if anything went wrong we can restore it to working template by uploading it there.  </div>

How to add CSS to your blogger blog

In this tutorial you will learn how to add custom styles to your blog with CSS on Blogger. CSS is plays an important role in presentation ...

How to select all friends at once to invite friends on Facebook

<div dir="ltr" style="text-align: left;" trbidi="on">
Facebook friend invites are useful to invite your friends to view your website or to like your new Facebook page etc. you will see friends invite almost everywhere on Facebook.   
Facebook invites are useful but a sometimes it can be a tough job if you have large number of friends, I had 2525 friends on Facebook and it was very difficult for me to select each and every friend manually to invite them all. 
 
When I started learning JavaScript, I learn how easy it was to manipulate web pages using codes and then I found a way to automatically check all the check boxes on invite boxes. 
 
But before we start, make sure you are using Google Chrome or Firefox, they are good as they support almost every new JavaScript functions and are updated, so using them makes sure that it will not create any problems. I will explain it in step by step procedures. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5Ia5OySoJfovuW2FG-s3Xo02E0jnlZ_ByW8ZGu9uilmlvqGG56wtRCIsBWCon4XnqzdH1wjg4PqJMILgjjEltWwN2fcXy04bFeiNgvrx0asWq3iU5T8mVEs3YpGquvr1iZoaDGZsp64/s1600/rfg66rfd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5Ia5OySoJfovuW2FG-s3Xo02E0jnlZ_ByW8ZGu9uilmlvqGG56wtRCIsBWCon4XnqzdH1wjg4PqJMILgjjEltWwN2fcXy04bFeiNgvrx0asWq3iU5T8mVEs3YpGquvr1iZoaDGZsp64/s320/rfg66rfd.png" width="320" /></a></div>
 
Open Google Chrome  
 
Now open any event etc. where you can invite your friends and open the friend invite box 
Now scroll down until all your friends appears in the box 
Press CTRL+SHIFT+J (for Chrome), CTRL+SHIFT+K (for FireFox) 
A JavaScript console pane should open at the bottom of the page 
Paste the following line of JavaScript code in the console 
 
Problem using Developer Tools? Check the tutorial on using Developer Tools on different browsers 
 
 
 
javascript:elms=document.getElementsByName("checkableitems[]");for (i=0;i<elms.length;i++){if (elms[i].type="checkbox" )elms[i].click()}; 
 
After pasting click enter, now wait for a minute and when all friends are selected click on send, if you have large number of friends it may take about 1 - 2 minutes for successfully sending the invites .  
 
 
Problem inviting all friends ?</div>

How to select all friends at once to invite friends on Facebook

Facebook friend invites are useful to invite your friends to view your website or to like your new Facebook page etc. you will see friends ...