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 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/AVvXsEjxgiWtDpSnVIlnbxRj5tBGwR3x_GBk4t2HmYmX3bSPVyEwlnFHZCxPmt1NRd4r25zWnh12QrDfLSd6WhSsYLITT3k1PvH1egfCBYorYmU0j5ZUy4n3n0j1kW0w63laGXd0O0GpdKZzRcSL/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/AVvXsEgyyMxzi8Xig951jpgAjTxOxZY2_PN3MIPDABScAxBq1GJo3RhyYmhS04Pb_l6C7kO8lSjoVhsrktXO6PKBnKXmkaQztzZ2Y6gKw3YkeothvoJYQOiGSIuOiBZMCvquVlVk7wwOzEJOkT6I/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/AVvXsEja2oMNbpkMNm5vbUbthfuEumadpvhj4I7ujuN_v7vppSaanIZNs5RmSvRignryq0o2dN4ALjb84oMes-s_TolIgnYUChgN0sU5tbMmlJfqapQyelMOyXrrt8g8BP4N3ZU8f5q_bg9kEcWU/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/AVvXsEi0Ozjx2Bo55_eaKkr5dz_95i8rZFqpcUPfquVDLTHNrOPbDnHcijHTkrB7Xe6cuL88IorcfFsvUZf8wN6BmuM9dhtHZI39BLxIsL8mzioLulGMzoSXeGcBUj0TMT0fcSmTTj9rJz3Z5dT3/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.

That's it! And a very very big happy new year! :D

Easiest Way to Earn Money for Freelance Web Designers

If you have just entered the world of web designing it will be difficult for you to find work to earn some bucks but don't get disappointed, we have found a great way for you to earn money with your web design skills.

Internet is a great place use your web design skills and earn money from it, but finding clients is not easy as it seems. You can find a job in some local IT company etc. or start working as a freelance. Both have their own pros and cons. But if you are a person who wants to earn money fast by doing the work you like then Freelancing is the option for you.



It might be difficult for you find clients and projects on your own but if you are ready to work as a freelance then Freelance.com is a great start-point for your web design career. Unlike other outsourcing programs it doesn't require you to have years of experience in the area you want to work in.

If you are willing to work then you can start earning 100s of dollars in less than a week. Freelancer.com is a platform for both small business and entrepreneurs. The site has more than 9 Million users which makes it a great Freelancing platform.

It will take not more than 10 minutes to setup your profile and after that you will be able to bid on projects and take part in contests.

Not just web designing, from Data Entry to T-Shirt designing, it's got a large number of areas of work. 

Changes to Files not Immediately Applied on WordPress Blog

A few days ago I got a project to setup a WordPress blog on the client's website. Most of my work included editing and adding codes to re-design the look of the blog, so editing, saving and viewing is a normal process. But I found a issue of changes not updating on site immediately after I updated the files.

I have worked on WordPress many times, but this project required me to work in a different environment, by different environment I mean editing theme and other PHP files only through the WordPress interface and the Web Host was Yahoo which still provides a quite older version of WordPress for their customers.

As the primary job was designing the blog I had to edit and reload the blog page to see the changes on the live blog. Many times the changes didn't appear immediately on the blog, especially the header.php and other page template files.

While I was working on it, I didn't had much problem because of this issue but when the client tried checking the changes I made they complained about the blog not updating. I thought it was a problem with the web host but the actually cause of the problem turned out to be something else.

WP-Cache is what causing the problem

I didn't even think about it. I knew there were cache plugins for WordPress but my mind never focused on it. After exchanging messages with the client he sent me a link to a forum where the cause of the problem was mentioned and it was WP-Cache plugin.

Fixing it is easier than you may expect, just login to your WordPress Dashboard -> Settings -> WP-Cache

When you are in the settings page for WP-Cache plugin, click the "Disable it" button to disable the plugin.

Once you disable the plugin, any changes you make to your WordPress files will be immediately applied to the live site. That's a good idea when you are working on a re-design and you need to preview your changes again and again.

If it's not WP-cache..

If you don't have WP-cache plugin for your site then something else or other cache plugin is causing the problem. Look for other cache plugin for your WordPress blog, you will find all your plugins in the Plugins tab. If you find one then just disable it to solve the problem.

If it's not even a plugin then you might need more help with your blog's technical details, so it's a good idea to try WordPress Support Forum.

Hiding Newer - Older Post Links Below Posts in Blogger

The older - new post links or blog pager links are one of the most basic part of a blog. It provides an easy access to other blog posts on the blog. If you want to remove it then continue reading the tutorial.

In this short tutorial you will learn how to control the display of the three links below each posts called Blog pager (Newer - Older Post and Home link).

