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 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.

1. Open Google Chrome 
2. Now open any event etc. where you can invite your friends and open the friend invite box
3. Now scroll down until all your friends appears in the box
4. Press CTRL+SHIFT+J (for Chrome), CTRL+SHIFT+K (for FireFox)
5. A JavaScript console pane should open at the bottom of the page
6. 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 ?

If you are unable to invite all your friends then you must check this updated post which also has a video tutorial. http://www.stramaxon.com/2012/12/inviting-all-friends-facebook.html

Related Post: How to Increase your Twitter followers in 10 minutes

Create false Facebook wall conversation

There are many reason we should try making fake/false Facebook wall conversation, one of the most popular reason is for funny pictures, we can also edit screenshots with paint or photoshop to make conversation in the screenshot but it take a long time.

Have you ever seen a picture of funny conversation on Facebook and most of them are not real but created by editing the screenshot of any Facebook wall conversation. 

The Wall Machine is a great Facebook wall conversation generator, editing the conversation in it is easy as posting comments on a Facebook wall post so anyone who know to use Facebook wall feature can easily use this too.

After going to The Wall Machine , you have to connect your Facebook account with it and then allow the app to your desired information such as email address, friend list etc. now you should be redirected to the 'The Wall Machine' website. Now think a great funny conversation and start making a Facebook wall conversation. 

Along with Wall conversation you can create more stories like 'X' become friends with 'Y', event, like activity and more, it's a complete tool to fool your friends. 

Do more with this app

This is an list of thing you can do with 'The Wall Machine'

• Make fake conversation and fool your friends
• Add your desired photo to the profile
• Want to reorder the comments ? Just hover on right corner of that comment and click on up or down
• Make fake relationship status activity
• Save the conversation and show it to your friends
  

Related Post: Wish Happy Valentine's Day in Facebook chat for whom you love.

Go back in past of Websites

You fond some sites that are very popular, like Matt Cutt's blog and after browsing it for sometime, some thought come into your mind that how this site used to look in early days when it was new. But you can't find anyway to do it, other than asking a scientist for an "Time Machine".  

Ohh, don't worry, we have an easy way to do it. Archive.org is an website, which keeps records and archive of all online contents that went popular, all the sites are crawled by their server and saved on it, to serve people an snap shot of the website at that time.

The snapshot are not actually pictures, it's an HTML document generally used by a website, thus if an image was there on an website and later it was deleted from the server then the images won't be showed in the archive of the website. In easy words, they capture the site's HTML, and save it on their server.

You can easily check any website's past by going to Archive.org and entering the URL in this box.Enter your desired URL and click on Take me Back. Now you can select website at what time you want to see.

How to archive your blog also

If you have a new blog or website, even it's 1 or 2 year old, it will be not crawled by archive.org, if you or not anyone has searched the site on archive.org, so if you want your blog or website to be crawled by them, you or anyone has to search your blog in archive.org, after a few months your website will also start appearing on archive.org archives.

Add new handwriting fonts in your blog or website

Have you visited to a site having so much fancy fonts, but your website has simple web safe fonts. Don't worry you can also have fonts like that in your blog or website. 

To do this you need little knowledge of HTML and CSS, one more thing you need is a Google Account.


Go to Google Web Fonts , on the homepage you will see hundreds of box of words with different fonts, these fonts are a demo to show how the font is. You will see categories of fonts like Sans Serif, Handwritting etc, choose any of the categories or maybe all categories.


Now the fonts will be showed in right pane,there will be 100s of fonts free for you, you can choose any font you like, there no limit, choose any number of fonts, all fonts are free and open source. Scroll up and down and if you like any fonts, see bottom right corner of that box, there will be an "Add to Collection", just click that and it will be added in your personal gallery.

Once you are finished adding all your favorite fonts in collection, then see how to use it. Google first requires you to link a Stylesheet File, in which all your collection's styles are defined, Google will itself give you the code.

In bottom pane on right top corner you will see Use button, click on it, on that page all the fonts will you showed which you added in your collection, if you want select, or deselect by check marking the fox followed by the font name.

