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)