There can be many reasons you want the the Newer - Older post links to be removed from your blog. One can be that you are using your blog for just a single paged blog and in that case any blog pager links are not necessary.

Hiding it with CSS

The blog pager has three links Newer Post, Home and Older Post, if you want to remove only a specific link(s) I have provided the code for that too. Let's start with the code to hide the all the three links.

To learn how to add the CSS codes in your template, see this tutorial:
How to add CSS to Blogger

Hiding All Three Links

Hiding elements on web pages is not a rocket science, all you need is a small snippet of code. To hide the pager links we need this a one line CSS code

#blog-pager {display:none;}

Hide the 'Newer Post' link

To hide just the "Newer Post" link in the blog pager use the following CSS code

#blog-pager-newer-link {display:none;}

Hide the 'Home' link

Using this code will hide the Home link in the blog pager

#blog-pager .home-link {display:none;}

Hide the 'Old Post' link

And use this for hiding the "Older Post" link

#blog-pager-older-link {display:none;}

A little note..

Using CSS to hide these links wouldn't remove the links from the HTML document but it will simply hide it from view, this is easier than and safer than removing it from the root. But if you still want to entirely remove it then try this
http://blogging.nitecruzr.net/2007/08/removing-newer-post-home-older-posts.html

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

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.

JS Data/Encode Tool

Sometimes it's fun to to a work in the difficult way ;)

How to Open Developer Tools in Different Browsers

Developer tools or shortened DevTools are set of tools used for debugging web pages which is important tool for web developers and also general users who wants to inspect a page, make changes to the site on the front-end or analyse network usage by the webpage.

It is a all-in-one tool for a person who wants to learn what happening behind the scenes of a website. If you are new to it you may want to learn about, I wrote a post about using Chrome Developer Tools but if you need a more brief information about it see this
https://developers.google.com/chrome-developer-tools/

Chrome and Safari's developer tools are very much the same. But Mozilla Firefox has it's own unique developer tool set but using it is almost same as using any other developer tool.

Google Chrome

Google Chrome in my opinion is the best browser for web debugging using DevTools. DevTools are frequently updated and are simple to use.

Starting DevTools on Chrome

Starting DevTools on any webpage is very easy. There are three ways to open the console :

1. Select the Chrome Menu  > Tools > Developer Tools

2. Right click on a blank area of the page and from the list of options click on "Inspect Element" at the bottom. To inspect a particular element right click on the element and then select the inspect element option.

3. Another way to open the console is keyboard shortcut. Press Ctrl+Shift+I (Cmd+Shift+I on Mac) and the developer tools will appear.

Starting JavaScript Console in DevTools

JavaScript Console is used to run JavaScript codes on a page. It's often used to test scripts on a website to check if the code works well or not. But you can use it as a calculator or just try out JavaScript functions using it.
To directly open the JavaScript Console select the Chrome Menu  > Tools > JavaScript console or use the keyboard shortcut Ctrl+Shift+J (Cmd+Shift+J on Mac).

When the Developer Tool is opened select the "Console" tab on top to switch to JavaScript console.

Mozilla Firefox

If you are using Firefox make sure you have the latest version, as older versions don't include developer tools or if they do, they are old. Developer tools of new Firefox is way better than the older version and got some extra tools too.

Starting Developer Tools on Firefox

You can it by various ways. The most common way is to open it using Inspect Element option. Right click on a blank area on the web page and from the list options select "Inspect Element", the Firefox Developers tools will open.

Or if you can open it by going to the Tools menu > Web Developer > Inspector, this will open the developer tool in page inspector mode.

Opening JavaScript Console

Accessing JavaScript console in Firefox is similar to opening the page inspector. Open the Developer tools by right clicking on a blank area and then selecting the Inspect Element option. Now just switch to the "Console" tag on top of the dev. tools.

Or you can also open it through the tools menu. Click on Tools > Web Developer > Web Console or use the keyboard shortcut CTRL+SHIFT+K.

Apple Safari

Accessing developer tools on Safari is similar to as in Chrome. Some keyboards shortcuts might be different. Simply right click anywhere on the page and press Inspect element.

If you have any question ask it in the comments.  

Expandable Section in your Post on Blogger

Did you ever wanted to have sections inside your post body which is optional for the reader to read or see ?

In some cases you might feel need for a section of your article to be hidden and only visible when the readers wants it to be. But in basic option we get in Blogger or any other WYSIWG editor this is not possible. But wait, it doesn't mean it can't be done.

Before you proceed to the tutorial, check this demo :
Expandable Section Demo

There's nothing special, it just a hide/show box inside which you can put content of your choice. It's not something that everyone might need for their blog posts but when you need it isn't easy to find easy-to-follow instruction on the Internet so I decided to create such a box and put up its instructions for blogger.

