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

Back up your blog before any to make any changings in the code of your template or when before you want to edit your posts. Back up your blog regulary to avoid data losing.

1. How to back up your blog:

Go to your blogger dashboard and click on Setting , click on the Export blog link.

Click on the DOWNLOAD BLOG button and save the XML file. With this your template , your posts and comments will be saved.

2. How to back up your template:

Go to your blogger dashboard , click on Layout , Edit HTML. There is a link: Download Full Template , click on it and save your template XML file. Every time when you want to change something in your template first download the XML file and if something goes wrong just uplod your template by clicking on the Browse... , select the XML file and click on the Upload button.

The second way to back up your template is to copy and paste your template code in any text editor like Notepad and save it in a .txt file. If something goes wrong when you work on your template just replace the entire code with the code saved in the .txt file.

3. How to back up your posts

You can back up your posts easily by using the BlogSend feature. To use it go to Settings , Email&Mobile , your posts will be sended to a given email adress so if you accidentaly delete one you can back up it from your email adress. Type your email adress in the BlogSend Adress textfield and click on the SAVE SETTINGS button.

Related tutorials:

Read more...

Headings are defining the size of the the text. H1 is the biggest and H6 the smallest one. The headings are important from SEO perspective, too. Search Engines like Google give more importance for H1 text, the mort important keywords are in the title of the posts so we need to use H1 for them.( The post title size is set by default to H2 or H3.) Here is how to:

1. Find the following code in your template:

<b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if>

(some templates have h2 , change the red numbers to 2 and search again)

2. After finding the above code change the red h2 or h3 tags to h1

3. If you think the H1 is too big add this CSS code before ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2
h1 { font-size:1.5em; }
(this is the size what i am using , but you can change it)

4. Save your template!
Please read my other post about optimizing the posts title tag!

Related tutorials:

Read more...