Blogging Basics 101

How We Communicate: FAQs for Beginning Bloggers

I just returned from BlogHer 2008 in San Franciso. I appeared on a panel with four other women called FAQs for Beginning Bloggers. Our panel was flat-out amazing. We met fantastic bloggers and answered many beginner questions. Unfortunately, we didn’t have enough time to answer everyone’s questions. I hope to talk to the BlogHer Three (Lisa, Jory, and Elisa) to discuss having this panel again next year and including a Birds of a Feather Room so we can continue our discussions.

Below you will find my notes from my portion of the panel. After each of the presenters (me, Michele Mitchell of Scribbit, Nelly Yusopova of Webgrrls International, and Shazia Mistry of Adventures in Motherhood) gave a short overview of some basic FAQs, we broke into smaller groups discuss platform-specific questions (i.e., TypePad, Blogger, and WordPress).

We have also compiled a Blogging Resources Document (pdf) for you to download.

In addition, you can find Nelly’s notes at WebGrrrls and Michele’s notes at Scribbit.

How do I find basic html resources to help me remember how to do things like strike-thrus etc.?

When I research information for Blogging Basics 101, I start with a Google search of key words. I also go to each of the three main platforms (Blogger, TypePad, and WordPress) and search their help files with those same key words. More often than not, I find what I’m looking for.

The following five sites are excellent resources for all bloggers to refresh your memory on how to do things like strike-throughs or add a button to your sidebar.

• Blogging Basics 101: This site starts from the beginning and walks you through everything from choosing your blog host and choosing a blog name to figuring out how to do a strike-through and customize your sidebars.
• Blogger Buster: Blogger users should have this one in their bookmarks. Everything you want to know and then some about how to manage and customize your Blogger blog.
• Edublogger: This site is specifically written for people who design, develop, and use educational blogs. However, the information spans niches and is valuable to all bloggers. The author uses many screen captures to make instructions especially easy to follow.
• BlogWell: This site offers everything from theory and design articles to HTML and CSS instruction for WordPress. It is targeted to small businesses and non-profits.
• Lorelle on WordPress: As the name suggests, this blog focuses on WordPress.org and WordPress.com blogs and how to take them to the next level. Lorelle provides tips, advice, and techniques for WordPress bloggers.

What are and how do I create permalinks?

A permalink is the link to an individual blog post. These are important because if you ever need to link to an exact blog entry (e.g., for a carnival or an archived post), you use the permalink as your link. It's poor blog etiquette not to use the permalink.

If you don't use the permalink, you'll just be linking to your main blog page. The problem with that is that, as you post new blog entries, the newest entry appears at the top of your main blog page and the other entries are pushed down on the page. The entry your readers are looking for may be down at the bottom of the page or already in the archives; your reader has no idea where to find the entry! If they click over to your site expecting to see a post specific to a carnival and they see a different post, they may not take the time to find the "real" post they're looking for.

You can find the permalink link under any blog entry. However, not all blog hosts/designs handle permalinks the same way.

• Typepad: There's a link that actually says Permalink under the entry.
• Blogger: The link varies. It's usually the time stamp of the post or the title.
• WordPress: Has a link at the bottom of the post named Permalink and/or the title of the post.

What kind of basic sections should I have in my blog?

I take this to mean What should I place in my sidebar? Your sidebar is your list of things you want to keep handy for your readers and for yourself. Your sidebar is offering your readers something in addition to the day’s post. However, too many links in the sidebar can clutter your design and overwhelm your audience. Keep things clean and orderly.

• Recent Posts/Most popular posts/Archives: You don’t need all three. Just choose one of these.
• Categories or Search: I find that search works well for my blogs, because I have a long list of categories. The search takes up less space and is an easy-to-install widget from Widgetbox.
• About Me/E-mail/Contact information: This is your opportunity to explain your blog. E-mail or other contact information should be readily available so your readers (or PR and marketing people) can contact you.
• RSS subscription button: Blogging Basics 101 has an entire section on RSS and installation and you can review Nelly’s notes at WebGrrrls as well.
• Blogroll (if you choose to do one)

Hosted vs. Non-Hosted?

Hosted: A blog that resides on the host’s server (e.g., Blogger or TypePad or WordPress.com).

Non-hosted: A blog that resides on the user’s (yours) server. You pay a third-party to host your blog (e.g., Moveable Type or WordPress.org).

Hosted Pros: Easy to get started because you don’t have to worry about server issues.

Hosted Cons:

• Blogger blogs can appear to be less professional
• Platform limitations (e.g., archiving can be less than user-friendly; TypePad can have issues with comment spam and trackback spam; difficult SEO)
• Less control over HTML and CSS
• WordPress.com does not allow advertising.