After sorting out which fonts you want, scroll down there will be a codebox, where the link has been given. Copy that code, now go to your Blogger Dashboard >> Template >> Edit HTML , using your browser's search feature (CTRL+F {default}) , find "</head>" (without quotes)  and paste the code you copied above the </head>, it should then look like this.

 
 

Great, now save the template (if you getting error saving template then see below section), now with help of CSS we will integrate these fonts into our blogs element, paragraphs, headers, titles etc. To integrate these files we need little knowledge of CSS, you will get the font family code on the same page where you got the link code just scroll down the page. For example, if i want to style a text with an font, then first I have to define it's class or id, to apply CSS style on it. In font-family attribute we will put the name of the fonts we selected, we will get the font-family name on Google Web fonts page.

.styletext1
{
font-family: 'Bonbon' , cursive;
}

This piece of code will apply 'Bonbon' font on an element classed "styletext1". Below is the
example of above CSS style on an element classed "styletext1"
 

"This is an example of applying font styles with CSS"

 The above text is classed with "styletext1", and when we applied the above CSS code, it turned into the font-family we specified in CSS lines. The HTML code was this.

<span class="styletext1">"This is an example of applying font styles with CSS"</span>

Learn the HTML and CSS code closely. Now try this on your blog or website and then show us in comments.
Notes:

1. Backup your template before trying this,it will be easy for you to get the old template, if you did any mistakes
2. The HTML link code Google gave, will not work in XML templates (default templates for blogger)
3. To make the link code work in XML template then please see our help section below.
4. If, you don't understand what I am saying, then please check the video.
5. Adding too much fonts will slow down your website or blog.

Help with issues

The only issue we found in this is the HTML code Google gives on Google web fonts page, which looks like this.

The problem often occurs with XML templates, by default blogger use XML templates for blogs, the main thing is that Google haven't already added the close tag, in HTML files, it will be accepted without any problem but in Blogger, you can to add a "/" before ">" in the code. After which the code will look like this.

<link href='http://fonts.googleapis.com/css?family=Bonbon|Herr+Von+Muellerhoff' rel='stylesheet' type='text/css'/>

Now Blogger template will happily accept it and you will be able to use as many fonts you wish to use. 

YouTube Tutorial video

How to fix error with x-webkit-speech in blogger

This tutorial is about fixing some known problems with x-webkit-speech attribute, this attribute is commonly used in HTML for integrating aa speech input in text-areas like search box, comments etc. 

Many people want  this feature in there blogs for either search box or other text areas, on top right corner of my blog you can see a search box which has a mic icon, click on it and try to speak something in your microphone, if you have spoken correctly, the text will appear in search box.

 

In many websites people have added this feature, and if you have searched for this too then, many website have given a way, after applying it to your Blogger template, it gives an error saying "The property "x-webkit-speech" should be followed with " =' ' " . 

Most websites provided a way to add this attribute in their search boxes or any text areas with this code

<input type="text" name="q" size="30" x-webkit-speech />   

But many Blogger user are having problem to put x-webkit-speech in any <input/> tags, Blogger  gives an error saying "The property "x-webkit-speech" should be followed with " =' ' " , and normal blogges are not too tech savvy to solve this problem.

The problem occurs whenever you add the attribute to an element, similar to this.

<form method="get" action="http://www.google.com/search">
 <input type="text" name="q" size="30" x-webkit-speech />
 <input type="submit" value="Google Search" />
</form>

For instance, i have put the attribute into a search box' HTML, this code will bring up the error you are getting in Blogger.

Let's solve the problem

The problem is that Blogger template uses XML format for template, and in XML an attribute can't be left alone, it need to have a value.So in following code I will show how to add a value in x-webkit-speech.

<form method="get" action="http://www.google.com/search">
 <input type="text" name="q" size="30" x-webkit-speech="true" />
 <input type="submit" value="Google Search" />
</form>

See the red line, I have added a value to it, now XML will not take it as an error and happily accept it.

If you still getting error please write to me on depy45631@gmail.com

"Angry birds Space" what this

Angry Birds a big name in gaming industry broken all records, if you are here then you already know what's Angry Birds is about. The game is available for Facebook,PC , Chrome Browser and Mobile Devices. It's a hit on all platforms. It's has various version available for gamers to play.The newest is Angry Birds Space. 

