create a blog

Blog – How to create collapsible posts

Setting up your blogBekijk in het NederlandsSince you have managed to create your blog from scratch, you probably went ahead and made your very first post. If this was done right it appears in its full length on your main page. Congratulations! However, this may be annoying if the post is very long. Learn how to create collapsible posts with a button to ‘Read More’ right here.

Make those posts look smaller!

Once you start adding big posts with multiple pictures you might notice that your main page gets flooded and is not readable any longer. The easiest way to counter this is to make it so that your main page only shows the top paragraph of your post, and readers have to click a read more link in order to read the full post. This also adds to your page views since people will be viewing two pages now instead of one. This is the first post in the series that is going to cover something a bit harder, so we will be diving into the raw HTML code of the blog. Don’t worry, it is really easy.

blogger html templateThe first thing you want to do is backup your current template in case anything goes wrong. Log in to blogger.com, go to the template tab and click on back-up/restore template. Save it somewhere safe. Personally I have a blogbackup folder, which is used every time I make a major change to the HTML of the blog. Once you have done this, we are going to tell blogger how to handle its posts from now on in its template HTML. You need to click edit-HTML on the template page to access this. Always check the ‘expand widget’ button on top so you never miss any code.

You will be looking for a </head> tag. Use CTRL-F to find it quickly.

Once found check if there is a]]></b:skin>  tag. If there is, make sure you copy the following in between the /head and /b skin tag.

If not, you can simply go ahead and copy the following right above the </head> tag:

<style> <b:if cond='data:blog.pageType == "item"'>  span.fullpost {display:inline;} <b:else/> span.fullpost {display:none;}  </b:if> </style>

It is now time to save your template. Check if your blog still shows correctly. On the main page you should not see any difference.

Go back to edit HTML in the template, and click the expand widget button on top of your edit screen. Find the following code: <data:post.body/
Add the following code immediately after the previous line:

 <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url' target='_blank'>Read more!</a> </b:if>

You can of course type whatever you want instead of Read more! It is now time to save your template once again. You are almost done.

The final step is to add a line of code to your posts in order to tell blogger where the post for the main page should stop. You can enter this code into your post template so that it shows up automatically every time you create a new post, but I have found that this usually does not work properly when you create a complex post. Therefore, I decided to just store the following lines on a blank text-page on my desktop or wherever you prefer.

It is time to get back on topic. When you have created your post you will need to go to the edit HTML tab in your post. You must locate the last of the text you want to show on your main page and add <span class=”fullpost”> behind or below that. Make sure you allow the ending tags for the text to finish. For example

<span lang="EN-US">Once you have come up with a good topic to start a blog about, it is time to set up a basic blog. Now you may think you need to create a website from scratch or that you will need to rent server space or something, but luckily there are lots of website who accommodate starting blogger. Learn how to set up your free blog in this post.<o:p></o:p></span></div>
<div class="MsoNormal">

If this is the first part of your post in HTML, you want to add the fullpost tag somewhere under that. You will want to post it as close as the last text for the paragraph as possible, but you don’t want to separate the text from its closing tags. In this case you want to post somewhere after this sentence:

Learn how to set up your free blog in this post. There are some tags behind that however.

<o:p></o:p></span></div>
<div class="MsoNormal">

Every <tag> that starts with a / is considered a closing tag. Therefore, your fullpost tag should come after </div> since that is the last closing tag before the next opening tag. <div class….> is a new opening tag. Your final code should resemble this:

blogger. Learn how to set up your free blog in

this post.<o:p></o:p></span></div>

<span>

<div> 

Now you are really almost there. The only thing that remains is to tell blogger where the fullpost ends. Scroll all the way down to the end of the post in HTML, and add the last line. This line is </span>. That’s it, you are finished.

TIP: Make sure you add the fullpost tags as the last text edit. So first you get to make your text look the way you want it to, then you add the fullpost tag, and lastly you add any pictures etc. You do this to prevent the code from scrambling.

Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *