Change the background of your blog to any color you want, or even change the color with an image. First you need to understand the structure of your blog template. The header, the sidebar, the posts and the footer are in the outer-wrapper. The rest of the page is the body. Changing the background color of the body will change the background of the outer-wrapper, too, but the background of the outer-wrapper can be changed separately ,so it`s possible to use different backgrounds for the body and the outer-wrapper.

1. First let`s change the background of the body: Go to Layout, Edit HTML Find the following code:

body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }

Look for the line what i have marked with red, the rest of the code may be different.

Replace the background:$bgcolor; tag (this may be different, just look for the first part of the code: background:) whit one of the following codes.

1. Use a color:

background:#000000;

or

background:rgb(0,0,0);

Here is a list of HEX and RGB colors to use.

2. Use an image:

background:url(http://the-url-of-the-image.jpg);

2. Now let`s set the background of the outer-wrapper:

Find the following code:

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Search for the first line of the code , the rest of the code may be different.

Now just do the same as at the body.

And don`t forget to save your template.

Related tutorials:

Read more...

In the first part of this tutorial I had explained how to add a the button after every post. Now I will show you how to show only a selected amount of text as a teaser from your posts. With this method you will need to select the amount of text to show for each post separately. If you Google for it you will found some automated methods but these are not working well, so it`s better to select the amount of text on your own, because you can select the most interesting part of your posts.

The concept of the code is very simple. The content of the post is placed in a div ,but without the select part of the text. The display of that div is set to hidden, so on the main page of the blog is visible just that part of the post what is not in that div. The full post is visible only on the post page. Here is the code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#full-post{display:inline;}</style>
<b:else/>
<style>#full-post{display:none;}</style></b:if>

I have used full-post as the name of that div. Place the code right after the <data:post.body/> line.

Save your template and now edit your posts in the following way:

This is the first part of the post , the teaser (the part of text showing up on the main page of the blog) <div id="full-post"> This is the rest of the post. This part of the post is visible only on the page of the post. </div>

The red marked code snippets are the starting and the ending tags of the div called full-post. Place these tags in each of your posts in the same way as in my example.

NOTE: Don`t forget to close the div tag! If you don`t understand something just ask!

Related tutorials:

Read more...

A Read more... button is very useful if you have very long articles, because you can select the amount of text from the beginning of the post to display as a teaser. This post is the first part, in this post i will show you how to design your own read more button, because a stylish button is always better then a simple text link.

1. First we need an image to use as background for the button. I will use this image as example:

Please don`t use my image, try to create your own with any image editor program like Photoshop or even with Paint.

2. Now we need to place a code snippet inside of the template code :

<b:if cond='data:blog.pageType != &quot;item&quot;'> <div id='read-more-button'><a class='read-more' expr:href='data:post.url'>Read more...</a></div></b:if>

Place the code right after the following line: <data:post.body/>

This code snippet will place a simple Read more... link after all of your posts.

3. Now we will add some CSS code to customize the button:

#read-more-button {

background-color:white;

background-image:url(http://i645.photobucket.com/albums/uu178/coolboycsaba/read-more.png);

height:33px;

width:133px;

padding:2px 0 0 0;

background-repeat:no-repeat;

float:right;

}

a.read-more {

color:white;

font-size:18px;

color:white;

font-weight: normal;

margin:0 0 0 18px;

}

This is the code what i have used for my button. The first part of the code is responding for the button ,the second part for the text of the button. The height and width tags from the first part of the code are defining the size of the button, use the size of your image. The padding is the distance from the button and the objects around it. The first number is defining the top margin, the second number the right margin, the third is number the bottom ,and the last number the left margin. The padding is defining the space between the text inside the button, the values are the same as the margin. Place this code right BEFORE this code: ]]></b:skin>

If you don`t understand something just ask!

Save your template and read the second part of the post: How to add a read more button to blogger posts -part 2

Related tutorials:

Read more...