Non-Hosted Pros:

• Control over permalinks (articles aren’t randomly named) which can help with SEO
• Control over how archives are managed
• Control over CSS/HTML

Non-Hosted Cons:

• WordPress.org only supports one blog per installation; however, Moveable Type supports multiple blogs per installation.
• Moveable Type isn’t as malleable as WordPress.org.

How do I make a custom header?

• Using GIMP (free to download) to make custom blog banner (via Simply A Musing Blog)
• How to use PhotoShop or PhotoShop Elements to design a custom blog header (via DesignMom) 

To those of you who joined us, thank you! It was a pleasure meeting you. Please don’t hesitate to contact me if you have additional questions. For those of you who were unable to attend our panel or BlogHer ’08, please follow the links to our Blogging Resources Document and panel notes. I’d love to hear from you if you have questions!

I am cross-posting this at Don't Try This at Home and BlogHer.com.

How to Upload Your Own Header in Blogger

Lani from The Wooden Porch is guest blogging for me today and explaining how to put your own banner on a Blogger blog. Let's give her a hearty welcome and leave lots of comments!

Here's a step-by-step guide with pictures to show you how easy it is to upload your own banner into your Blogger blog and make sure that it's positioned well and looks just as you want it without the Blogger lines around your new banner. It's easy. I promise. I'm going to hold your hand through it all. Seriously, my grandchildren's kids' great-grandma can do it, and she's a bit of a slow learner.

First, the header looked like this:

On my computer, I made a header that I wanted to insert instead of the regular option Blogger give me.

To begin the upload, I went to "Dashboard" and clicked on "Layout":

"Page Elements" should be automatically open:

You now want to click on the "edit" option on the header portion:

 

A new screen will open up. You want to do three things:

1. Upload your new header from your computer.
2. Choose "Instead of title and description".
3. Choose "Shrink to fit" (this resizes your header so it will fit your blog if your header ends up being too big).

A small version of your header will appear. Click "save".

By now you may be excited because you finally have your header up on your blog! However, it probably looks something like this:

Double lines are all around the header.

If you like the look, great. I don't. I want to get rid of them. To do so, choose "Edit HTML" under the "Layout" tab.

Before you do anything else, BACK UP YOUR TEMPLATE! (Which means highlight and copy the whole HTML code and paste it into Word.) I can tell you about a popular blog designer who accidentally messed things up quite a bit for herself once when she forgot to save her template. She even knew what the heck all the HTML stuff actually meant, so that should just go to say that the rest of us need to be extra careful before we go messing around with the template. 

Scroll through the HTML code. Look for the word "header". (Here's a quick tip for MAC users: Click on your "apple" button + F, then type in "header" in the box that opens on your screen. You'll find it faster that way. For PC users: use ctrl+F, then type "header" in the box that opens.)

Delete the lines that refer to the border.

Now it looks like this:

Now, click "preview".

Look! No lines!

Now save your template and you are done. Enjoy!

On my Blogger blog I have a links section on my blog that is growing too large. Can you recommend a good drop down menu code generator?

If you just want to make your archives into a drop-down menu, that's pretty easy in Blogger. To make your Blogger archives into a drop-down menu, these are the basic steps:

1. Go to Layout.
2. Click Edit on the Blog Archive page element. A Configure Blog Archive window will pop up.
3. Beside Style choose Dropdown Menu. Then choose the format you like best.
4. Click Save Changes.

However, if you want to make another page element into a drop-down menu (e.g., your blogroll), we need to get a widget and/or insert some code. There are several places to get this information:

• A Drop-Down Menu for Your Labels. I like Blogger Buster's tutorials. They are easy to follow and concise.
• Drop-Down Menu Creator. This is an easy-to-use widget, but you do have to plug in each title/link and click Add after each one. If you have your links ready, this shouldn't take too long.
• Drop-Down Menu for Blogger Beta

I have tried each of these and found them to be very easy to install on a Blogger blog.

You need to be aware that if you put too much information in a drop-down menu, your page will load slowly. You still have the same information, it's just in a drop-down menu. That makes it easier to contain, but doesn't fix the slow download.

If your page is loading very slowly, you may want to make a separate page or post with your links in it and just use a text or graphic to link to that page from your sidebar.

How can I make a video/text/picture be centered in my blog post?

Today's tip comes from Kathy at The Junk Drawer Blog.

To center video, text, pictures, etc.:

1. Go to the Edit HTML tab.
2. Find the item you'd like to center.
3. Type the following code before the item: <div align="center">
4. Type the following code after the item: </div>
5. Go to the Compose/WYSIWYG tab and check to see that the item is centered. Move the <div align="center"> or </div> code as necessary.
6. Click Save.

How do I put a line through words in a blog post?

In both Blogger and Typepad, when you compose or edit a post you have the choice of doing it as WYSIWYG or HTML. WYSIWYG simply acts like a word processor and is usually under the tab called "Compose Post". The "Edit HTML" tab is where you would write your post if you wanted to manually add your HTML tags or change them in some way.

I imagine that you write most of you posts while in "Compose Post". To cross out words in Typepad, use the "Compose Post" tab and simply highlight the word you want to cross out then click on the S with a line through it on the "Compose Post" toolbar. This S is placed between the button for underlining and the button to choose text color.

To cross out words using Blogger, you will need to write your post then switch to the "Edit HTML" tab. This will show you your post with all the HTML tags you've used. Find the word you want to cross out and type <del> before the word and </del> after the word. This HTML code tells the computer to cross out the word it surrounds. Notice that the first <del> does not have a slash mark. This is the opening code and tells the browser what to do. The second </del> does have a slash mark. The slash is very important because it signals to the computer that the task it started (crossing out the word) is now finished. If you don't put the slash, you'll be crossing out your whole post.

Also, make sure you close your <>. If you do not, the browser cannot carry out the command properly.

Example

1. Original post in "Compose Post" tab: I want to cross off those this that word.

2. Find text in "Edit HTML" tab and type in <del> and </del> where appropriate : I want to cross off <del>those</del> <del>this</del> that word.

3. Switch back to "Compose Post" tab to see results: I want to cross off those this that word.

To cross out word(s) using WordPress (in the Visual tab), simply highlight the word(s) you want to cross out, then click on the button with ABC a line through it.  (Alternatively, if you write your posts in the Code tab, use the del button to cross out words.)

(WordPress instructions provided by Jordan at Momma Blogga.)

How do you make a scroll box for HTML code? *Updated*

Sometimes a blog will have a button on its sidebar with a box of HTML code underneath, similar to this:

<a href="http://www.bloggingbasics101.com"><img src="http://www.bloggingbasics101.com/BB101button2.jpg" /></a>

You already know how to put the button on your sidebar and how to find and display the HTML. Now let's put that HTML into a handy scroll box.

Below I will walk you through putting the code in your sidebar. First, though, I want to show you the code we'll be using and explain how it works.

This is the code you'll place in your sidebar:

<div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>

The <div style=" "> and </div> are the opening and closing HTML tags you need to make the scroll box. Everything between the quotes in the <div style> tag tells the browser how to make the box appear on the screen. Let's go through each of these items.

• border:3px solid green -- This tells the browser to make the box with a three pixel border in green. You can change the color by typing another color (e.g., red, orange, etc.) or you can change the line type by typing dashed or dotted.
• height:100px -- This tells the browser to make the box 100 pixels tall. You can change this variable by typing a different number (e.g., 200). You can play around with this until you like the appearance.
• width:150px -- This tells the browser to make the box 150 pixels wide. Again, you can control the width by typing in a different number.
• color:black -- This is the color of the text within the box. You can type the name of any color here (e.g., red, orange, green, etc.).
• background-color:white -- This is the color of the inside of your box. I encourage you to use black text on a white background as this is the easiest to read. However, you can change this color by simply typing another color name in place of white.

Now that you understand how the tag works, let's look at what HTML you need to put use to make the box reflect your personlized HTML. Instead of YOUR TEXT HERE you should type your HTML code. For example, if you are going to put the HTML for putting the BB101 button on your site it would look like this:

<div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;"> <a href="http://www.bloggingbasics101.com"><img src="http://www.bloggingbasics101.com/BB101button2.jpg" /></a> </div>

(Note that you don't need the bold, I just added that for ease of seeing where your code goes. If you need more help with what code you'll need, see this post on HTML code for buttons.)

Now, let's put that code in your sidebar!

TypePad

In order to add the code to your sidebar, you will need to make a new Notes Typelist.

1. Go to Typelists > Create New Typelist.
2. Choose Notes for the List Type and give it a name.
3. Click Create New List.
4. In the Note field type copy and paste this code:

   <div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>

5. Click Save.
6. Click the Publish tab and choose which pages you want to put the scroll box on.
7. Click Save Changes.
8. To change where the scroll box appears, use the Content Order tool in your Design toolbox.

Blogger

1. Log in to Blogger.
2. Go to Layout > Template > Page Elements > Add a Page Element.
3. Scroll down until you see HTML/Java Script and choose Add to Blog.
4. Cut and paste the following code into the Content field (you can leave the Title field blank):

   <div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>