The above picture looks like the old Red bird, but it's different, it's a brand new bird for the new version of Angry birds.

Angry birds had an great time on earth, destroying types of enemies like pigs,monkeys etc. They now headed for the space, the new version is going to be played in space, everyone is curious about the environment and the new enemies, but I am most curios about about the new bird in above picture, that's completely looks so robotic.

It's going to launch on 22 March.

The earlier versions of Angry birds were also great, the last time Rovio caught people's attention, it was the launch of Angry Birds on Facebook,which is also a hit. Now Rovio is in the NEWS again because of their new upcoming version of Angry birds.


Fans of Angry Birds are extremely excited about the new Angry Birds, I am sure this will be going to be more thrill than any of earlier version of the game. The name is enough to make people crazy about it.

In Angry birds, the space was seen last in "Angry Birds Season" in a Golden Egg level of "Summer Picnic", but it's not important that the look and feel will be same as that, because if we see the picture on Angry Birds Space web page, we will get idea about it and see the picture of Golden Egg level in Seasons.

The tagline of Angry birds Space is "One small fling for a bird, one quantum leap for birdkind" seems very strong, this time the birds are going to be more bold than in any versions.

There are lot's of question about this version of Angry Birds, one of the most asked question is "Is this the final version of Angry Birds" , but I don't think so, they will be back again, Rovio wouldn't like to discontinue Angry Birds version, although Rovio is more famous for Angry birds, so they would not leave the game in same state, and Rovio will give us more versions of Angry birds.

If you want to keep yourself updated to Angry birds updates, then subscribe to our Newsletter, or stay connected with Angry birds Facebook Page.

A short teaser of "Angry Birds Space"

Remove Post Footer from blogger blogs

Post Footer are useful in blogs, but when you get more professional in blogging you will find that it's not important in my blog anymore,Post-footer has a share button,rating poll etc. but you can also add it later yourself if you want, most of the professional blogger has removed it and in place of it they put their own sharing buttons, which I will show in my future post. So subscribe blog with email. 

This can be easily done by CSS, a small code of CSS can hide anything on your page. This is the Post Footer

Instruction to remove it

1. First go to Blogger Dashboard >> Template >> Customize >> Advanced >> Add CSS
   
   
2. To remove the post footer we will add this small line of CSS code in the  custom CSS text area.
   
   
   .post-footer
   {
   display: none;
   }
3. Now the box should look like this. Apply it and then see your blog.

Now your blog will look more neat and clean, you can add your own share buttons and more gadgets in post footer. If you don't know how then subscribe to our Email Newsletter, on  right corner you will find the email newsletter box, enter your email and confirm.

Make good hover effect buttons

I have made the hover button already on my Contact Us page, making these types of buttons are easy today because of CSS3, when we hover on the button it expands. And that make's the button look very cool, one of my friend saw the button on my Contact Page, and asked me how to make that so I am writing a post on 'How to make professional looking hover effect buttons'. 

First we have to make a HTML DIV element,because I am making a single button (in my contact page i have used li property, because there was more than one button.) Below is the HTML code of the button. The HTML code is small, because all the designs will be made with  CSS and CSS3.

<div class="testbutton">
<a class="hupt" href="YOUR-URL">FB
</div></a>

TIP: You can give your own class="YOUR CLASS" , according to your use. You can try this code by pasting this code in notepad. Click to know how to save an HTML page with CSS link in it.

You may paste the HTML code directly into your blog any where in the HTML template code or in blog-post. Now we will define the CSS design for the class="hupt". 'Hupt' is nothing more than a unique name used to define in CSS where to put that style, so if you wish you can put any name in place of 'HUPT', but remeber you have to change the code also in CSS. See and learn more in this code. This is the CSS code, main thing to make an hover effect.

  

a.hupt:link {
color: #6E6E6E;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 white;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #F3F3F3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
border: solid 1px gainsboro;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
text-align: center;
width: 70px;
transition: width 1s;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
}

In this code you can see a.hupt:link this says what to show when 'hupt' is left without clicking or hover, all properties of  the link, like what color it should be, what should be the background, border,shadow etc. have been defined here.
To make a Good hover effect, like it's animation, the 'transition' property is the most important. Without the transition property the button will look like this. 
     

