Tuesday, November 3, 2009

Turning a Blog Into a Webpage: HTML Codes


Here's where we start altering the actual template that blogger provides.  We'll be working inside the HTML of the template.  These first few changes are relatively simple, and you shouldn't have any problems manipulating the blog.  Just be sure you're making changes in the right section, and that you're typing in the changes exactly as I've shown them.

Removing the "older post" and "newer post" links at the bottom of each post

Click on the Layout tab and go to "Edit HTML"  Scroll down until you find the comments line break.

Find the section that looks like this:

Make the following changes.

Be aware that it is displayspace:spacenone;  Don't delete the bracket on the next line either.
This tells the browser not to display those links.  Click "Save Template" and refresh your website.

The older, newer, and home links are no longer there, like in the first picture up above.

Remove the link that says Subscribe to Post or Comments

You'll turn this off in the HTML section of the Layout tab as well.  It will be located immediately under the changes you made with the older and newer links.

Make the following change and click save.


Removing the blue navigation bar at the top of the page
This is the search bar that blogger puts in at the top of your blog, to allow for easy navigation.  You definitely don't want to have this if you're trying to pass your blog off as a website.

Go to the edit HTML section under the Layout tab again.  Find the the header section:

Anywhere after the dashed line, before the next section you'll want to insert the following:

#navbar-iframespace{
visibility:spacehidden;
}
I just put it right at the end of the section before the next dashed line.  Click save, and your website will now look like this.

(From this point on, my website will look like yours, instead of having the links on the right.)

The next post will take you through turning the left side into links, instead of being a blog archive.  This is the part I had the most trouble with at first, so I'm going to devote a whole post to it, so I can make it very detailed, and hopefully you won't have any troubles.

Make sure as we go if you need anything clarified that you let me know.

2 comments:

  1. This is awesome! I have been looking for the proper HTML code to modify my blog.

    Any idea on how to change the blogger template from two columns to 3?

    ReplyDelete
  2. Well I'm glad I can help! The newest part is up, and the final one will be posted in a few hours.
    I actually don't have any idea how to switch to three but I can definitely look into it!

    ReplyDelete

Related Posts with Thumbnails