Help us to grow our blog! Contribute to our community by interacting with us and by sending us your posts about your SEO experiences or blogger template editing.
Your name with the name of your website/blog will be displayed with a DoFollow link to your website/blog at the end of your article.
You will receive some visitors from this blog. More higher is the quality of your post than more higher will be the number of visitors.

The rules - read them!

Don`t submit duplicated or stolen articles!
Don`t submit the article to other blog ,select: submit only to this blog or if you have submitted allready to another blog please don`t submit it!
Write only about thinks what you know about ,write accurate post.

How to send an article:

Send your post via email to me:

Please send your article to seo_tips_blogger@yahoo.com

Please include:

your name

the name of your website/blog

the address of your website/blog

the title of your post

the content of your post

Thanks for contributing to OUR community!

Related tutorials:

Read more...

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

WebWait is a free tool what checks the loading speed of a website or blog. The loading time is depending on many factors, like the speed of your host. If you have hosted your blog on blogger you can improve the host speed only by buying a faster host, but don`t worry , are many free ways, too. First check the loading speed of your blog, to check it just go to WebWait.com and type in your blog URL and click on the Time it! button.

The average loading time of my blog is 2.12. This is a good loading time , try to keep your loading time bellow 5s. You can improve the loading speed by removing some unnecessary gadgets and plugins. Use small images , don`t use large images scaled to a small size. Try to use a simple color as background or create a very small image and use the repeat tags. With this tool you can set the number of trials and the time between the checks. This tool shows the result of each individual check, too.

Related tutorials:

Read more...