Let's start

This tutorial requires you to work with codes, here work means just copying-pasting and editing some parts of the code. So it will be easier for you to work if you open a plain text editor like Notepad.

Including the jQuery Library

This step is optional, you might not need to perform this step if your template already has a jQuery library included. If you are using a custom designed template, as your web dev. if they've already added it. If not you may continue with the steps

1. Go to your Blogger Dashboard -> Template -> Edit HTML
2. When inside the code box press CTRL+F to open a search box
3. Search for </head> in the template
4. Once you find it in the template, paste the following code immediately above </head>
   

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

That is how you add jQuery to your blog.
Always remember to add the jQuery script code above any script (including the one I am going to provide for this widget) in the template depends on jQuery.

JavaScript/jQuery Code

The first thing you will add in the template to make our expandable section work is the code that handles it hiding and showing. It's a small jQuery dependent JavaScript code. Following is the code you need :

<script type='text/javascript'>
$(document).ready(function(){
  $(".sh-section-btn").on("click",function(){
    $(this).parent().children(".h-section-cont").slideToggle(200);
  });
});
</script>

The code above simply tells the browser to show hidden content if the "show" button is clicked, and if the content box is already visible it simply hides.

To apply this code go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F to find </body> and paste the JavaScript code immediately above/before it and save.

Adding the CSS

The event handling part is done. Now let's style our expendable box so that it looks good and the reader notices it.  Here's the CSS that styles the complete box.

/* Expandable Box CSS */

.hidden-section-container {
  background-color:rgba(187, 187, 187, 0.93);
  box-shadow:0 2px 10px rgba(0,0,0,0.2);
}

.sh-section-btn {
  font-size:18px;
  color:#fff;
  text-shadow:1px 1px 0px rgba(0,0,0,0.2);
  padding:5px 10px;
  cursor:pointer;
}

.h-section-cont {
 padding:10px 10px;
 background-color:#eee; 
 display:none;
}

If you aren't sure how to add this CSS to your Blog, check my tutorial on adding CSS in blogger.

HTML for the box

After we've got the two main things for this box we can now actually use it in our blog posts. Using it is simple. The HTML for box may contain your text or any other content you want inside it. But before we add the content let's see what's the basic HTML for this box.

<div class='hidden-section-container'>
  <div class='sh-section-btn'><span>Show</span></div>
  <div class='h-section-cont shw-box'>
    <!-- All your text/html below this -->
    
     <p>All your content here</p>
    
    <!-- All your text/html above this -->
  </div>
</div>

You don't need to make much changes to this. All you need to change is the title and the content. Let's see how you will do it :

1. Title Text - This is the text that will appear as the title of that expandable box. See the second line of the code. Change the text "Show" to anything you want as the title.
2. Content - After the line 4 you can add anything possible with HTML inside the hidden box. Add text, images, links etc. using its HTML markup.

Once your HTML for the expandable box is ready you are all set to put it in your post body. But you can't simply paste HTML code in your post editor. In order to prevent the HTML from being shown just as plain text you will first need to switch to the HTML mode in the post editor. 

Open your Post Editor, now select the HTML tab next to the 'Compose' tab to switch to HTML mode. Now you can paste your code anywhere you want the box to appear.

This is how simple it is to get such cool features in Blogger. If you face any difficulty while implementing this widget feel free to comment here or email me for help.

Creativeness with Box-Shadow CSS Property

Web technologies like HTML and CSS have come a long way and now it is now used more than just creating simple web pages.
Almost every site you see on the web is writing in HTML and styled with CSS and those languages are way very simple than complex languages like ActionScript or C++, but despite of its simplicity it can be used to create masterpiece.

Following two examples shows what todays web technologies can be used for. What we really showcase here is the use of box-shadow CSS property which is usually used to create shadows on HTML elements <-- Just like on this.

The people who wrote the property's specification may have never thought what it can be used to create. Let's take a look at the amazing.

Mona Lisa in Pure CSS

One of the most discussed and popular portrait now re-created in CSS. CSS as you know is the styling language of the web, the thing using which you  make your website fancy :)
See it in action!

Mona Lisa Painting Recreated in CSS3's Box-Shadow

Now one may think why this is so special, a little experienced Photoshop guy can make that in minutes but note that this is done using a CSS property called box-shadow , the designer who created this wrote each and every pixel of the complete photo to produce this.
Da Vinci would have loved this..

Unicode Person Pixel Art in Box-Shadow

How about something simple ? As being a 90's gamer I always had a love for pixel arts and this caught my example:

Unicode Person Example

