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.

Basic Blog Design Principles

Today's Guest Blogger is Karla, who blogs at Looking Towards Heaven, where you can find her writing about the chaos and joy of life with four children. She can also be found at Fruition Designs, where she designs mommy cards, blogs and announcements, and at Blissfully Domestic, where she is the managing editor.

We all want our home on the web to have personality. Frankly, all blogs have some sort of personality. But is yours showcasing the proper one? Or does it suffer from an identity crisis?

When we begin working on our blogs, most of us understand that design is important, but just don't know the rules of design to follow. Unless you pay someone to create your design, this will be left up to you. So it is helpful to have a basic understanding of simples changes you can make to create some visual impact on the web.

If you can keep these things in mind, you can create a lovely space on the internet, regardless of the blogging platform you use.

Remember the rule of threes. Try to stick to three main colors for your blog. When you start throwing more than that into the mix, it confuses the eye.

Solution: choose three colors based on the suggestions in principle #2, below. This doesn't mean you can not have additional colors in your design. It just means that there should be no more than three main colors.

Site that provides a good example of this: FlowerDust.net

Color Balance (using the color wheel)    

• Be careful when choosing a background pattern. What looks lovely in a small image can be very distracting when covering your screen.
• Vibrant text colors are hard to read.

Solution: Choose colors that fall side-by-side on the color wheel or colors that are opposite on the color wheel.

Site that provides a good example of this:  Out on a Limb

Fonts - avoid Comic Sans, and other hard to read fonts. Serif vs San Serif - Serif fonts are fonts with tails; like this. Sans Serif fonts are fonts that do not have the tail; like this. Traditionally, Serif fonts are considered the easiest to read for printed material, because the tail pulls the eye across the word. However, blogging and other web design lends itself to a bit of flexibility on this due to the frequent use of short/one-line paragraphs.

Solution: Try to stick with the common fonts provided on blogging platforms, especially Times New Roman, Arial and Verdana.

Site that provides a good example of this: Baboo Baby

Keep your sidebar tidy. We probably all start out with this as a goal. But before long, you get cute little graphics for posts you've written, or for carnivals you participate in. Before you can say "I all of this clutter is making my eyes bleed", you've got a mess in your sidebar.

Solution: Consider creating a page dedicated solely to buttons and awards. When you receive them, place them on this page. Link to it from your home page, so that others can check them out when they choose to.

Site that provides a good example of this: Balancing Everything

Consider the emotion of the colors you are using. Do they match the words and posts you use on your blog? Do you use a cheery tone on your blog, but use dark, gloomy colors for it? Do you write with a sarcastic, biting tone, but have a romantic, floral print for your background? It's your blog, so seriously, you can do whatever you want with it. But it you don't want to confuse your readers, choose colors that are inline with the tone of your blog.

Solution: For a detailed look at the emotions of color, take a look at this article on color meaning.

Site that provides a good example of this: Oh! How Lovely!

A well-done blog banner has a lot of impact.

Solution: Even if you can't afford a full blog makeover, consider purchasing just the blog header from a designer. They will most likely be happy and willing to suggest colors to use to finish the rest of the look.

Site that provides a good example of this: LucyKate Crafts

You can do it. Stick to these principles and you'll have a blog that is visually equal to the awesome writing you publish on your blog.

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.

Is there a fee involved with changing my design? My husband designed a new look for me with Photoshop that I'd like to use.

No, there should never be a fee associated with changing your design (unless you're paying someone to design and install it for you). Blogger, TypePad, WordPress, etc. do not charge you to change your design.

In order to use the layout your husband designed in Photoshop, you will have to have each component (i.e., header, sidebar titles, etc.) as a separate jpg or gif file. Then you can upload them to your blog and arrange them as you like.

For more tips on changing the look and feel of your blog, browse through the numerous articles on blog design here at Blogging Basics 101.

You have links to kirtsy, Digg, Del.icio.us, etc. at the bottom of every post. How can I get that on my blog? *UPDATED*

The footer I have at the bottom of the posts here at Blogging Basics 101 is from Feedburner.com. Feedburner is the service I use to distribute my RSS Feeds. It has an option called FeedFlare that allows a blog owner to easily provide links to popular social media outlets (e.g., kirtsy, Digg, del.icio.us, Technorati, etc.) so readers can save, promote, or share any article they're interested in.

To set up a FeedFlare, you'll need to first set up your RSS feed through Feedburner.com. They have a Quick Start Guide for all the major blog platforms (Blogger, Typepad, WordPress, MySpace, etc.). Just go to the Guide and click on the link for the platform you use. They also have a Feedburner Help Center to answer any other questions you may have.

Once you've set up your feed via Feedburner, click on the Optimize tab for your blog's feed. On the left sidebar, scroll down until you see FeedFlare. Click it. Then you'll be directed to a page that shows you all the options you have for your FeedFlare footer. Pick and choose what works for you and your readers, then follow their instructions for installing it on your blog.

UPDATE: To add the kirtsy link to your feedflare, please follow the simple directions at kirtsy. Just scroll down to where it says kirtsy FeedFlare.

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.

How do I back up my template?

It's especially important to back up your template before you export your content or make changes to your design because once you make a change and save it, there's no going back (unless you know exactly what you did and can undo it).

Blogger

1. Log in to your account and click Layout.
2. On the Template tab, click Edit HTML.
3. Highlight and copy all of the HTML in the box.
4. Open your word processing program (e.g., Microsoft Word or Pages) and open a new file or document.
5. Paste the HTML into your new document.
6. Save. Remember to make a note of where you saved this information.

TypePad

1. Log in to your TypePad account and click on Design.
2. On the Design tab, click Saved Designs.
3. Click the box next to the design you want to back up (there should be a check in the box after you click it).
4. Click the button that says Duplicate.

You now have a copy of your design. I would suggest working on the duplicate instead of the one marked Current Design. This will allow you to make changes and preview them before going live.

WordPress.org provides a tutorial for backing up your database.