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

Retrieve Blog Posts from Old Deleted Blogger Blog

You had a blog some years back but then you deleted it, now you want to save those memories but the problem is you can't access the blog as it was deleted, so is there any way to retrieve those blog posts ? Yes it is and in this post I will tell you how.
It happens, we realize the importance of old memories later and then we want it back without any idea of how to get it. Many people use blog as their online public diary (sometimes private) to write about their daily experiences and memories but sometimes you feel that you don't need it anymore and some years later you want your old memories back, all the blog posts you posted you want it back, but the bitter truth will be that you deleted it and have no longer access to it.

Note: Google Reader will be discontinued from 1st July. Without Google Reader this trick will be ineffective. Make sure to backup your Google Reader content here

Enough discussion about the case, coming to the main topic, questions arises that how would you retrieve it the old posts ? Read further to know how

Retrieving back the blog contents

Every blogger blog has it's own feed URL and it's stored automatically on Google's server whenever you post it but when the blog get's deleted, you can no longer open the feed URLs but there's another way to do it :

Use Google Reader

Google reader is activated for every blogger blog by default and the posts fetched from the feed URL and are stored on your account. The most amazing thing about Google reader is that it doesn't delete the post even tough the blog is no longer online or has been deleted.

It's extremely easy to restore contents from your blog using Google reader, just follow these instructions  :
Login to your Google Reader (https://www.google.com/reader/) using your Google Account user details.
Now we need the feed links to access the blog's feed using reader and the feed link is

https://www.google.com/reader/view/feed/http://yourblog.blogspot.com/feeds/posts/default

I am sure you know what to change in the URL, the blog address! Ofcourse, if you want it to redirect to your blog you have to put in the correct URL. For example, if my blog address is http://stramaxon.blogspot.com my feed URL for Google reader should be

https://www.google.com/reader/view/feed/http://stramaxon.blogspot.com/feeds/posts/default

Now copy and paste the URL in your browser's address bar and Google reader page will open with all your post feed from the blog address you provided. Your old memories are back, yay!

Get XML version of your blog feed

Using Google reader you can also retrieve the blog's feed in XML format, it's not human readable but you saving those XML files on your computer you can view it offline using an XML file viewer. It's very useful if you want to transfer all those blog posts to a blog. Let's see how can we do it :

It's same as fetching the post using the feed URL on Google reader, this is also done by using reader but we will access the atom feed of the blog. The URL is:

https://www.google.com/reader/atom/feed/http://yourblog.blogspot.com/feeds/posts/default?n=1000

Just remember to change yourblog.blogspot.com in the address to your blog address.
The n parameter at the end of URL tells the server to return the number of posts defined, in this case it's set to 1000, but if you had more post to restore than that change it to a desired value.

For example I want to retrieve about 200 post from my blog stramaxon.blogspot.com, the URL I need to use would be

https://www.google.com/reader/atom/feed/http://stramaxon.blogspot.com/feeds/posts/default?n=200

Change the URL so it redirects to your blog's feed and load it into a browser, you will see a page with XML markup, right click on the page and click "save as..", save it on your computer as an XML file.

Import it to a blog

These XML files are very useful, you can import it into another blog. To do it in blogger, follow these steps :

1. Log into your blogger account 
2. Use the dropdown menu next to your blog title and go to the Settings menu
3. Go to the Other tab under Settings 
4. On that page, click on Import Blog under Blog Tools
5. A popup box will appear, click on Choose/Browse File and browse to the XML file you downloaded and click Import Blog to upload the file. 
6. Great! Now all the post in that XML file would be uploaded to the blog and you can publish it all with one click. 

It was that easy! Now you know how to restore deleted posts. 

Placing Ads Inside Blog Post Without Affecting SEO

Normally website owners place ads in sidebars, header and/or footer but placing it inside the main article can  boost up your earnings but if is it safe to do that ?
The main content of your blog is the article and that's what the visitors come to see on your blog and placing ads in between the main article can give you a better CTR and better CTRL means more revenue, yup it's a great idea to put ads there but the question is, will it affect the blog's search engine rankings ? Yup, it can. If you put static ads (without JS) then it would affect the rankings and the way Google and search engine views your website, what happens is that the search engine would think that the ads are a part of your main content and it can lead to a complete misunderstanding.

How to make it better?

It's very simple, all you have to do is wrap the ad code in a <aside> like this:

<aside>
//Your Advertisement Script Here
</aside>

Now even being inside the article container it will not be a part of the main flow. For contents that's related to but not the part of the main content use this tag to make Google and search engine understand your content more efficiently. It's a W3C recommendation http://www.w3.org/wiki/HTML/Elements/aside

Where else I can use it?

According to the specs you may use it for content that's related to the main flow but considered separate from it. It includes advertisement (already resolved), related post links, author info, navigation menu i.e breadcrumbs links etc.

It's not only important for search engine optimization but also improves the document layout of your website.

I want to know more about it

Great, there are lots of resources online you may find helpful.
https://developer.mozilla.org/en-US/docs/HTML/Element/aside
http://html5doctor.com/understanding-aside/

Subscribe our blog if you want to see more posts like this :)

What Happened to GFC Follower Gadget Blogger ?

