« Signup Errors | Main | Having Blog Spam Problems? Let us know! »

June 20, 2005

A Very Basic Introduction to TerraBlogging with MovableType

Ron

Start editing your TerraBlog with this handy beginner's reference.

By Josiah Q. Roe, Edited and Updated By Ron


Current Sections:

1. Making a New Entry

2. Adding Links and Fun Stuff to Your Mainpage

1. MAKING A NEW ENTRY

The software that runs the TerraBlogs is called MovableType. It is very powerful and very, very cool.

To make a new entry in your blog, click on "New Entry" after you've logged in.

That will take you to the new entry screen.

Type in a title for your new post. Then type in the body text of your post. If you want to create link text in your post (like we all do on TerraBlogs), simply highlight the text you want to link, and click on the little "url" button at the top right of the post entry window. That will popup a little window asking you for the address of the site you want to link that text to. Click "ok" when you're finished, and it automatically puts in the html code to link that text to a site. You'll see the code surrounding that text now. This doesn't work for all browsers, though. You might have to learn how to manually enter the necessary HTML for links, which really isn't that hard.

Typically, the code for links looks like this: <a href="http://blog.chattablogs.com">The Official TerraBlog</a>

This makes a link that looks like this: The Official TerraBlog

It's easy.

When you're finished typing your entry you'll notice there are a TON of options, but for now you only have to be concerned with one -- the "post status" option which is underneath the main body entry windows of your post. So, after you've typed your new post, scroll down and select from the "post status" drop-down menu "publish" instead of leaving it on the default status of "draft." If it was selected as a draft, it would leave the post saved in your database, but not posted on your blog. This is sometimes useful if you get interrupted in the middle of writing your post and you just want to save it but not publish it.

Anyways, after you select "publish," scroll down a little more and click on "save." This will save your new post and publish it to your blog. Then you can go to your blog and see your new post!

NOTE: there is a bit of a learning curve with all of this blogging stuff. Don't get discouraged. Trial and error is part n' parcel with the bloggin' thing. You'll get the hang of it in no time.

NOTE: Make sure to save simple text backup copies for everything! If you're new it's easy to unintentionally screw something up. Backup copies save a lot of headache.

Log in. Go to "manage weblog." Then click on "templates." Then click on the "main index." It'll open a window like the one that opened when you changed your stylesheet.

Now, you don't want to screw with most of the stuff in the main index. Essentially the main index is the file people hit when they go to your blog. You'll see in there funky things like <$MTMainEntry$> and stuff like that. Basically, those variables references information/data in your database. When you type in a new entry, MovableType doesn't just make a webpage with that information in there, it sticks it in a database so when people go to your website, that information will be pulled and then displayed on your website in the order that your main index tells it to with the STYLE of your stylesheet (I hope that makes sense).

Basically, it's like your main index is the outline of your blog. The stylesheet (typically labeled styles-site.css) tells you how the blog should look stylewise (font, color, etc.) And the database holds the information that the main index pulls and displays in the style that the stylesheet tells it to.

BUT (always a but)

Your main index DOES have some data in it that it displays. Things like your links on the side and other things aren't kept in the database (too small and uneccessary), and instead you put on your main index file.

So, when you go into your main index, scroll down a ways and you'll start seeing bits of code like this

<div class="center">
blab la bla
</div>

Basically, a "div" as they are called, is a reference to your stylesheet. If the div is <div class="whatever"> then when your browser gets to that part of the main index, it then checks the stylsheet for how stuff that is contained in the whatever div is supposed to look. It reads it, and then displays all the following text in the style of the sidetitle until it reaches the closing "div" </div>

In your particular main index template, alot of the sections on the side are surrounded by "<h2>" or "<h3>" tags. Those are generic header tags, and can be used over and over again on the side. Make sure to have that closing tag though! </h2> for example.

In html (and most markup languages) you always want to have an opening tag and a closing tags. Openings tags are always like this <blabla> and closing tags always end with a slash like this </blabla>

Now, you want to change the name of your links and stuff, or you want to add new ones. Feel free to experiment. Basically, you can add a million different sections in the side section of your blog, just make sure to pay attention to the way the other bits of the code for similar items have been created.

AND, you can put that stuff ANYWHERE In your main index, AS LONG AS (this is important) it comes AFTER the <div class="links"> or <h2> tag. Basically, everything on the side of your blog is contained under the "links" div, because you want all that data on the side of your blog, not scattered wherever. This is because you can have divs within divs. So everything, recent entries, links, etc. are inside of the "links" div. So scroll down through your main index (or the module where this stuff is stored) and make sure you start adding and subtracting stuff WITHIN the <div class="links">

Now, the final thing (you'll have lots of questions, don't worry, feel free to ask on The Official Terrablog) is that you want to add links within those sexy little divs.

Here we go:

<h2>
Currently Spinnin'
</h2>

<h3>
<i>Elephant</i><br />
by The White Stripes<br />
<h3>

Notice a couple of things. Those little <i> tags tell it to make the word Elephant italics. The <br /> tags tells the browser to do a carriage return (like hitting enter on the keyboard, this is NOT automatic. If that tag wasn't there it would display all your info in one big line, you MUST use <br> tags to drop down to the next line). But we haven't gotten to links yet, yet you need to know about the <br> tags and the <i></i> tags. If you want to do bold, its <b></b> underline is <u></u>

Links look like this

<a href="http://whitestripes.com">The White Stripes</a>

Notice, the <a starts the link, and you put the link inside of the starting tag, and then you close the starting tag, and then you type the text that will be linked, and then you put in the closing tag. If you look when you do a new entry on your blog, and you highlight some text, it automatically puts the tags in just like that. Remember to put quotation marks around the address.

AND DON'T FORGET, if you're doing a LIST of links, make sure to but a break tag <br /> at the end of each line where you want it to drop down to the next line.

So here's the final deal

<h2>
My Favorite Blogs
</h2>

<h3>
<a href="http://chattablogs.com/quintus/">Irresponsible Journalism</a><br />
<a href="http://chattablogs.com/mesh/">Wired Mesh</a><br />
(and so on and so on...)
</h3>

I know that was lengthy, I hope it helped.

Blog Guts | By Josiah | 2:38 PM