How to Change the Backgrounds of New Blogger Templates

Tweet

 

The new Blogger templates are somewhat different from the older ones. In the older templates you would change the background in the Edit HTML section of your template, under the body {. If you are using a new template you can change it though the template designer.

1. To change the background of a new Blogger template to a custom design you need to go to Design --> Template Designer --> Advanced --> Add CSS.

2. Once you are there you need to insert a code like the one below:

.body-fauxcolumn-outer {
background: url(http://www.example.com/image.png)PV RV;
background-attachment: AV;
}
.body-fauxcolumn-outer div {
background: none;
}

RED: This is the image URL.
BLUE: This is the positioning variable.
CYAN: This is the repeat variable.
GREEN: This is the attachment variable.

Now I am going to explain the variables and their purpose.

Positioning Variables (PV):

This is the position of the image in relation to the center of the element (in this case your whole screen). You can use any one of the following variables:

* top left
* top center
* top right
* center left
* center center
* center right
* bottom left
* bottom center
* bottom right

Repeat Variables (RV):

They specify how the image repeats itself.

*repeat (Repeats Y and X also known as tiled)
*repeat-x (Repeats Horizontal)
*repeat-y (Repeats Vertical)
*no-repeat (No repeat)

Attachment Variables (AV):

They specify whether the image moves with the screen when your scroll or whether it stays in place.

*fixed (Stays in place)
*scroll (Scrolls with screen)

3. After you are done the code may look like the one below:

.body-fauxcolumn-outer {
background: url(http://www.example.com/image.png)top center repeat-x;
background-attachment: fixed;
}
.body-fauxcolumn-outer div {
background: none;
}

Note: Some newer templates may have conflicting elements that may cause the background to not work as planned.

Here are a couple of templates that need different code from the one used in the instructions.  If you are using one of these template you may have to insert the codes below.

Watermark 3 Template:  (grassy background image)

.main-cap-top .cap-left {
background: none;
}
.main-outer {
background: none;
}
body {
background: none;
}
.main-cap-top .cap-right{
background: none;
}
.body-fauxcolumn-outer {
background: url(http://www.example.com/image.png) PV RV;
background-attachment: AV;
}

Simple Template and  Watermark Template:

body {
background: url(http://www.example.com/image.png) PV RV;
background-attachment: fixed;
}
.body-fauxcolumn-outer .cap-top {
background: url(http://www.example.com/image.png) PV RV;
background-attachment: fixed;
}

The positioning variables and repeat variables must be the same for both. The attachment must be  set to fixed.  You don't necessarily have to follow this, and you can use 2 different images for a custom design. However, this is what I had to do to get a single image to display correctly.

That´s all!

Good luck!

Blogger Tweaks: Different Layouts On Different Pages Of Your Blogger Blog

Tweet

 

This neat little tweak is similar to the  Hide Widget/Gadgets tweak I posted a couple of weeks ago – only with this tweak you can change the layout, the background, or pretty much whatever you want. This is more of a tutorial then just a copy and paste tweak because every template is different and I cannot give you a universal code that will work for everything. Instead I am going to walk you through this tweak and show you how it works. Should you encounter any problems just drop me a line in the comments.

1. Go to Design --> Edit HTML.

2. Search for (CTRL+F opens up a text bar where you can insert the code you are looking for):

</head>

3. Directly before that tag you will want to insert one of the codes below, depending on which pages you want the layouts to be different on. (These codes are called „Conditional“ tags.)

Homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Post Pages:

<b:if cond='data:blog.pageType == "item"'>

Static Pages:

<b:if cond='data:blog.pageType == "static_page"'>

Specific URL:

<b:if cond='data:blog.url == "Blog Post URL"'>

Make sure to replace the text in blue with the URL of the post of your choosing.

4. Now you need to add a style tag and the CSS rules you want to change after the line(s) of code you just added.

Example:

<b:if cond='data:blog.pageType == "static_page"'>

<style>

body { background:url(Image URL);}

</style>

</b:if>

I colored everything so I can break it down for you more easily. The line in green is the Conditional tags code. It needs to be closed with a </b:if> tag. The line in orange is to designate a CSS rule followed by a closing style tag.  The line in red is the CSS rule its self. You can add multiple CSS rules between the style tags.

Something like the code above would change the background for the older templates. For newer templates you will need to use a different code (you will find it in my next post).

Lets say you are using an older template and you want the layout for the static pages to differ from the rest of your blog.

<b:if cond='data:blog.pageType == "static_page"'>
<style>
body { background:url:(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)repeat fixed center center;}
#sidebar-wrapper { display: none;}
#main-wrapper { width: 700px;}
</style>
</b:if>

With the code above you would change the background, the sidebar and all its gadgets would be hidden, the main blog post area would be wider to fill the space for the hidden sidebar. All this would only take place on the static pages, the rest of the blog would appear as normal.

The possibilities for what you can do are endless. I might suggest experimenting with it on a test blog before applying it to your main blog. If you have knowledge of CSS then you can figure it out pretty easily. On the new designer templates it might be a bit more difficult to do, but it all works the same. You just need to figure out the CSS rule to add.

That´s all!

Good luck!

The Conditional „Else“ Tag Explained (Layout Basics)

Tweet

 

The „else“ tag is a useful addition to your normal conditional tags. It is used to display different content depending on wether the conditions are met or not met.

The basic syntax for using the „else“ tag:

<b:if cond='condition'>
   [content to display if condition is true]
<b:else/>
  [content to display if condition is false]
</b:if>

Red is the condition to follow.
Orange is what happens if condition is met.
Green is the else tag.
Blue is what will happen if the condition is not met.
The tag at the end closes this group.

Here is  another way to look at this:

Monday - Friday
Store Hours:  10am – 8pm
All other days
Store Hours: 12pm-5pm

The condition is „Monday through Friday“
What happens is „The store is open from 10am - 8pm"
If it is not Monday - Friday
It is open  from „12pm - 5pm“

Here is a practical example of the „else“ tag that you can actually use:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Blog1 {background-color: red;}
</style>
<b:else/>
<style>
#Blog1 {background-color: green;}
</style>
</b:if>

With the code above I am stipulating that the background color of the Blog1 gadget is red on the homepage and green on all other pages.

That´s all!

Good luck!

 

Related post:

Conditional Tags Explained (for Blogger)

How to Hide Widgets Gadgets in Blogger

Tweet

 

By default your widgets/gadgets will show on every page in your Blogger blog. If you don´t want that you can use this neat little tweak to dictate the page(s) the gadgets will display on.

I used to use a code similar to the one you will find on other tutorial sites with this same tweak, but then I noticed a flaw in that method. The problem was that, even with the tweak applied correctly, a small amount of the gadget still remained. Although the problem was only noticeable in some of the templates, I decided to change the tweak to remedy this. My method is a little more complex then other methods but it is the only way I could find to fully remove the gadgets.

1. Locate The Widget/GadgetID# (Remember this for later) [For instructions on how to do this go to the bottom of this article.]

2. Go to Design --> Edit HTML.

3. Search for (Ctrl+F)

</head>

4. Just above the </head> tag in your template place your Conditional Tags codes.

5. Depending on the condition you used, the code you created will look something like this: (In this example we will dictate the styles only on the homepage.)

<b:if cond='"data:blog.url == data:blog.homepageUrl"'>
<style>
<--CSS rules to be displayed on homepage only -->
</style>
</b:if>

6. Replace the blue text with the following code:

#Widget/GadgetID# {
display: none;
position: relative;
bottom: 99999px;
}

7. Replace the red text with the Widget/GadgetID#  you attained in section 1.

When you´re done it should look something like this:

<b:if cond='"data:blog.url == data:blog.homepageUrl"'>
<style>
#HTML1 {
display: none;
position: relative;
bottom: 99999px;
}
</style>
</b:if>

There is only one small issue with doing it this way. If you´re using a homepage conditional tag then it will remove the gadget from your Page Elements as well.  You can however edit the gadget if you need to from the tools on your site on the pages it still displays on.

Even with this method you may end up with a little spacing issue from the gadget directly below the one that is no longer displayed In most cases this is unnoticeable and not a problem. If you do want to remove this as well then keep on reading.

To remove the spacing issue you just need to add in a CSS rule for the gadget below it as well.

Optional Steps:

1. Locate the Widget/GadgetID# for the gadget directly below the gadget you just hid.

2. Place the colored code  into the code you just made. This needs to be done exactly as shown below:

<b:if cond='"data:blog.url == data:blog.homepageUrl"'>
<style>
#HTML1 {
display: none;
position: relative;
bottom: 99999px
}
#Widget/GadgetID# {
margin-top: -10px;
}
</style>
</b:if>

3. Replace the orange code with the Widget/GadgetID# you just attained in section 1 of the optional steps.

P.S.: You may have to adjust the green text to get the spacing just right.

How to Locate Widget/Gadget IDs

A. Go to Design --> Page Elements.

B. Click the Edit Option on the Widget/Gadget.

C. Once the Widget/Gadget Opens you should see something like this:

The section in red is the Widget/Gadget ID#.

For the gadget here the ID is LinkList1.

This is case sensitive, so copy it just as you see it.

That´s all!

Good luck!

How to Add Different Meta Tags to Different Blog Posts in Blogger

Tweet

 

Adding Different Meta Description Tags to each and every post will make your Blogger blog stand stand out in the Search Engine Result Pages (SERPs). In WordPress there are quite a few plugins available that will automatically add meta descriptions to each and every post by extracting some information from the post. Unfortunately, this easy solution is not available for Blogger blogs. Butthere is a neat hack that allows you to add different meta tags to different Blogger posts. Bad news: You will have to do it manually.

What’s the actual use of adding different meta description tags to different Blogger posts?

Even though Google and Bing (and Yahoo to a lesser degree) do not consider the meta keyword tags, the description tag is used as a snipplet which will be displayed underneath the title of your blog in SERPs. It is very good for SEO (search engine optimization). Actually, the description tags tells the search engine spiders what your page is all about… but, using the same meta description tags on all of your blog posts reduces the search engine rankings and, as a result, the traffic a little bit.

On the other hand, adding different unique meta tags to different blog posts will make them unique and allow the search engines to know more about your individual blog posts and make them crawl and index your pages better.

How to add unique meta tags to each and every blog post

With this tweak you can dictate the meta tags for specific post within your Blogger blog. However this can be quite labor-intensive for those of you who are frequent bloggers. It will dictate the meta tags between pages in your blog but the value of meta tags has decreased over the years. As I stated above, meta descriptions are still used by all search engines, but meta keywords are no longer used by most major search engines. Its still a good idea to place meta keywords within your blog because some smaller search engines may still use them.

1. Sign in to Blogger. Go to Dasboard --> Design --> Edit HTML.

2. Find the following code (it should be near the top of the HTML of your template):

<head>

3. Directly below it place one of the following codes. These codes specify what pages the meta tags will be used for. These tags are called  „Conditional“ tags.

Homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Post Pages:

<b:if cond='data:blog.pageType == "item"'>

Static Pages:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Specific URL:

<b:if cond='data:blog.url == "Blog Post"'>

For a specific page just replace the blue text with the URL of the page you want it to be displayed on.

4. Now you will need to enter your meta tag code below that. After you are done with your meta tag code you need to close the code with a  </b:if> tag.

After you are done it should look something like this. (This is just a simple meta tag code. You can use your own meta tag code if you like.)

<b:if cond='data:blog.url == "Blog Post or Label URL"'>
<meta content='YOUR META DESCRIPTION' name='description'/>
      <meta content='YOUR META KEYWORDS' name='keywords'/>
<meta content='YOUR NAME' name='author'/>
</b:if>

Just make sure to fill in the color text with what its asking for. Also the keywords need to have a comma and space after them. Beware of what characters you use within your meta tags because Blogger may reject them.

You can check to see if its working by going to Meta Analyzer and inputting the post URL as the link to analyze.

Good luck!