Hover me


Although the above CSS code is not only the CSS code in the script, we also have to define, when the button name "hupt" will be hovered what width it would be changed. The CSS code will define that.

a.hupt:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
width: 160px;
}

Sweet you also pasted the hover effect code in your CSS ( Know how to create a CSS file and HTML work together) but if you have blogger you can paste these CSS code by going to Blogger Dashboard  >> Template >> Customize >> Advanced Tab >> Add CSS.
Add the CSS codes in here, and then copy paste the HTML code any where in your blog or website.


Now the output will be great, If you have done all the copy paste well. See and button below.

Hover me

TIPS:
1.On the above CSS code try to make your own change, like background-color,border-radius etc.
2.You can define how much time it should take to expand by changing the 1s value in CSS code. 1s is equivalent to 1sec.
3.-webkit-, -moz-, -o-, -ms- are to define in which browser it should work, if you gave all the codes then it will work in all browsers, but some CSS3 effects don't work in all browsers, like transition don't work in IE ( Learn more about this )
4.Once you pasted the CSS codes in ADD CSS, then you can paste the HTML code anywhere and it will work, remember don't change the 'class' value, you can only change the text in it.

Remove the Navbar from blogger blogs

Navbar is an inbuilt widget for all blogs with .blogspot.com ending, Navbar is bar on top of the page having useful thing as search box, but also a feature that most of us don't like it, there's always a link called "Next Blog" which makes our blog look dull as it take our visitors to other's blog for no reason and that the thing we don't want in our blog. Don't worry, although nothing is impossible with HTML and CSS.  

Myselft I was practicing CSS and HTML5 so that's why there were no psot on StramaXon for long time, but i am back, now with touch of HTML5 and CSS3 my blog will look and work good.

Let's come on the topic, so we were on 'how to remove the navbar' .  Little Copy-Paste knowledge, that's all you need. You will understand what to do even if you don't have even 25% knowledge of HTML and CSS.

1. First, let me tell you something about CSS (if you don't know), with CSS we can design any element on HTML pages, whereas HTML are for writing text on a page, CSS is for design those text and other elements. You can give the element a class in HTML attributes for example this is a link's HTML preview :  StramaXon  this is an HTML line, but here comes the CSS, let's see how CSS will understand and design it, with 'class' there is also an alternative 'id' . In the tutorial you will see the uses of these things.    
2. I advice you to use Google Chrome or Safari always  because it's an webkit and almost all the CSS property works in it. First we have to find out what's the 'id' or 'class' of Navbar, by default it is id="navbar" , so we will remove the navbar by using this code. Copy and paste this code by going to Blogger Dashboard >> Template >> Edit HTML (remember to backup your template) Now hit CTRL+F and find  </style>  and paste the code just above it.
   
   #navbar {
   width: 0px;
   height: 0px;
   display:none;
   }
   
   
3. Once you copied and pasted the code before it should look like this.
   
4. Now save the template and check your homepage, the Navbar will disappear.

Something's wrong with Google's new 404 Error Page

Google, a huge name today, the source of all information, currently ranked #1 on Alexa, all because of it's accuracy. All workers and employees in Google must be experienced well in their field and that makes Google an internet giant.
This post is only written to send this information to Google, please share the link of this post to your blog, Google+, Twitter, or Facebook. Sharing Button Below.

From some months Google made many changes to it's look and system ,there were also some changes that were tried but not applied, although that doesn't matter. Then came the Google+ , there were beliefs that Google+ is going to be a flop, because of it's new features that can automatically link your blog or website to your Google+ profile, as it's a Google product, it's more reliable with Google.

The Error 404 page, you may be familiar with that, whenever you typed some address that's not on Google servers e.g http://google.com/stramaxon , then 'stramaxon' would be the keyword for search query, that would help user to find that page they are looking for faster.


But when the trend of change came, along with many other changes of Google home page to Google's every products like blogger,YouTube and so many other product's look changed, there was also changes made to the Google's Error 404 page, now if you enter this address in your address bar http://google.com/stramaxon , it redirects you to a generic 404 Error page, which don't have search bar, related results or any specific reasons for 'why 404 error', the page is beautiful, looks cool with that robot's cartoon.


