Chapter 11. Designing a Blog

Designing a Blog
  • Starting a blog with WordPress.com

  • Customizing your blog template to match your content

  • Writing and styling posts with panache

It was only a few years ago that blogs (short for Web log) were considered the wild and crazy new kid on the block. Next thing, it seemed like everyone had a blog. And most people didn't seem to know why they had a blog — they just knew that everyone was saying that you had to have one.

After a few introductory posts to play with this new toy, statistics from the blog search engine Technorati show that about 95 percent of people abandoned them. And that's a shame because blogging tools can be used for so much more than some lonely 14-year-old's gushing paean to sparkly vampires or a basement-dwelling conspiracy theorist warning about alien mind-control rays. Savvy technology shoppers read blogs like Gizmodo (http://gizmodo.com) and Engadget (www.engagdget.com) to figure out if the newest techno-toy lives up to the hype. Dooce (http://dooce.com) and Suburban Turmoil (http://suburbanturmoil.blogspot.com) write about motherhood and child-rearing issues in a laugh-out-loud voice. Deadspin (http://deadspin.com) and Total Pro Sports (www.totalprosports.com/blog) cover the stories behind the stories on the sports page.

At its heart, blogging software allows you to post information to the Web in a quick and easy way. After you have the blog set up, all you really have to do is type (into the right boxes) what you want the world to read, click to select multimedia assets (photos, videos, audio files), and click the Publish button. The blog displays the content in reverse chronological order, sorted by category or date, and allows readers to leave comments or trackback links to add to the discussion with the writer or other readers. The format of the site, after it's set, doesn't change. That is, you don't have to choose how many columns of information you want, what the background color is, what the fonts are, or any of the other variables to designing a Web page.

In this chapter, I'll demonstrate how to use WordPress, which is a sophisticated blogging tool that can grow with you as you get more comfortable with the blogosphere. WordPress is free to use, and comes in two "flavors." You can get free hosting at WordPress.com, or you can download the software package from WordPress.org and install it on your own server. Each approach has advantages and disadvantages. I start with the simplest approach of having someone else host it for you, and then take a look at how to take total control of things yourself.

Starting a Blog at WordPress.com

Your blogging software options are as numerous as the function keys at the top of your keyboard, so how do you choose one service over another — or know what they do in the first place? Although I can't help you with your function keys, blogging software is another matter: One of the quickest and most flexible services is available at WordPress.com. WordPress has practically become the industry standard blogging tool in the last couple of years because the open-source community has dedicated itself to developing thousands of themes and plug-ins to allow blog owners to customize and extend the basic blog concept in almost infinite ways.

If you aren't sure that you want to blog or you're thinking of using other software down the road (or you're just curious), WordPress.com is an excellent place to become familiar with how blogging software works, while offering you almost endless possibilities to expand beyond simple blogging to running a sophisticated e-commerce site or database-driven video-hosting service.

In this step-by-step task, you can see how easy it is to sign up for a blog and get started:

  1. Open your Web browser, point it to www.wordpress.com, and click the Sign Up Now button.

    Stuff You Need to Know
  2. In the sign-up page, type the name you want to use in the Username field. This can be your name, an online identity (handle), or the name you would like for the blog. In this case, I used HollywoodBartender. Next, type a password. WordPress advises users to choose a password that mixes uppercase and lowercase characters as well as numbers and symbols. An example of this kind of mixture would be P@ssW0rd789. Retype the password in the Confirm box.

    Stuff You Need to Know
  3. In the next box down, type in your e-mail address. Like the online warning says, triple-check that you have the spelling correct. If you ever forget your password, a new one will be e-mailed to this address. You can use your existing e-mail account; or, if you want to establish an entirely new identity just to deal with your blog, you can create a new e-mail identity at a free e-mail site. Make sure that the I Have Read and Agree to the Fascinating Terms of Service check box is selected. (Please click the link and do read the terms of service before agreeing to them.) Select the Gimme a Blog! radio button, and then click Next.

    Stuff You Need to Know
  4. This next page is where you pick your domain name and the title of your blog. You will need to think carefully and maybe try a number of options in this next step. Type in the domain name you want for your blog. This isn't necessarily going to be the name of your blog, but it should be as close to it as you can get. If your name is already in use by another blogger, you'll be prompted to try another domain name. The default name here is the same as your Username. Try to keep this name short and sweet so that your readers can type it as easily as possible. In this instance, I chose to keep it the same as the Username, so the resulting URL for the blog is http://www.hollywoodbartender.wordpress.com. Remember: Like the site says, after you choose this Web address, it can't be changed. You can, however, start all over later if you come up with a genius idea for a domain name.

    Stuff You Need to Know

    Warning

    You have to remember your password, so don't get too exotic with your made-up combinations just to please the strength bar. (The Password strength bar beneath the password entry box shows how your password suggestion ranks in terms of un-guess-ability.) A password that rates as Good is probably enough for anything other than a banking/financial information site or a Department of Defense nuclear secrets site.

  5. In the next box down, give your blog a name in the Blog Title field. Most people try to come up with something memorable. Unlike the URL, you can change and tweak the blog title later. In this case, I wanted to build on the words Hollywood Bartender that appear in the URL, so the blog title is "The Secret Life of a Hollywood Bartender."

    Stuff You Need to Know
  6. Choose the language you will be blogging in. This list will set the default character set available for your text. That is, if you're going to blog in Hindu or Farsi, choose that language so the characters show up how they're supposed to (rather than appearing as blank spaces and random punctuation).

    Stuff You Need to Know
  7. Leave the Privacy check box selected if you want your blog to show up in search engines. (Um, clear the check box if you don't want to be listed in search engines or WordPress.) However, clearing this check box doesn't mean that your blog will be totally invisible and private — just that you're not going out of your way to publicize it and try to drive traffic to it. Click the Signup button when you're satisfied with your choices. Remember: After you click this button, you cannot change the URL: You can only start over and pick a new URL.

    Stuff You Need to Know
  8. WordPress sends a message to the e-mail account you entered. Go to your e-mail inbox and check for the message. You must click the link in the message (or cut and paste it into the browser navigation bar) to activate your blog. It may take up to 30 minutes for the confirmation message to arrive, so be patient if it doesn't show up immediately. However, you must confirm this activation e-mail within two days, or WordPress will assume that you entered an incorrect e-mail address and then delete your blog.

    Stuff You Need to Know
  9. If you haven't received your confirmation e-mail yet, scroll down to see some other options. You can click Contact Support, or re-enter your e-mail address. When you do click the link that you receive in your e-mail, you are taken to a page that says Your Account is Now Active! Your username and password should already appear in the blanks on that page.

    Stuff You Need to Know
  10. You are prompted to update your profile. You can do this now, or get back to it later. If you want to do it now, enter your first and last name, and write a short description about yourself and why you are blogging. Click the Save Profile button after you're done. Don't worry — you can go back and change it if you later don't like it. You will be taken to the Login screen.

    Stuff You Need to Know

    Tip

    If you have not received your e-mail verification message, be sure to check your spam filters.

  11. If the fields in the Login screen aren't filled in, enter your username and password; then click the Log In button. You can select the Remember Me check box if you're on your own computer and want to have it fill in the blanks for you.

    Stuff You Need to Know
  12. When you login, you will be taken to the Dashboard. This is where you have an overview of all the controls you can use on your blog. Start by customizing your template, which is the focus of the next task.

    Stuff You Need to Know

Customizing Your Blog Template

One of the greatest strengths of WordPress is the stunning number and variety of templates available. A template sets the look and feel of your blog: the size and position of the banner, the typefaces and font sizes, how many columns appear, what the comment system looks like, and much more. The templates help you show off photos, videos, music, and almost anything else you can upload to the Internet. You can create your own template with Web design tools, but to start, it might be best to play around with the free themes to get a feel for what the various design and blogging choices mean.

For example, a blog with only one big column works great for photographers wanting to show off their shots in the biggest possible format for maximum visual impact. A blog with multiple narrow columns works for an organization trying to present multiple threads of complex information: say, a school that offers parents a way to see a calendar of events, the school lunch menu, and a recap of the last PTA meeting.

You can spend hours browsing through all the possibilities available for free on WordPress.com. Also hundreds of designers are willing and eager to sell you customized templates that use Flash, Silverlight, and other multimedia technologies to make your blog stand out from the crowd.

  1. Log in to your WordPress account. On the Dashboard page, scroll down until you see the Appearance drop-down list. Click the Appearance button to open up that menu.

    Stuff You Need to Know
  2. Under Appearance, click Themes to navigate to the directory of free themes available through WordPress. You can scroll through multiple pages to find one that suits you. Click the thumbnails to open a window showing a mock-up of what your blog would look like. When you find a design you like, click Install to make that your template. Note: You can always change your template later.

    Stuff You Need to Know
  3. I'm using a theme called MistyLook as an example here because it offers a couple of easy-to-control features and allows me to show off interesting widgets. After the theme is installed, it appears on top of your Manage Themes page.

    Stuff You Need to Know
  4. Start the customization by working in the Header Image first. Click the Custom Header link. I prepared an image to replace the picture of the trees and bridge over the pond. You can use any photo-editing program to make a similar Header Image, as long as it fits in with the size requirements. In this case, you can crop an image to fit; or if you have one that's 760 × 190 pixels, you can use it as is. Click the Browse button to navigate to where your image is stored. When you find it, click to select it and then click Open. Then click the Upload button.

    Stuff You Need to Know

    Warning

    You should settle on the general look and feel of your blog within the first week or so. Making too radical of a change after you create many blog posts can be problematic because of differing photo widths, font colors, and other elements that work great under one blog theme but can "break the page" when applied to another theme. For example, say your photo blog shows off some of your breathtaking landscape shots 800 pixels wide on a white background. Then you decide to switch to a 4-column blog where each column is only 200 pixels wide to show off more photos at a time, against a black background. Unless you re-size all the photos you've uploaded, your photos will either overlap and cover up your other content, or worse yet, the conflicting standards will cause your blog to refuse to load and visitors will see only an error message. And if you've specified that some of your text appear in black, it will be invisible against the black background unless once again – you guessed it – you go back into every blog post you've ever done and laboriously track down and adjust the custom text color.

  5. You see a message that reads Header complete! Click the Visit Site button to see what your new blog header looks like.

    Stuff You Need to Know
  6. Check out your new blog header. You can go back and edit the source picture if you're not happy with the way it looks (using a photo-editing program like Photoshop). Click My Dashboard (top of the window) to go back to the control panel to customize a couple other things about your blog's appearance.

    Stuff You Need to Know
  7. Under the Settings panel, click General. These settings control the title of your blog, the tagline, time zone, e-mail address, and other basic data.

    Stuff You Need to Know
  8. Because I customized the image to include the title of the blog, I'd like to get rid of the redundant words that appear above the banner. I clicked here and deleted the words that were in the Blog Title and Tagline text boxes. You can also use this page to change the title and tagline, if you want. Click in the text boxes to make your changes; then click Save Changes at the bottom of the page to make the changes take effect on your blog. Click Visit Site (up at the top of the page, next to the title of your blog) to see what the changes you have made look like. Your tagline can be a longer explanation of what your blog is about, a favorite quotation, a joke or you can go without one.

    Stuff You Need to Know
  9. As you can see in the figure, I removed the distracting words above my nice new banner. Now it's time to customize what appears in your sidebar(s). (You likely noticed by now those boxes running down the side columns, depending on your layout and the features that come with your template.)

    Stuff You Need to Know
  10. Click on the Dashboard button in the top left corner of the page to return to your Dashboard page, and scroll down to the Appearance panel. Click to open the Appearance panel if it's not already open and then click Widgets.

    Stuff You Need to Know

    Tip

    Widgets are little pieces of code that make things happen on your blog, such as making your calendar appear, showing how many spam comments have been blocked, displaying photos that you have posted on other places around the Web, like Flickr.com, or letting your readers see your most recent Twitter updates.

  11. You navigate to the Widgets control panel. Click a widget that you like and drag it to one of your sidebars. Hint: If you have multiple columns in your blog layout, you will have multiple sidebars to choose from.

    Stuff You Need to Know
  12. A four-pointed icon appears over the title bar to the widgets that you're dragging. This means that you can drag the widget to your sidebar, or drag it out of your sidebar, if you don't like how it looks or acts. You can also reorder the widgets by dragging them up or down in the sidebar. Some widgets will have boxes for you to fill in with information, such as the title you'd like to appear above your most recent posts, or the URL to a Flickr account. When you're done making entries and you want to see how the new sidebar looks, click Visit Site at the top of the page.

    Stuff You Need to Know
  13. You see the new widgets as they appear in the sidebar on your page. If you don't like how they look, navigate back to the widget page and either adjust them or drag them out of your sidebar.

    Stuff You Need to Know
  14. In the Appearance box, click on Themes to navigate to the Manage Themes page. The last, and most complicated option for customizing your theme, is Edit CSS. This is most definitely not for beginners. You will need to purchase a Custom CSS upgrade, which will cost you about $15 per year per blog that you want to totally customize. With this option, though, you can control the fonts, colors, sizes, arrangements, line thickness — basically everything in your layout. You can make one change here without having to pay: setting the maximum width for media files in your blog so that pictures or videos don't overflow your columns and mess up the look of your blog. If you are going to embed videos on your page, your columns should be at least 360 pixels wide. Most basic videos are 320 pixels wide. If you want to display higher-quality videos, they are 640 pixels wide, so your layout should be at least 680 pixels wide, to allow some breathing room. The total width of your blog is up to you; but most Web designers try to keep their pages under 970 pixels wide so they display well on monitors set to a 1024×768 resolution.

    Stuff You Need to Know

Posting to Your Blog

Updates to your blog are called posts, or entries. Blog posts are generally short (although they don't have to be) and can be composed directly in the blogging software or written in more traditional word processing software and then pasted into the composition window. (For advice on creating a readable, interesting blog post, read the following sidebar, "Writing for your blog.")

Nearly all blogging software works similarly to word processing software, or even e-mail software. After typing an entry, you can use handy formatting icons in the publishing interface to create text styles. Blog software also has icons you can click to accomplish simple HTML tasks, such as inserting links, photos, or videos.

Creating a new post is easy to do. In fact, if you can write an e-mail message, you can write a blog post! Follow these steps:

  1. Log in to your blog at www.wordpress.com. Scroll down to the Posts button and click it to open its drop-down list.

    Stuff You Need to Know
  2. Click Add New to open the Add New Post page.

    Stuff You Need to Know
  3. The Add New Post Page looks complicated, but after you work with it a few times, the basic functions are pretty intuitive. First, write a snappy headline for your post. Click in the text field at the top of the page and type in a short description of what you want to say. Then press Enter (Windows)/Return (Mac).

    Stuff You Need to Know
  4. A URL and a couple of buttons appear below the headline text box. The URL, or Permalink, is the address where your post will appear when you finally publish it. You will see the Web address of your blog, followed by the date and the word(s) in your headline. You can click Edit to change the words in the Permalink if you want to make them different from your headline. Or, if you're planning on sharing your post via e-mail, or social network sites like Facebook and Twitter, click Get Shortlink, and WordPress will automatically compress the post's URL to a combination of letters and numbers.

    Stuff You Need to Know
  5. In the Upload/Insert area, type the text of your blog post, using the formatting icons to choose fonts, create lists and links, and customize other layout styles. Hint: To apply formatting to the text, select the text you want to affect, and then click the icon for the style you want to apply. You can choose font options, bold, italics, text color, text alignment, bulleted or numbered lists, special characters, and more. If you don't see all these options, click the Show/Hide Kitchen Sink button on the far right or press Alt+Shift+Z (Windows)/(Mac) to open what WordPress calls "The Kitchen Sink." This is the second row of buttons that includes such functions as pasting from Microsoft Word (a handy feature that allows you to avoid contaminating your blog post with Word's formatting), or designating something with the various Heading, Paragraph or Address tags.

    Stuff You Need to Know
  6. The five buttons at the top of the Upload/Insert area allow you to insert some very special content. From left to right, they allow you to add an image, insert video, add audio/music, add media (kind of a catch-all), or add a poll. Clicking each button opens a window that prompts you to choose files on your local hard drive, or that are at a URL on the Internet. WordPress does enforce some space limitations (3GB of content comes free, but you can upgrade to up to 25GB of storage) although it does offer upgrades where you can buy additional storage and bandwidth.

    Stuff You Need to Know

    Tip

    All kinds of considerations make writing a good headline for your post one of the most important things you do on a blog. Search engines pay special attention to the words in headlines, and a well-written description can help drive traffic to your blog. (Do a little research on search engine optimization as a primer.) Readers are also attracted to funny, shocking, or strange headlines — and Top 10 lists.

  7. To insert an image into your blog entry, click the Add Image icon (looks like a rectangle inside another rectangle). (To find out how to prepare images for use on the Web, read Chapter 5.) The Add an Image window appears, where you can choose from a handful of methods: Choose an image on your computer and upload it, provide the Web address (URL) for an image on another Web site, or add an image from your Media Library. Just click the tab you want at the top and follow the directions that appear on screen.

    Stuff You Need to Know
  8. To add a link, first select the text that you want readers to click to find the link. Then simply click the Link icon (the link of chain) or press Alt+Shift+A. When the URL window opens, copy and paste the Web address for the link into the window. Note: You need to use the full URL, including the http:// part, to create a working link.

    Stuff You Need to Know
  9. You can also add tags to your blog post. Tags are keywords that describe the blog post, and search engines pay special attention to tags so that they can better sort your content into search result listings. To add a tag, simply type it in the Add New Tag text box, just to the right of where you entered your post. Click the link below this box to choose from a list of tags that you frequently use so that you don't have to spend time typing in the same old words over and over again. Click each tag, and it will appear under the Add New Tag box. Click on the gray "X" next to the tag if you made a mistake, and want to delete it.

    Stuff You Need to Know

    Tip

    The Media Library option is particularly handy if you want to add a company logo or other image to every post; you don't have to keep uploading the same thing because WordPress allows you to navigate through your uploads and pick the one you want.

  10. Click the Check Spelling icon (looks like a check mark on top of the letters ABC) to have spelling errors underlined in red in your blog post. Click any error to select from a list of corrections. You can choose the language you want the spellcheck to work in by clicking on the triangle next to the ABC checkmark button to open up the drop-down menu. You can then click on the language that you want spellcheck to operate in when checking the spelling in your post. Spellcheck will then underline words that are misspelled in that language. If you compose a post that uses words from a couple of languages and you're not sure about the spelling, this feature can come in handy because you can spellcheck in one language and then do it again in another language.

    Stuff You Need to Know
  11. Before you post your entry, click the Preview button, in the upper-right corner of the Add New Post page, to see how your chosen styles look. This opens another browser window with your post in it as it will look when it is published. You can return to Editing mode by closing this window. If you decide (after previewing) to remove formatting, simply highlight any element with a style you want to remove and click the Remove Formatting icon. (It looks like an eraser.)

    Stuff You Need to Know
  12. Click the Edit link next to Publish Immediately to see options for setting the date and time of your post. Click Edit next to Visibility: Public to control how the post is seen. You can choose to make this post always appear on the front page of your blog, password-protect it so that only people you authorize see it, or make it private so that only you can see the contents. Click Edit next to Status: Draft to make this blog entry either a draft; or mark it as Pending Review if you are collaborating with others and are waiting for them to look it over. You can leave all the options expanded, as shown in the figure, but you need to click OK in each area for the settings to take effect.

    Stuff You Need to Know
  13. Click Add New Category in the Categories section. A text box opens where you can type in new categories, or select check boxes next to existing categories. This is a simple but powerful tool that allows your users to sort your blog posts based on categories that they are interested in, without them having to search through all your pages in chronological order to find the topics they are interested in. For example, a user who wants to see all the posts you've written that are Top 10 lists would click Top 10 under the Categories section of your blog to make your blog generate a page containing only posts that you have categorized as being Top 10 lists — or related to Top 10 lists.

    Stuff You Need to Know
  14. The Excerpt area allows you to choose what sentences or paragraphs will appear in the RSS feed of your subscribers, or that will be weighted more heavily by search engines. You can either pick your best and most descriptive writing, or you can sum up what you have to say.

    Stuff You Need to Know
  15. When everything looks right, click the Publish button. The system then confirms that your post has been published. After you publish your post, click the Visit Site link at the top of the page, or View Post, to ensure that your post was published successfully and looks the way you want.

    Stuff You Need to Know

Tip

You can assign multiple categories to your posts. If you are writing about a piano-playing cat, for example, you can assign the post into the categories "cat," "piano," and "funny." Then, when users come to your blog and want to see only posts that are cat-related, they can click on the "cat" category to zero in on only content that falls in that category. Another user wanting to read about pianos might click on the piano category, and your same post would appear in that list — along with posts about pianos that don't include cats.

Tip

If you've read other chapters in this book, chances are you learned quite a bit of HTML. If you feel comfortable using HTML, you can actually use it right in the blog post window of WordPress. (As with regular text, you can write HTML directly in the window, or create your code in another application and copy and paste it into the blog post window.) If you want to use code, click the HTML tab of the composition window to switch from Visual mode.

Tip

After your blog is up and running, you can make updates by using e-mail. Updating in this way requires you to set up a special e-mail address that you are urged to keep secret. From the WordPress Dashboard, click the MyBlogs link and then click the Enable button under the Post-by-Email column. A special e-mail address will pop up in that column. Click the drop-down menu, choose Enable Post by Email, and then click Apply. Copy the e-mail address and save it in a secure location (such as a document on your computer's hard drive). When setup is complete, simply cut and paste the e-mail address you just set up, choose a title by typing it in the Subject field, and then create a blog post in the body of your message. When you click Send, the message wings its way to WordPress and onto your blog.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset