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!

What are the "alt" and "title" tags in the tag? Do I need to use them?

The alt and title pieces of the <img src> tag are optional, but I would recommend that you use them as much as possible. There are three reasons:

1. It helps you know what the image is in case it's name isn't terribly descriptive (as most pictures from digital cameras are named a string of numbers).
2. It allows handicapped readers to know what the picture is because special software will read the alt and title tags out loud.
3. If, for some reason, your picture does not load, the alt and title tags appear in that space and the reader will know what the picture portrayed.

To make use of these tags, let's look at what a standard <img src> tag would contain:

<img src="picture.jpg" />

Let's break that down:

1. The <img src=> is telling the computer that it needs to call a picture.
2. The file name in quotes ("picture.jpg") is the file or picture to be called.
3. The / tells the computer that's the end of the tag.

To make the tag even more useful, we include the alt and title tags within the <img src> tag so it looks like this:

<img alt="Blogging Basics 101 button" title="Blogging Basics 101 button2" src="picture.jpg" />

Note that the information for both the alt and title tags is contained in quotes:

alt="Blogging Basics 101 button" and title="Blogging Basics 101 button2"

If you notice that your tags aren't working properly, ensure that you have the descriptive information in quotes and have a space between the final quotes in the alt tag and the word title. I've underlined it in the following example to show you where the space should be, but you don't want to have the underline in your code.

<img alt="Blogging Basics 101 button"_title="Blogging Basics 101 button2" src="picture.jpg" />

The text of the alt and title tags can be the same and should be a description of the graphic, not just the graphic's name. Although it seems redundant to include both the alt and title tags, you want to use both because some browsers read one and not the other.

How do I make a screen capture?

Including a screen capture in a blog post can be extremely helpful when you are trying to show how something is done. Making a screen capture is fairly simple and usually doesn't require any extra software; you can do it if you know which keys to use.

What you will need, though, is graphic editing software if you'd like to manipulate the screen capture in any way (e.g., adding arrows or highlighting a specific part of the page). I've already posted about various graphic editing software.

You can read about how to do a simple screen capture on a PC at About.com.

To do a screen capture on a Mac, use these keys:

Command+Shift+3	Take a picture of the screen
Command+Shift+4	Take a picture of the selection
Command+Shift+4, then press Control while selecting	Take a picture of the screen, place in Clipboard
Command+Shift+4, then Spacebar	Take a picture of the selected window

Once you have the screen capture and have saved it to the clipboard, open your graphic editing software and make any necessary changes or additions. Then you can insert the screen into your post as a picture.

I have created a button for a carnival I'm hosting and would like to optimize it for use on other blogs. What do I need to do?

Buttons and pictures are an important part of any blog. They help define your brand or online personality. Unfortunately, they also take up a lot of bandwidth and can make a web page load slowly if you don't optimize them.

I have to admit that I know a few tricks, but I am going leave the explanations to others. I've found some excellent articles explaining what optimization is and how to do it and I'm sharing those with you now.

• Four Reasons Why to Optimize Web Graphics
• Everyone's Guide to Optimizing Graphics
• Optimizing Web Graphics

I will suggest that, if you are making a button for a sidebar, you should not make the width larger than 150 pixels. A button that's 150 pixels wide should fit just about all sidebars. And Jules from Everyday Design wrote a guest post a few months ago about how to figure out the best way to center your blog banner.

How is it possible to make a layout that has movement? I know you need to make your background a gif file, but what else do I do?

I would advise against making anything (especially the background) on your blog or web page move. When we read online, it's a bit harder on our eyes than we read paper. Anything that distracts the eye distracts from your main message (i.e., your blog post). Most readers will click away from the distraction (away from your page) and move on to a page that does not have a distraction. It's very similar to having music automatically load on your site. If there is no way to make it stop, many readers try to click away as fast as possible because it's too distracting.

Still determined to add a moving background? OK. It's your site, after all. What you are after is an animated gif. You can find instructions for making one at many sites.

• So, You Want an Animated GIF, Huh?
• Optimizing Animated GIFs
• Build an Animated GIF Online Instantly

I've found some great pictures of bentos created by people in Japan. Because of the language barrier, I do not know how to request permission to re-post the picture in my blog.

I can't post someone else's picture without their permission, right?  Even if I am saying nice things about it and linking back to their original post?

I know it's tempting to just post the pictures--especially because of the language barrier and, therefore, the difficulty in asking permission and because you're saying nice things. Unfortunately, this is still unacceptable.

The best way around this is to write interesting and gracious prose about their art (because let's face it: bento is art) and encourage your readers to visit their site and view their pictures. It is possible that the blog you link to will have a stat counter that shows where the increased traffic is coming from and they may contact you.

You can also try to send them an e-mail. The blog owner may very well speak English as a second language.

Is there any free software I can use to make my own graphics, buttons, and banner?

What would the web be without freebies? If you are just starting to make your own buttons and banners and buying graphics software is too spendy, you can definitely find some free options to get you started.

(I'm going to point you to places where you can download free software; however, please understand that I am not personally endorsing any of this software--except Elements, which I own--or any of the downloads. As with anything online, please use caution when downloading.)

• About.com has a list of free graphic software that will jump-start your creative juices. They give mini reviews and screen shots of 10 free software applications.
• Gimp is a brand that I have heard of, but have not personally used.
• FreeSerifSoftware
• Download.com has a list of what they call The best free design & photo software. Check it out.
• I think most operating systems come with some sort of Paint program. You probably have a free graphics program on your computer right now! You can definitely see what you can do with that.

As you become more comfortable making your own buttons and banners, you may want to go ahead and buy software.

• Adobe Photoshop is amazing, but unless you're a professional graphic artist, I don't think you need to have it. Besides, it's very spendy at about $700.
• Adobe Photoshop Elements is the answer for those of us addicted to making our own graphics and fiddling with our photos, but want something less expensive than full-blown Photoshop. Elements retails for about $100. However, I've found it for less just by searching various sites online. I received Elements 4.0 (I think they're up to 6.0 or 7.0 now) bundled with the Bamboo tablet for Christmas and I think it was about $80. As an aside, I've found the 4.0 version to be great for me.
• Corel PaintShop Pro is another program that is popular. You can try it for free for 30 days.

How do I place my own banner on my blog?

Last week I provided links to help you make your own banner. A few of you e-mailed asking how to place the banner you make on your blog. This is a very simple step to personalizing your blog and I can't wait to help you do that.

Once you've made your blog banner, you'll need to save it to your computer in a place where you can easily find it. I like to keep all of my photos, graphics, ideas, etc. in a folder dedicated to my blogging activities. If you'd rather, you can also save it to an online service like Photobucket or Flickr. Make sure you read their terms and conditions.

Blogger

1. Click Layout on your Blogger dashboard.
2. Click Edit in the Header box at the top of your layout.
3. Leave the Blog Title and Blog Description boxes blank.
4. Beside Image choose whether you are going to use an image from your computer or the web. You would choose From your computer if you saved the banner you made to your computer. You would choose From the web if you saved the banner you made to a site like Photobucket or Flickr.
5. Under Placement, choose Instead of title and description.
6. Click Save Changes.

TypePad

1. Click Design on your TypePad dashboard.
2. Click Change Theme.
3. Click Edit This Element under Page Banner.
4. Under Optional click the box next to Use this banner image instead of a text title.
5. Click Browse and find your image on your computer (or put in the URL of your banner from the site where it resides).
6. Click Save Changes.

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.