This simple image of a cute face raising hands is also created with the same technology that was used to create the 'Mona Lisa' example. And do I need to repeat it ? It's created in box shadow!


Now if you are wondering why this guy is so excited about images created in box-shadow then read about it here and you will understand why : https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow 

Confirming Facebook Group Membership Request At Once

If you have a popular Facebook group where you receive hundreds of membership requests then it becomes a tough job to accept all of them one by one.

You may already know about the "Select All Friends" code using which you can select all your friends to invite them to a Facebook event. We covered that topic in this post:
http://www.stramaxon.com/2012/02/how-to-select-all-friends-at-once-to.html

Facebook now provides a new "Add All" function for confirming all group membership requests at once, so there's no need to use this trick/code.

I wanted to post less on Facebook's topic but as you know it's a hot topic so one in a month is not a big problem.

Anyways, let's get back to the main topic, how would you accept multiple group requests at once. Actually you can disable the approval system for group request but that will enable everyone to join the group, fake and spam profiles too. Such profiles don't target groups with approval system turned-on.

How do you do that ?

The trick is to manipulate clicks on selected buttons using JavaScript. JavaScript is webpage scripting language and you can manipulated static pages by running scripts.
But to run the script you have to open the Developer Tools in your browser, it's not present in old and even some new browsers. I recommend Chrome, Safari or Mozilla - the latest version.

Code

Update: Facebook recently changed the layout of it's group membership request page, so the old code stopped working. I have updated the code which works with the current site. Thanks to A Suzy Meow for informing us about this change.

Copy this small code :

javascript:var cont = document.getElementById('Group_member_request_pagelet');
var ul = cont.childNodes[0];
var li = ul.getElementsByTagName('li'); // iterate on this

for (var i = 0; i < li.length; i++) {
var btnCont = li[i].getElementsByClassName('rfloat');
var ancHors = btnCont[0].getElementsByTagName('a');
ancHors[0].click(); // make the click
}

The code tells the browser click on the "Add" button next to each item (membership request item) in the list.

How to use the code?

For a person not familiar with scripting consoles, it might be tough for them to run the code. I wrote a step-by-step tutorial to make it easy for you :

1. Open the membership request page of the group in a modern web browser (Chrome, Firefox or Safari)
2. To open script console on different browsers :
   
   • Google Chrome - press CTRL+SHIFT+J
   • Mozilla Firefox - press CTRL+SHIFT+K
   • Apple Safari - press CTRL + ALT + I and when the developer tools appear, press ESC or click "Show Console" button to bring up the Console window
     
     
     
     
     
   • If you still didn't understand how to use the console, this article has more for you to learn and understand how to use Developer Tools Console.
3. Once you have opened the Console in your browser, paste the JavaScript code (provided above) and hit enter. When you paste the code inside the console it would look like this (The code you must enter is not the same as shown in the picture) : 
   
   
   
   
   
4. Just hit enter and the code will start doing it's job. It will automatically click on every "Confirm" button one-by-one on the group membership approval page until the number of buttons becomes 0. 

This was it, this small block of code can save you a lot of clicks and time. That's what code are for, to make the users life easier.  But depending on the number of request it may take some time to complete its job, leave the page opened and it will keep doing its job.

This code is very similar to the code to select multiple friends at once for Facebook events but with a little modification it works like a charm on  membership confirmation.

For any queries use the comment form below :) And thanks for reading.

Why Get A Flash Free Website

Some years back, flash-based websites were a trend as web technologies were not capable of creating interactive designs so it was the only choice. But should you design your business site in Flash ?


When the web was relatively new and HTML was just used to create simple text documents then site owners had no other option to create an interactive web page so they used Flash but today when HTML5 is even capable of creating games site owners yet get Flash based sites for their business or hobby even after paying hundreds of Dollars.

But today there are many disadvantages of a flash based website especially if it's a business site. So when you hire a web designer the first thing you must make sure is if he's not doing it in Flash, and if his plans go for Flash-based site, say no to him and find a better web designer, often web design companies provide poor designs and services (not always) so make sure to check their portfolio and check if they use the new standards, you can do that by comparing some professional sites like CSS-tricks, SmashingMagazine etc. they uses some of the latest web technologies to design and develop their site.

It's often good if you hire a freelance web designer but check their portfolio too before giving them the work and money.

We were talking about disadvantages of Flash, yup, it can be really harmful to your sites in terms of search rankings and page performance. Following are some of the reason you must never get your business site created in Flash.

Not Search Engine Friendly

Flash content is not text and a search engine can just read text. So if you have your important text content in flash search engines won't be able to read it and rank your pages according to it. It's a total loss to get your website in Flash when you are trying to make it popular.

Not User Friendly too!

