Archive for May, 2012

The Anatomy of a Blog Post

A blog post is a short article posted on a blog site. What you are reading now is a post on the Live Writer Basics blog. In this article I want to take my newer blogger friends a little bit behind the scenes to help them learn the details and mechanisms of a blog post.

First a bit about blog sites and services

A vast number of blogs are hosted by WordPress, as is this blog. There are other blogging services and they differ in many respects from WordPress, but I will quickly go over how a blog functions on WordPress. A blogger sets up an account by clicking the “Get started here” button on WordPress.com. With the account comes a blog site. In setting up the blog, the blogger selects the site address and name. imageThis blog has the address “https://livewriterbasics.wordpress.com” the name of the blog is Live Writer Basics as you can see at the top of this page. The blog consists of one or more pages. Typically the “landing page”, the one you get to with the blog’s URL or web address, shows the posts, the short articles, with the most recent one at the top.

The formatting, layout and style, of the blog is defined by a “theme” provided by the blogging service. WordPress has hundreds of themes to choose from. There may be a header image in addition to the blog name and byline. Most blogs have “sidebars” with various items of information. Typical items in the sidebar are links to prior posts, a search box, archive, links to other blogs, and other items that are automatically updated so the blogger does not need to worry about accessibility to information on the blog.

There may be other pages, reached with links on a menu bar, very much like any typical website. The pages in a blog contain more permanent information such as the About page here. There may be some advertising. This post may be followed below by an ad that WordPress places. This is how WordPress can make blogging free or very inexpensive. The blogger using a WordPress.com blog may not place any ads in the blog.

The “front” page may be quite long, showing a number of the recent-most posts. One such page is illustrated at the right. Posts and pages can be created in Windows Live Writer.

The blogging service, in this case WordPress, provides summary pages reached by the category and tag links.

Possible the most important part of a blog is the ability for readers to leave comments at the end of each post. This provides two-way communication between the blogger and the audience.

What does a post consist of?

Each post has a title. This is followed by the text or the article, maybe photos or other content. There is a post date showing the date, and often, the time the post was “published” or placed on the blog site. Typically a post is also marked with a topic, called “category” at WordPress, and “tags” that describe the topic details in more detail. Such categories and tags link to similar content in the blog and, more importantly, to other blogs. WordPress provides for such tagging. In addition there may be tags using another service. This blog also contains “Technorati” tags – you can see them illustrated below and real ones at the end of this article.

Here is an illustration of a typical post title, post date, and all-important first paragraph.

image

The end of that post looks like this:

image

The article ends with an “end of Ludwig’s story” mark, a copyright notice, links to the author’s website and social sites. This is followed by a group of Technorati tags. Each tag links to a Technorati page showing blogs on that topic.

There are a group of links to allow the reader to share the post and to indicate a “Like” to the author.

The gray links are the WordPress categories, marked “Posted in” that link to pages showing posts of that category, and tags introduced with “Tagged”. These also link to pages showing posts on those topics.

The last item in the gray WordPress items is a link to the comments on this post.

The skeleton of a blog post

In spite of the complex and and well-manicured look, the actual post consists of just HTML code. It is the reader’s browser that puts it all together and makes it look the way it was intended.

image

This is the code produced by Live Writer. Of course, when writing the blogger uses the “Edit” mode which shows the post pretty much as it will appear to the reader. Note that there are no images in this code, the pictures are defined by hyperlinks and are not stored with the post code. Live Writer takes care of those details and a novice blogger can be unconcerned – it just works.

When writing the text the author has “HTML styles” available to define the elements of the text and a limited set of font and positioning commands.

image

Normal text is called “Paragraph”, there are six “heading” styles. The actual appearance is defined by the blog theme and, once selected for the blog, is not further controllable. There are, however, additional controls for font, type size, and text placement. These are also limited. In Live Writer fonts can be set to any available on the bloggers computer. They will work just fine if the reader has that same font available on the computer used to view the blog. That last sentence contains the reason why a blogger must be very careful about setting the font. There is no assurance that it is available to the reader.

This is a quick look at the mechanics, the anatomy, of a blog post. A blogger is assisted by Live Writer in putting it all together so it works. It is easy to prepare a blog post, writing a captivating, informative, helpful, and timely article, well, that is another story.

.:.

© 2012 Ludwig Keck

Advertisements

, , , , , , , , , , ,

1 Comment

Arranging photos in blog posts

Photo-blogs are a great way to show photos. With Live Writer you have pretty good control over the size and placement of pictures. Here are some tips for arranging the images just the way you want.

First, be sure you know the width of you blog. This helps you to plan your layout in advance.

Arranging photos side by side

image

To position several images in a row proceed as follows:

  • Insert the left-most photo. In picture tools set the Alignment to Left.
  • Insert the next photo. Again set its alignment to Left.
  • For the last photo set the alignment to Inline. This will prevent any text from being placed next to the images.

Hint: Some browsers have their own ideas, to keep them at bay set a margin value for each image. I like to use 5 pixels for the Bottom margin.

Hint: If your photos have different aspect ratios due to cropping, set the vertical dimension for all photos in a row to the same value. The photos will appear neater that way.

Hint: With photos in a row there may be a large blank space at the right. You can even the space out by setting the left margin of the first photo to about half the pixel value of the space. Or even larger if you want to move the images toward the right margin.

Placing a vertical column of photos to the right of a larger one

image

Having a column of pictures next to a larger one can be very attractive. This arrangement does require a little more care. Here is the procedure:

  • Insert the large photo first. Set its alignment to Left. Set the right margin for this image to a small value, I like 5 px, to provide separation between the photos.
  • Insert the smaller photos one be one. Set their alignment to Inline if you do not want text alongside.
  • Set the top and bottom margins of the center image to balance the spacing so they will look good on the page.

Hint: If you want text alongside on the right side, set the alignment of the small images to Left. Also set their right margins to provide separation between the photos and the text.

LJK_5282-1600LJK_5256-1600Hint: If you want a column of text between the photos, set the alignment for the small LJK_5275-1600photos to Right and set a left margin value for each.

Place the small imagesLJK_5267-1600 into text positions so they will look about right. You will not be able to make this perfect.

Hint: If you want to show bullets, the text must be on the left of the images, otherwise the bullet symbols will not show.

Arrange a column of pictures to the left of a larger one.

  • The large photo must be inserted first. Set the alignment Right and set a left margin value.
  • The small photos can then be placed with their alignment set to Inline.

With these procedures you can arrange your photos for best appeal. Remember, the size of photos can be changed to any horizontal or vertical value. Just be sure that Lock aspect ratio is set to avoid stretching or squashing them.

.:.

© 2012 Ludwig Keck

, , , , , ,

2 Comments

Linking to SkyDrive Albums

With the recent changes to SkyDrive there is good reason to review and expand on linking to SkyDrive albums in blog posts.

Windows Live Writer has offered a very nice tool for a long time. It still functions just the way it always has. Old links to SkyDrive albums operate just as they did when they were placed into posts.

A quick review

the Insert Photo album toolLive Writer provides a tool on the Insert tab, Photo album, that downloads images from a SkyDrive album, creates a collage of thumbnails, and generates the necessary hyperlinks to the album. The illustration here shows the command location.

There are two options, “Create online album…” and “Add online album…” For most occasions the second option, to link to an existing album, is the preferred route. The album should be public, or in the vernacular of SkyDrive “Shared with Everyone (public)”.

This option allows importing from and linking to a SkyDrive album that resides in the root of the SkyDrive. That is, you cannot use albums that are sub-folders. This may seem like an unreasonable restriction, but farther down I will show workarounds for that.

You can use any SkyDrive that you have full access to, you are not limited to just one or to your own. If you have the credentials to a SkyDrive (login name and password, and, of course, the right to do so), you can use it in Live Writer. Insert Photo Album dialogIn fact Live Writer will store the credentials so selecting the SkyDrive you want is just a few clicks. The Insert Photo Album dialog is shown here. The first step is to sign in. The dialog asks for the Windows Live ID, this is now called Microsoft account. Note the drop-down arrowhead at the end of the field, this brings up stored credentials. Once you are signed in, the dialog downloads album information. As already mentioned, these are albums in the root location of the SkyDrive. Click on the album you wish to insert and click Insert.Photo Album Tools

Next, images are downloaded and the default collage is generated. Clicking on the collage enables the Photo Album Tools tab. The ribbon shows the available arrangements and clicking on an “Album style” instantly rearranges the thumbnails. There is also a “Shuffle photos” command – each click re-arranges the size and location of the thumbnails.

The code for the album link already contains the hyperlinks to the album. This is simple and straightforward. It gets a little more complicated if you wish to link to an album that is a sub-folder in another album.

Linking to SkyDrive sub-folders

The approach outlined above does not work for sub-folders, they are simply not shown in the Insert Photo Album dialog. So there are two approaches you can take.

Relocate sub-folder to root

Move the sub-folder temporarily to the SkyDrive root. moving SkyDrive foldersThe latest version of SkyDrive permits moving any folder to any other or to the root. This is very quick. Do be careful that there are no naming conflicts, if necessary rename the folder first before moving it.

After the folder, or album has been moved to the root the Live Writer insert tool can be used as described above. Once the post is completed and saved, the folder can be moved back to its original location. SkyDrive is smart enough to internally take care of all the links. Yes, that is right, you do not have to worry about the folder URL.

Make your own collage

Picasa collage toolThe other method is to make your own collage, insert that as a picture, then link it to the SkyDrive album. There are numerous ways to make a collage, one of the easiest is using Picasa.

Picasa lets you set the background color (or a picture) so you can match your blog background. Each photo can be sized, rotated and shown on top or sent to back.  Making a collage this way lets you arrange it just the way you like. Title the completed collage with whatever message you want to show in the tooltip. Then insert the collage picture into the post in Live Writer.

get URL of SkyDrive albumNow all that is left is to link it to your SkyDrive album. That is also quick and easy.

Open your SkyDrive album. Click on the first photo so it is shown large. Click on the URL in the browser address bar. Click Ctrl-C to save the URL to the clipboard. Then use the Hyperlink tool in Live Writer to assign that link to the picture.

Here is how such an album link would appear.  I chose the title “view album of Tall Ships in Savannah”. Try it.

Tall Ships in Savannah

view album of Tall Ships in Savannah

For a post in my photo blog Gallery Ludwig click on the picture below. This photo was inserted and then rotated in Live Writer. Live Writer has an array of useful Picture Tools.

view blog post 'Tall Ships in Savannah'

.:.

© 2012 Ludwig Keck

, , ,

Leave a comment