5. Click Save Changes.
6. Preview your blog to see how it looks. Move the element around as needed (simply drag and drop with your mouse).
7. Click Save.

Updated to add this note:
If you type your HTML into the Compose tab or the Edit HTML tab and it is processed as HTML and will not show up properly for your readers, there is a work-around. This HTML conversion page converts the original HTML tags into characters you can cut and paste into your post.

To use this page, type the HTML you want your readers to see in the left box and click Convert to character entities. The right box will show you code that you can cut and paste in either your Compose tab or your Edit HTML tab. The extra characters this page generate tell the Browser not to process the HTML as code.

I want to make my own banner/button. Where do I start?

This is a very popular question. To answer it, I'm going to point you in several different directions because there are a few things you need to consider and remember as you make your banners and buttons.

First, please don't forget that you should not use someone else's artwork without their express permission. There are many sites that offer free or reasonably-priced artwork. We've listed a few of those sites already. In addition, Microsoft.com has lots of free clipart you can use.

Second, you will need some sort of graphic editing software. Unless you are a professional graphic designer, Photoshop is probably more powerful than you need (not to mention wicked expensive!). However, Adobe offers Photoshop Elements--a watered-down, but very functional version of Photoshop--for a reasonable price. PaintShop Pro (by Corel) is another way to go. You can download a trial version for free, then purchase if you like it. You can also use whatever graphics program came with your computer (e.g., Microsoft Paint).

If you just want a pre-made button with custom content, you can do that easily. This article lists a few sites to help you out. A word of caution: blinking, moving, crazy buttons are fun for you the first few times, but they are not crowd-pleasers. Try to control yourself. You'll thank me later.

If you want to start from scratch, you'll need to decide on the dimensions of your banner or button. Jules of Everyday Designs has written a post for us that is a good place to start. The standard for measuring graphics (i.e., banners and buttons) online is a pixel. The best thing to do is start with Jules' article, try your own, and edit from there. It's trial and error until you are used to working with graphics.

I have found two tutorials for you to peruse to get yourself up and running with a banner (just make the dimensions smaller or crop your image to make a button).

1. The first tutorial is hosted at Design Mom and was written by Amy M. It has lots of screen shots and walks you through everything you need to know.
2. The second tutorial is hosted at Etsy Labs. It's not quite as thorough as the tutorial mentioned above, but I think you'll get the idea.

A good size for a button is roughly 150x150 pixels. Most sidebars are about 200 pixels wide. If you want to ensure that your button works with most blogs, 150x150 should get you where you're going.

How do you make a scroll box for HTML code?

Sometimes a blog will have a button on its sidebar with a box of HTML code underneath, similar to this:

<a href="http://www.bloggingbasics101.com"><img src="http://www.bloggingbasics101.com/BB101button2.jpg" />

You already know how to put the button on your sidebar and how to find and display the HTML. Now let's put that HTML into a handy scroll box.

Below I will walk you through putting the code in your sidebar. First, though, I want to show you the code we'll be using and explain how it works.

This is the code you'll place in your sidebar:

<div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>

The <div style=" "> and </div> are the opening and closing HTML tags you need to make the scroll box. Everything between the quotes in the <div style> tag tells the browser how to make the box appear on the screen. Let's go through each of these items.

• border:3px solid green -- This tells the browser to make the box with a three pixel border in green. You can change the color by typing another color (e.g., red, orange, etc.) or you can change the line type by typing dashed or dotted.
• height:100px -- This tells the browser to make the box 100 pixels tall. You can change this variable by typing a different number (e.g., 200). You can play around with this until you like the appearance.
• width:150px -- This tells the browser to make the box 150 pixels wide. Again, you can control the width by typing in a different number.
• color:black -- This is the color of the text within the box. You can type the name of any color here (e.g., red, orange, green, etc.).
• background-color:white -- This is the color of the inside of your box. I encourage you to use black text on a white background as this is the easiest to read. However, you can change this color by simply typing another color name in place of white.

Now that you understand how the tag works, let's look at what HTML you need to put use to make the box reflect your personlized HTML. Instead of YOUR TEXT HERE you should type your HTML code. For example, if you are going to put the HTML for putting the BB101 button on your site it would look like this:

<div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;"> <a href="http://www.bloggingbasics101.com"><img src="http://www.bloggingbasics101.com/BB101button2.jpg" /> </div>

(Note that you don't need the bold, I just added that for ease of seeing where your code goes. If you need more help with what code you'll need, see this post on HTML code for buttons.)