Flash player is not inbuilt in browser, an additional plugin is required to view flash content and when you have your complete site made in flash, an user without the plugin won't be able to see the website at all. And even if you prompt the visitor to install Flash plugin, 90% won't do it.

It does make beautiful animation but also makes the user's PC slow and sometimes lags which is not too beautiful. But today with HTML5, jQuery and CSS3 cool animations are possible without any extra plugin but with small lines of codes which is user friendly too.

Now People are used to Flash free sites

Yup, that's true, even when I am searching for something online and click on a link that leads me to a flash-based website I just feel it's better to leave the site. Not only me but most of the online traffic are a victim of Flash-phobia and that can affect your business.

Waste of Money

If you pay even $10 for a Flash website it's too much for that! One can create a flash based site with little knowledge of web languages as Flash objects are created with a tool called Adobe Flash Maker and the designer don't even have to write a single line of code to design the site body whereas designers who design sites in new web technologies writes 10s of thousands codes to make a site effective.

The Decision is Yours

We tried our best to explain your why you shouldn't pay for a Flash-based site for your business and also tried to mention their disadvantages here. Because when you are paying you must get the best, not just anything.

But the final decision depends on you and what you want. Anyways, thanks for reading, 

Google Trolls their users on April Fools day 2013

Google the Internet giant surprised their user with the launch of a product called "Google Nose". It offers the user to small what they search for but there's more for your surprise. 

Ever wanted to smell something online ? Smelling is Believing. That's the tag line of Google Nose, first when I visited the product page of Google Nose, I almost believed it's true but yet I had some doubts because the day was not an ordinary day.

Here's the page where you can try Google Nose (beta) https://www.google.com/intl/en/landing/nose/

And click the "Try Google Nose" button to try the new search feature and on the right side of the page click on smell, a dialog box may appear just click enter and you might get the smell of the thing you searched for. Isn't it awesome ? You can smell a perfume online before buying it, that's what it's made for !

But wait, did it worked ? No ? Ohh, too bad but wait, check their help page https://www.google.com/intl/en/landing/nose/help.html 

Update: Have you tried Google Maps in treasure mode ? Try it now https://maps.google.com/maps?t=8

April Fool! When Google trolls, they do it in their own way, haha.

But wait, there's more Google got for you, they won't stop now. Stay alerted this April Fools' day.



Have a great day!

Getting a Blog Address Already Taken but not Used

You all know Blogger is a free service and you need to pay nothing to get a free blog with your own unique blog address (with a .blogspot.com prefix) but not everyone's not that lucky to get their favourite blog address.
Blog address i s not a major issue but yet people badly wants their desired address for their blog. If you were not able to get a blog address because it's already taken but not used by the current owner, it's obvious to get frustrated. You want that address but you can't get it just because someone else owns it and they don't even write anything on it.

Contact the blog owner

Blogger don't delete a blog even it haven't been updated since 10 years , blogger doesn't delete a blog for inactivity. But don't lose hope you there are still chances to get the desired address. If you can find contact information on their blog, blogger profile or any other social networking site and if he/she is a friendly person you can ask him/her to transfer the blog address to your account.

But why transfer, Can't he just delete it and then I can create the blog with that address ? No! Don't do it or you will have to wait 3 months or more to get that blog address. When you delete a blog on blogger, it isn't deleted instantaneously, the user have 90 days to undelete it. So the blog address doesn't become available before 90 daysr. Read more here :
http://www.stramaxon.com/2012/07/blog-removed-url-not-available-blogger.html

And to learn how to transfer blogs between two accounts read this
http://www.stramaxon.com/2012/03/transfer-blog-from-one-account-to.html
http://support.google.com/blogger/bin/answer.py?hl=en&answer=41448

Can't contact the owner?

If there's no way to contact the blog owner you have less chances to get that blog address. Many people on Blogger Help Forum request Blogger to get them their desired blog address even if it's being used for an other blog, but blogger can't do it. Blogger can't harass owner for the blog address.

What should I do now?

I believe a blog address doesn't matter that much for a blog. You couldn't get a neat blog address like
flower.blogspot.com try something different like my-flower.blogspot.com there's no advantage or disadvantage in using any of those blog address, what readers really want is content. Read this
http://blogging.nitecruzr.net/2009/05/value-of-your-blog-is-based-upon.html

But if you still want a your desired blog address, consider buying a custom domain, which cost not more than $10 per year. Try GoDaddy, search for a domain from here



Or if you want a self hosted website, GoDaddy has those services too

Disable Left Click on Images in Blogger Posts

In Blogger, when someone clicks an image (added from blogger image uploader) in blog posts the image are opened in new tab.

