[ # ] Blogging 101

/* Posted March 13th, 2008 at 8:40am */
/* Filed under Blogging */

We’re all new to blogging here at coderetard.com, and I felt that a post covering a few blogging basics would help some of my fellow writers here as well as any other of our readers who may be interested. There are a few popular blogging frameworks out there, we use Wordpress, but the basics are the same. Frameworks like Wordpress give us easy-to-use interfaces to write articles that get automatically posted to our main page. Older posts are automatically moved out of the main page as more articles get written. Wordpress also allows readers to comment on the articles. Each article can also be associated with tags or categories to group related articles together. Enough with the introduction, let’s move on to the basics.

Images
A great way to make your article more interesting is to use images. Pictures are eye-catching and combined with a spiffy title can draw the reader into the rest of the article. Since it’s considered bad netiquette to link pictures on other people’s servers, any time you want to use a picture with your post, be sure you upload it to your website first. Screen space is a limited real estate, so keep image widths about 500 pixels or less. For example if the image was originally 700×700, resize it to 500×500 before you upload. To upload, use the simple interface below:
Image Upload

Once the image is uploaded, you can insert it into your article through the “Browse” tab. Wordpress will automatically take you there. You get a nice thumbnail preview of the picture along with the option to send it to the editor you are writing the article on. You can choose to show the thumbnail or full size image or just the title if you don’t want the picture to show. The image can also become a link if so desired, to either the image itself, the article page, or nothing at all. For the images in this article, they are full sized unlinked images. Be sure to place your cursor in your editor window at the spot you want the image to be inserted.
Image Send

Power Editing (Code Mode)
If you want more control over how your content looks in your editor, consider using “Code” mode instead of the “Visual.” This mode offers a level of customization and tweaking that is simply not available in the simpler Visual mode. As it sounds, Visual means what you see is what you get, no need to look at the code behind the scenes. But if you’re familiar with HTML at all, you might want to give it a try. Let’s revisit images again, but this time as power editors. Suppose you upload a file that’s too large and you only realize this once it’s uploaded and previewed. Without much hassle, you could add “width” and height” attributes to the image to do a simple size tweak to make it fit. Play around in Code mode and familiarize yourself with the controls, you’ll be glad you did.

Embedding YouTube and Other Videos
YouTube and other video streaming services sometimes offer bloggers the ability to embed videos directly in their articles. When attempting to do so, you definitely definitely need to be using Code mode. If you check out any YouTube video, you will see a piece of HTML code (boxed in red in the screenshot below) that you can insert into any HTML page. Since Code view gives you the HTML code view of your article, inserting an video from YouTube is a simple matter of copying and pasting. However, you will need to be very careful when switching between Visual and Code modes. In Visual mode, you won’t be able to see the video. Furthermore, it will screw up your code. Whenever you switch to Visual mode, make sure to double check the Code mode code to see that the YouTube code does not get corrupted. Always save in the Code mode rather than Visual mode when working with embedded video links. I personally have disabled Visual mode altogether, since I fancy myself a power editor. This has eliminated the problem altogether for me.
YouTube Code Link