Tag Archives: Blogger

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!

create a blog

Blog – Setting up your blog easily in blogger

Setting up your blogBekijk in het NederlandsIn a previous post we discussed how to find a proper topic for your blog. 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.

Setting up your blog

For every starting blogger I would definitely advice blogger.com. This is a free website that enables you to start blogs with a powerful editing tool, but also a very clear and easy to use user interface. The first thing you need to do is either log in to your Google account on blogger.com, or create a new account. When done, you simply log in and click the create new blog button. You get to choose the name for the blog, and the web address. In addition you can choose from various templates to customize the looks of your blog. Are the templates not your thing? No worries, you can fully adjust whatever template you chose later on.

blogger dashboardOnce a blog has been created you will get to see the main page for editing your blog. In the overview you will see a graph of page views with some extra information surrounding it. You will find all the sections needed to customize your blog here.

On the messages section, you will get to write, edit and publish your actual blog posts. This is probably the most important part of your blog.

On pages you can add extra pages to your blog, but these pages are purely static. You may add some information about the author of the blog, or some contact information, but that’s about it.

In the reactions tab you can review reactions on your blog. You can also filter spam and moderate reactions here.

The statistics page is a powerful tool to view who has been viewing your blog from time to time.

The income page enables you to easily post AdSense ads on your blog. The only thing you need to do is to link your AdSense account to your blog by login in or creating an account. After that you can choose what types of ads you want your blog to show. This is a very important part of your blog if you want to make money. You will receive a certain amount of money for every 1000 page views and for every click on an ad. Make sure the ads don’t scare away any viewers, but keep them subtle instead.

The layout page is where you can drag all your modules of the blog around. You can set where you want your sidebar, what should be in it, and in what order. Especially placing your AdSense campaign on the right position can be crucial, so make sure you check this page out.

blogger html templateThe template page is probably the most important for the actual look and feel of your blog. Here you can adjust every detail of your blog through the very easy to use template-editor. Just click edit and you can edit all aspects of your blog really easily. Underneath you can choose from a wide variety of templates. More interesting perhaps is the edit HTML button. This will allow you to edit your blog underneath the hood. Here you get to add lines of code to enable anything you want basically. For example, this is the place where you edit code to add a ‘read more’ link to your blog posts instead of posting the entire thing on the main page. You can read more on that later.

This page also enables you to set options for mobile use of the blog.

The last page is the settings section. This page lets you edit the basic settings, like the name of the blog and the address, all the way down to who can see it and how it sends out a feed. Make sure you run through all these settings at least once. It takes about two minutes.

Once you have set up your blog, it is time to start blogging. Congratulations on creating your very own blog! You may consider tweaking it just a little bit more. Creating collapsible posts for example. For now, why not start of your blog with its very first blog post?