If you recently made changes to your blog and removed your good-old Google Friend Connect follower widget, you might be having problem adding it back, but what really happened to it ?
After the launch of Google+ many Google services including blogger changed to adapt G+ integration and most of the changes were great, new G+ profiles were launched to replace Blogger profiles. But recently blogger added a new Google+ Follower Gadget which is to replace the GFC Follower gadget, as the social networking site by Google is trending a follower gadget by G+ can help you get lots of followers, as it is easier to follow a blog as compared to GFC but yet there are many fans of the old but gold GFC widget who want it.

Some months back GFC was retired for non-blogger sites and the GFC seems missing from blogger gadget list, looks like the G+ Follower gadget took it place but that's not the truth. You can use both G+ and GFC follower widget altogether in your blog, the Follower gadget haven't been removed it's still in the gadget list but in a different section.

Add Old GFC Follower gadget again ?

To add the old follower gadget again go to your Blogger Dashboard -> Layout -> Add a Gadget -> On the gadget list click 'Add More Gadget' on the left side. You will now find the GFC Follower gadget there, click on it's link and add it to your blog. Check the image below for reference

The Thriller Template - Premium Blogger Template for free

Some months back I published a search engine friendly blogger template, which is a Wordpress class template and was premium too.
Do remember, that the template I am going to giveaway for free was a premium template. The reason I am giving it for free is that many blogger users, who weren't able to spend money on templates wanted it for free.

The name of this template is "The Thriller Template", yeah, it's thrilling and don't look like a dull blogger template. Not only it's good with the looks but also for search engine optimization, the process of creating this template wasn't limited just to designing the front-end look, the work was divided into two parts, one was to design it's look and other was to optimize it for search engine and yes, hours of our hardwork will give you an instant ranking on search engines.

Features

Note: Search engine optimization in templates is not considered as a feature.

The list of features of this template is long and we have previously listed it on this page 
http://www.stramaxon.com/2012/07/listverse-template-blogger-seo-friendly.html

Search Engine friendly, how?

There's no magic charm to make a template or layout search engine friendly, what we do is learn how search engine works and set the layout according to webmaster guidelines by Google. It includes using the correct heading tags for post titles, limiting the number of particular heading on a page and placing ads at it's correct place.

It is believed that WordPress blogs are better in terms of search engine optimization, but did anyone tried to know why ? It's because of there huge theme store where themes are kept up-to date according to the current web standards, there's no other reason, rest depends on your content. So even you using a template on your blogger with latest web standards used into, you can make your blog show up great on Google, Yahoo and other search engines. 

But we are bringing all the benefits to you for free. Here are the links to download it.
Thriller Template - Server 1 Thriller Template - Server 2


If you find any broken links or bugs in the template, report it in the comments.

Troubleshoot: No "Choose Files" in Image Uploader on Blogger

No "Choose Files" button appearing in the photo upload option in blogger ? It's a known issue and be fixed.

The new Blogger interface has many bugs and don't work properly with older versions of browsers and many functions in it are difficult to use. Recently blogger users are having difficultly in uploading photos to their post because of no "Choose files" in photo upload options.

What's the use of blogger if we can't even upload photos ? This is a frustrating problem but don't worry it can be fixed easily, there are two ways you can continue uploading pictures on your blog.

Use a new Browser

In this case the problem is with the browser, if you are using IE < 8  then try a newer and updated browser like Google Chrome. Download and install it here http://google.com/chrome

There's no such problem in blogger on Google Chrome so you can now upload your pictures again.

Use the Upload in HTML mode

Don't want to switch to another browser ? No worries, you can still upload photos with a more basic upload interface that might work in IE too. In the blogger post editor you have two accessible mode Compose | HTML switch to HTML mode and upload image from there.

Thanks to Katney and DarkUFO https://productforums.google.com/d/topic/blogger/4a7yTDWv8Vc/discussion

Note: This problem is reported to Blogger Engineers and they will soon fix it.

JavaScript 'Unexpected Token ILLEGAL' Error

Some errors in JavaScript are hard to find out and this is one of them, 'Unexpected Token ILLEGAL' message on your console can make you go crazy and re-check the code but if you didn't solve the problem read the post.

What can be worse than getting an error after writing a long JavaScript code ? 'Unexpected Token ILLEGAL' error is a frustrating one, it's often caused by an invalid character in the script. Most of the times you will find the unwanted character after thoroughly checking the script and then error is fixed but many times finding that unwanted character becomes a headache and to fix it we have to do something else than just checking the script again and again.

If you didn't find any invalid character in your code then it's obvious that the character is an hidden character and your are a JsFiddle fan. The invalid hidden character can be u200b (zero width space) or other hidden characters but how to find or fix it ? Good question, as the characters aren't visible how could we remove it ?

Removing whitespace in the code

If you want to fix it fast then the best way is to remove all the whitespace around and in the code and then run it. 

Testing your script with JSBin

If you use JsFiddle or some other code editing site/program which don't have support for ignoring or displaying invalid characters then this might always happen.

To check the code for an invalid characters use JsBin to find the invalid characters and remove it. Go to JsBin and paste your script in the left panel now your invalid hidden characters will be displayed as red dots, just remove those red dots and done, the code is now ready to use.

See this image :

To prevent it in future don't copy and paste the codes from JsFiddle or any other program that creates invalid hidden characters.

But there can be more reasons for this error and if you find one please tell us in comments.