Here's comes the main thing! above I said that Google employees are very much experience and thus they got job in Google, they believe in accuracy, but what happened when they were designing the New 404 Error page, You already have seen on the above picture what i mean to say. This is a typing mistake, which can be seen very easily after we are done with typing, like he was trying to give it a name like 'Error 404 (Not Found)!!!' but by mistake he didn't pressed the shift key for one more '!' and thus it's now 'Error 404 (Not Found)!!1' , whatever it's not a major mistake, 1 line of edit in HTML file can solve this problem.


This post is only written to send this information to Google, please share the link of this post to your blog, Google+, Twitter, or Facebook. Sharing Button Below.

Working with Google Webmaster Tools

Webmaster is a Google's product, which is free and used by many website owners to manage their site on the web, and also to increase traffic. Learn more about Google Webmaster in this post.

What's Google Webmaster

Google webmaster is a a powerful tool with which millions of web site owners manage their  

site and improve the ways your site is seen on search engines like e.g Google, Yahoo etc. 

There are numerous tools available from Google, but Webmaster is one of the most powerful tool, because it's gives the owner of the website, the power to enhance their website their shelves, it's also give you accurate information like, how many times your website get's an impression with what search terms, these information are mandatory for the owner of the site to know more about how their site is being viewed by others, the owners can then try to put those keywords more in their later posts, which will again help to list the website on Google search page when that keyword is entered and searched. It shows how much time your website link has been clicked on  searching a particular keyword, and how many impression it got, shows on how many pages that particular keyword is on. These information are very useful if you want to improve your Google Page rank.

Register on Google Webmaster

After reading the above text you are now very excited to join webmaster tools, registering on it can be easily done, all you need is an valid email id. Go to http://google.com/webmaster when you are on the page, there will be a button on top saying 'Sign in to Webmaster Tool' click on it.If you have a Google account, you can login there with your Google account. If you don't have a Google account you will be redirected to the Google login page, because Webmaster is a tool from Google, it requires a Google account to register, but you can also register there with other email providers like yahoo, hotmail etc. to create a Google account. There will be a link saying 'Sign up for a new Google account'

provide all required information you are done. 

Registered? Add a site now

To add a site in your Google Webmaster dashboard, you need to be logged in and need to have access to the server where you are hosting the website you want to Add. But if you don't have any paid hosted services, and running your blog on Blogspot or WordPress .etc , there's also way to add site to Webmaster. 

So let's see how to ADD A SITE when you have a paid domain and hosting service.

Log in to your Webmaster Tools, by going on Google Webmaster and click on 'Sign into Webmaster Tools' button on top of the page.

On the dashboard there will be a button 'ADD A SITE' on top right corner, click on it and a popup will appear.

Enter the URL of your website e.g  mywebsite.com, into the text area in the popup box and continue.

Here come's the main thing, download the file, you can find the download link on the page where instruction are given. 

Now go to your cPanel of your server, and upload the file you downloaded.

Go to the Webmaster page you opened, and click on the verify button.

For those who run their blog on blogger.

Log in to your Webmaster Tools, by going on Google Webmaster and click on 'Sign into Webmaster Tools' button on top of the page.

On the dashboard there will be a button 'ADD A SITE' on top right corner, click on it and a popup will appear.

Enter the URL of your website e.g  mywebsite.com, into the text area in the popup box and continue.

Click on Alternate methods, and check the "Add meta tag to your site's home page", I prefer this because this is the easiest one.

Below a code will appear i.e   , copy the code that you got there.

After copying the code, go to Blogger Dashboard -> Template -> Edit HTML 

Hit CTRL+F and find , and paste the code you copied just below 

Save template, now go on the webmaster page, and click on verify, it will accept the site once they found the meta tag in HTML of the webpage.
This verification method makes easy to website owner to verify their site, even if they are not too savvy in those types of thing.
Tip :- Even if you have a paid hosted service, don't bother to download and upload the HTML file to the server, instead use the Meta Tag verification.
You might also like :-

• Change of address in blogs
• Turn pictures in ASCII 
• Facebook chat valentine's day
• Oppose SOPA and PIPA
• 10 newest tips on how to improve SEO and Page Rank (new)