Posted by
Herbs
| Posted on
9:51 PM
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 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!
Posted by
Herbs
| Posted on
12:36 AM
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:
or
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.
Posted by
Herbs
| Posted on
5:10 PM
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 :
Place the code right after the following line:
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: ]]>
If you don`t understand something just ask!
Posted by
Herbs
| Posted on
12:21 PM
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:
I have used full-post as the name of that div. Place the code right after the
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) This is the rest of the post. This part of the post is visible only on the page of the post.
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!