Now, let's put that code in your sidebar!

TypePad

In order to add the code to your sidebar, you will need to make a new Notes Typelist.

1. Go to Typelists > Create New Typelist.
2. Choose Notes for the List Type and give it a name.
3. Click Create New List.
4. In the Note field type copy and paste this code:

   <div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>

5. Click Save.
6. Click the Publish tab and choose which pages you want to put the scroll box on.
7. Click Save Changes.
8. To change where the scroll box appears, use the Content Order tool in your Design toolbox.

Blogger

1. Log in to Blogger.
2. Go to Layout > Template > Page Elements > Add a Page Element.
3. Scroll down until you see HTML/Java Script and choose Add to Blog.
4. Cut and paste the following code into the Content field (you can leave the Title field blank):

   <div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>

5. Click Save Changes.
6. Preview your blog to see how it looks. Move the element around as needed (simply drag and drop with your mouse).
7. Click Save.

On several blogs, I see a box under the blog's button with the HTML code for people to add the button to their own blogs. How do you make that box with the code for people?

In my post about how to put a button on your sidebar and link it to another site, you can see how providing the specific HTML code for a button is helpful. It might look like this:

<a href="http://www.bloggingbasics101.com"><img src="http://www.bloggingbasics101.com/BB101button2.jpg"></a>

All your readers have to do is copy and paste the HTML into their own sidebar, and ta da! There's your pretty button and link back to your site. Sweet.

So, how do you do this? First you have to find the HTML code you're looking for. HTML (HyperText Markup Language) is the code that tells your browser how to read and display each part of your post.

To find that HTML, you need to look in your Edit HTML tab and look for the JPG or GIF you're trying to share (Ctrl + F will open a Find window where you can type the name of the graphic, e.g., button.jpg; Mac users can use the Apple key + F). Once you've found it, you'll probably see the code you need and will look like this (with your relevant information in place of my examples in all caps):

<a href="YOUR LINK HERE">YOUR GRAPHIC</a>

Highlight all of that HTML code and copy it. Then click on your Compose Post or WYSIWYG tab and paste the code into your post where you'd like it to appear.

Important Note: If you want your HTML code to appear in your post, you must paste it or type in the Compose Post or WYSIWYG tab/window. If you type or paste it into your Edit HTML tab/window, it will be read as actual code instead of example code. For further explanation on this, please visit How do you show the HTML in your post without having the browser "read" it?

---

For those of you who are interested in a little more in-depth explanation of how to find the HTML code you're looking for, I'll explain a bit about the HTML you'll be using. Everything I'm about to tell you is usually done automatically by your blog host when you use the WYSIWYG interface, but if you were to flip over to your Edit HTML tab, this is what you'd see and what it means.

When you are making a link you use these tags:

<a href=" "> and </a>

The <a href=" "> tells the browser that any text after it should be linked to something (e.g., another blog, another post, etc.). The </a> tells the browser that you are finished with that link and everything after the </a> doesn't need to be linked. In other words, the </a> is ending the link.

You have probably noticed that in the <a href=" "> there are quotes. The URL or file name of where you are linking to goes here. For example, if you're linking to Blogging Basics 101, it would look like this:

<a href="http://www.bloggingbasics101.com">

If you were going to place the BB101 button on your site, you'd know that the linking part of the HTML would need to look like this:

<a href="http://www.bloggingbasics101.com">  </a>

The only thing missing is the text or button/graphic that you want to link from. This information needs to go between the HTML linking code we just discussed. If you are just linking text, your code would look like this:

<a href="http://www.bloggingbasics101.com">YOUR TEXT HERE.</a>

If you want to link an image instead of text, you'll need to tell the browser where to get that image. The code to do this is <img src=" ">. See how the abbreviations sort of look like Image Source? That's exactly what your calling up--the source of the image. You place the URL or file reference for the image in between the quotes. For instance, if you are going to reference the BB101 button from this site, the HTML telling the browser where to find the picture is

<img src="http://www.bloggingbasics101.com/BB101button2.jpg">

So now we have our two parts of our code: the link and the image. When you put them together, you'll have HTML code that looks like this:

<a href="http://www.bloggingbasics101.com"><img src="http://www.bloggingbasics101.com/BB101button2.jpg"></a>

How do I add a link to an Amazon book in a blog post?

You'll be pleased to know this is a fairly simple operation. We have covered how to make words into a clickable link already.

1. Go to Amazon.com and find the item you want to link to.
2. Highlight the URL of the page you want to link to and copy it.
3. Follow the directions for making words into a clickable link.
4. Save your work.

Yep. It's really that easy. You rock!