This is the default behaviour of posted images in Blogger, it's specially designed for image lightbox but if the lightbox is disabled images are opened in new tabs, it's because the images you add in post editor are automatically wrapped in an anchor element with a link to the original image which makes the image a link to the its source.

There's no settings in Blogger Dashboard to turn this function on or off so you have do some extra work to prevent images from opening in new tab if it's clicked. There are two ways to do that.

Editing HTML of each and every post

When you upload a image in your blogger post the image is automatically wrapped inside an anchor tag to the original image file. That's the reason images you post on bloggers are clickable, if you remove the anchor tag, the image becomes unclickable.

Open your blogger post editor, upload an image in a blank post and then switch to the HTML mode (use the buttons on top left). This is what you will see :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznKbe8n4NWLjdnO0F8EMr_7a_cp173eTGSBxCaQqonuuqjAVEft16uWcw1iOno4VX-nTT8QZI3EZJu5rpdVOICse55G_hlrOFkdx17VATGfadfSuKSU7V4MqHsWT-bhyphenhypheneQMKL0NpwMcAl/s1600/301804_419266174773556_195336197166556_1276547_1117941733_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznKbe8n4NWLjdnO0F8EMr_7a_cp173eTGSBxCaQqonuuqjAVEft16uWcw1iOno4VX-nTT8QZI3EZJu5rpdVOICse55G_hlrOFkdx17VATGfadfSuKSU7V4MqHsWT-bhyphenhypheneQMKL0NpwMcAl/s320/301804_419266174773556_195336197166556_1276547_1117941733_n.jpg" width="286" />
</a>
</div>

Deleting those two highlighted lines (2 and 4) will do the job or in the compose mode click on the image and then the Link option on the format toolbar, it will remove the link.

But you have to do this every single time you upload an image which is a difficult and if you have hundreds of posts with thousands of images then this is going to be a boring job for you.    

The JavaScript way

With a small code of JavaScript on your blog, you can disable left click on all the images inside posts on your blog it means you don't have to edit each image to remove it's link. However this JavaScript don't remove the link from the image, it just disables left click on the images.

Adding the jQuery Library first

Note: If jQuery is already added in your template, skip this step.

Before we add the main JavaScript code, let's include the jQuery framework in the template. It's a JavaScript framework. Here's the HTML code for the jQuery framework :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

To add this HTML in your template go to your Blogger Dashboard -> Template -> Edit HTML -> Press CTRL+F (CMD+F on Mac) and search for <head> and paste the JavaScript/HTML immediately below it. It may then look like this

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
.....
........

Once the code is on the right place, click on Save Template and the first step is done. Now move onto the next step for the real action.

The jQuery Function Code

This small jQuery code disables left click on images (or anything else you want) inside the post body. So even if you have your images wrapped inside a clickable anchor link, and even if you click it, nothing will happen.

<script type='text/javascript'>
$(document).ready(function(){
$('.post-body a img:not(.clickEnabled)').click(function(e) {
    if (e.which === 1) {
        e.preventDefault();
    }
});
});
</script>

To make this code work for your blog you have to add this in the template. Follow the instruction to add it :

1. Go to your Blogger Dashboard
2. Select the Template tab
3. Click on Edit HTML and proceed
4. Now use CTRL+F or CMD+F on Mac
5. Search for </head> in the template and then paste the jQuery/JavaScript code just above it and Save the template. 

This is what the code should look like on it's correct place

<script type='text/javascript'>
$(document).ready(function(){
$('.post-body a img:not(.clickEnabled)').click(function(e) {
    if (e.which === 1) {
        e.preventDefault();
    }
});
});
</script>
</head>

Note that this will disable left click on all the linked images in post body of your blog, but if you ever want an image to be clickable then just add the clickEnabled class to the img tag. So a click enabled image should look like this (just notice the class name)

<img src='some-image.png' title='An amazing image' class='clickEnabled'/>

This will stop the code from running on this particular image, you can do this on any number of image in your posts.

Not only on blogspot, you can use this snippet of code on any website you want Wordpress, Tumblr etc. just change the selector (the .post-body a img:not(.clickEnabled) thing) but if you aren't sure about it you can contact me to know the correct selector for you site or blog. 

This code simply stops the browser from doing anything when the link images inside post body are clicked, simple, isn't it ? 



If you are facing problems implementing this code into your blog, do let us know in the comments, also remember to include your blog address with the comment. If you have any suggestions, comments are welcomed.

Open Links in a New Tab on Right Click Disabled Sites

Disabling right click on websites and blogs are not a common thing among bloggers who don't want their sites content to be copied.
Disabling right click is quite useful (but it doesn't completely stops a user from copying the content) but for the visitors it can be annoying and a very bad experience exploring a site with right click disabled.

One of the biggest problem is opening a link in a new tab. If you have a mouse with a three buttons (check if your scroll button is clickable) you can open any link by clicking on it using the middle button but if you don't have such mouse then might probably get mad and perhaps punch your monitor screen too !

But if you are here then you considered to Google a solution for this instead of damaging your PC.
   

Opening a link in new tab

Could have been easier if you had a mouse with three buttons but don't worry, I won't make you spend money just to open links in a new tab.

The easy way is to use CTRL + Left Mouse Button (LMB) and for Mac CMD + LMB (not sure - I don't have a Mac). It should now open the link in a new tab.

But if you have a mobile device then god bless you :( but don't lose hope, Google again for a solution for mobile devices.

Update: I am soon going to launch a Chrome extension that will make links on a site to open automatically in new tab on click.

For Website/Blog Owners

If you have a blog or website with right click disabled then you might place a notification box that should tell the readers what to do to open a link in a new tab.

But the better way is to add the target='_blank' attribute to your  external anchor element so it opens in a new tab by default.

And if possible, don't add any alert message on right click. Disabling right click is okay but to show an alert irritates. Check Disable Right Click Without Using JavaScript even this tutorial uses JS but not a big JS function and the best thing is that it doesn't send out any alert message to scare the right-clickers (who aren't always content copiers) but I always say that it's impossible to stop the bad-a*s content copiers to copy your content so always be ready to use the Removing Content from Google form and the best part is that human will respond to your reports!

Auto Hide Notification Box in Blogger

Notification boxes in blogs can be useful for notifying readers about something hot on your blog. But this notification box is a bit different from others, it hides automatically after a specified time.
You may find lots of tutorials about these types of notification boxes but this one is different. It hides itself after a specified time which is the best thing about this. It won't remain there on the page forever (which can possibly disturb the reader not interested in notifications).

Before we proceed to the tutorial check what you are going to add to your blog. 

Demo

Proceed to the tutorial to know how to add it to your blog.

The HTML

The first thing we need is the HTML code as always. The code is simple and you can edit its content easily to make it ready for your blog. This is the HTML snippet

<div id='float-bar' style='display:none;'>
<b class='notifyTextbld'>Notification:</b>
Hello! Welcome to our blog and blah blah blah. See this new post <a rel='nofollow' href='http://stramaxon.com'>Cookies!</a>
</div>

The box contains bold text "Notification" and below it is some message you want your readers to see. You may also include an anchor link to a post or website you want the readers to visit.

Edit the HTML

You will need to edit the text (on line number 3) to display your own message. You know how to do it, just replace the sample text with your own meaningful message. It also contains an anchor link :

<a rel='nofollow' href='http://stramaxon.com'>Cookies!</a>

If you want your readers to visit a page then you can add your own HTML anchor links or any element, you can even add images inside it.

If you are not familiar with HTML but want to add different HTML elements use the Blogger post editor to set the elements in a graphical user interface, switch to the HTML tab, copy the HTML and paste it in the third line of the HTML.

Add the HTML

To add this HTML you have to edit your template HTML so it's good to backup your current template.

We can add this HTML anywhere in the template (inside body element) but to make sure it doesn't interfere with any other element in the template it is best to add it below everything. Follow this steps to do that :

1. Go to your Blogger Dashboard
2. Click on the Template tab
3. Press the Edit HTML button, ignore the warning and proceed. 
4. Now open the in-page search function in your browser (default CTRL+F)
5. And search for </body> 
6. When you find it, paste the HTML code just above it and save the template. 

Once done, check your blog for the HTML (it might be at the bottom), it may look dull, to make it beautiful we will need the CSS. So proceed to the next step.

The CSS

Yeah, this is what gives life to dead HTML skeleton.  The following CSS will be used to style the notification box.

#float-bar {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
background-color:rgba(248, 248, 248, 0.85);
color:#000;
padding:10px 30px 30px 30px;
font-size:16px;
position:fixed;
right:10px;
top:0px;
width:500px;
border-radius:0px 0px 10px 10px;
z-index:99999;
}

#float-bar a {color:#000;}
#float-bar a:hover {color:#000;text-decoration:none;}

#float-bar .notifyTextbld {display:block;margin-bottom:20px;}

Editing the CSS

You might want to modify the codes. Edit the values in the highlighted lines.

• Line 3: This the background color of the box. Replace the value with a rgba color value (with alpha transparency) or HEX color code. 
• Line 4: This is the color of the text inside the notification box. Use HTML Color Picker to choose a HEX color code  
• Line 6: This is the size of font inside the notification box. Change the 16px to a desired value.
• Line 8: You can edit both the property name and its value. Change right to left if you want the notification bar to appear on the left side. And also you can change the 10px to a some other value, this decides how far the box should be from the position. 
• Line 9: The number of pixels you can the box to be far from the top. 
• Line 10: This is the width of the box. Change the pixel value if you want.

If you know about CSS (it's easy) you may try adding for removing properties to design your own different box.

Adding the CSS

Check this tutorial to learn how to add CSS in Blogger
http://stramaxon.blogspot.com/2012/03/how-to-add-css-to-your-blogger-blog.html

The JavaScript jQuery 

The final step is to add the JavaScript jQuery script. The script controls how the box should enter and exit. We can do a lot of things with it but for now we will just do the basic in and out stuff.

Including jQuery Library

If you already have jQuery library installed then skip this step. If not then copy the HTML line below :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

To add this in your template : Go to your Blogger Dashboard -> Template -> Edit HTML -> Search for </head> and paste the code just above </head> and save the template.

Now you may proceed to the next step.

The jQuery Script

This is the script you need.

<script type='text/javascript'>
$(document).ready(function(){
$('#float-bar').slideToggle(445,function(){
$(this).show(function(){
setTimeout(function (){
$('#float-bar').slideUp(445);
},5000);
});
});
});
</script>

You don't need to change anything in this script expect the number of seconds you want the notification bar to stay on the page.

The line number 7 contains a number value 5000 which is the number of milisecond after which the box will disappear. 1000ms = 1sec, so just change the value to set a different time for it to hide. If you want the box to stay on the page for 20 seconds you may change the value to 20000

Adding the Script

The procedure to add the script is same as adding the HTML in the body. To add it go to your Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F and find </body> in the template and then paste the jQuery code just above </body>.

Showing it just on Homepage

You might not want this notification bar everywhere so the question how do you set it to just display on homepage, post pages, or an index page and archive pages.

The best way to do this is to use Blogger conditional tag (which works on the backend) which will make the box render only on the page type you specify.

The code we will need is this

<b:if cond='data:blog.url == data:blog.homepageUrl'>
//The HTML/JS/CSS or any code you want.
</b:if>

Replace the 2nd line in this code with the HTML code of the notification box and then add it to your template as instructed in in the tutorial. All we did is added the <b:if> conditional tag around the HTML code provided in the tutorial.

Now check your blog for the new notification bar. How is it ? I hope you liked it but if you found any error in the code then do post it in the comments. Thanks.

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

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

Tell us how did you like this effect in the comments. 

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

Adding this HTML line in your webpage should now render a hover effect button just like on my site. If you found any problem, please post it as a comment. 

Note: The button is using CSS3 gradients to create this effect and it's a new technology so it wouldn't work the same on all browsers.

Full Page Background Image in Blogger

Many people wants a full size background image for their blog which is not possible with the basic options provided in Blogger's template designer. But it is possible in blogger with some CSS lines.
Blogger does provide hundreds of customization options in template designer to design the template of a blog in a graphical user interface and it's very easy to use to especially for normal users who don't want like to work with codes to design their blog. But it doesn't however provide all the options for design so the only way left is using CSS manually.

Background images in blogger blogs can be changed and customized from the template designer but the options for background image is limited and you can't make much changes. Many blogger users want their blog to have a full sized background image that covers the complete background. Before you proceed to the tutorial, check how it gonna look.
   
Preview Demo Download Files

Tutorial

Doing this is very simple, just a small CSS rule needs to be added to the blog but before that you have to do some basic changes in your template to make sure no current CSS rule will override the new style.

Uploading a full size image

The background image you want to use as a full page background should be large enough to cover the entire viewport without getting pixelate. The image shouldn't be too large to be used on a web page and not even too small to be used for a full size background, it should be around 100kb - 150kb.

The CSS

This CSS adds some advanced background image properties that makes the full page background image possible. This is the CSS

html, body {
background: url('bgimage.jpg') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Just change bgimage.jpg with the URL to your background image. It's the only change you need to make in the code. Now proceed to the next step. 

Adding the CSS to blog

The final step is to add that CSS in your blogger template. To add the CSS, follow the steps :

1. Go to your Blogger dashboard
2. Select the Template tab
3. Click on the Customize button to open Template designer
4. Navigate to Advance -> Add CSS 
5. Paste the code in custom CSS box and click Apply to Blog

Now check your blog for the change. If it didn't worked try clearing your caches and then refresh your blog using CTRL+F5 or try adding the CSS directly in the template. 

Thanks to Chris Coyier

I would like to thank Chris Coyier of csstricks.com for sharing this CSS snippet. If you want to learn CSS and web designing in a fun way then his website is perfect for you. 

Thanks for reading this and if you got help, please consider donating us some pennies to keep this blog running :)