An Introduction to Weblogs/Utilizing Blog Creation Tools

From Wikibooks, open books for an open world
< An Introduction to Weblogs
Jump to: navigation, search

Using blog creation tools efficiently and effectively[edit]

You should be aware of the wide variety of blog creation tools available, the differences between them and where they can be obtained. There is a useful list of free blog providers at:

http://weblogs.about.com/od/weblogsoftwareandhosts/a/topfreeblogs.htm

This includes the following providers, amongst others:

There are also a number of reasonably-priced commercial services, e.g.:

Further lists may be found at the following locations:

Blogger.com[edit]

There are two ways of creating your own weblog: on your own website, if you already have one, or by hosting your weblog with a specialised provider.

The advantage of the first solution is that you have total control over the weblog and the software used, but it is significantly more complicated, as you need to download the software and install and configure it.

The advantage of the second method is that you don’t have to worry about anything: you only need to create an account with the service provider and write the content of your weblog.

For our first weblog, we’ll stick with the easy way. After creating the weblog we’ll take a look at how you can personalise the design.

Let’s look at how we can create a weblog. In just a few minutes we’ll create a weblog in Blogger.com, a popular American service provider, owned by Google.

Start your browser and enter http://www.blogger.com in the address bar. You’ll see the following screen:

File:Fig221.png
Blogger Home Page

The home page allows you to create a new account or begin a session, so we’ll start by creating a new account.

File:Fig222.png
Create a Blog
File:Fig 223.png
Creating an account in Blogger.com

Click on Create your blog now to open the Create an account page:



ACTIVITY 2.1[edit]

A Cap Digital.svg

Enter the following data on this page:

  • User name
  • Enter a Password
  • Retype Password
  • Display name (for signing the articles you write)
  • Email Address

Make sure that you pick a user name and a display name (these can be the same if you like) that does not allow you to be personally identified, e.g.: use something like BloggerBill rather than William McDonald.

Once you’ve entered this data, tick the box Accept the Terms of Service and click on Continue.


File:Fig 224.png
Title and address of weblog

Next, you’ll see a page headed Name your Blog:

You must give the blog a title and enter the URL (web address), which is made up of anything_you_like.blogspot.com. Let’s call ours Weblog Example One and use the URL http://www.weblogex1.blogspot.com.



A Cap Digital.svg ACTIVITY 2.2

Enter the title and URL for your weblog. (You’ll need to choose a different URL.


A weblog consists of a number of web pages. Just like a “normal” website, we must save these pages onto an Internet server so that other users can access them.

File:Fig 225.png
Advanced Blog Setup Page

By default, Blogger will host your weblog on the Blogger server. This is a free service, but advertising will appear on each page. You can upgrade to a service which does not display advertising on payment of a small annual fee.

You can also choose to host your site at another location by clicking on Advanced Blog setup. This will open another page where you can enter the configuration details for the other server.

At the moment, we’re not going to do this, so if you’ve opened the Advanced Blog Setup, go back to the previous page and click Continue.

The final stage is the choice of a design template for your weblog pages. This is simply a case of selecting one from those shown.

File:Fig 226.png
Choosing a template

You can easily change the template, or replace it with another of your own design. You can look at the various templates by clicking on the View icon. To select a template simply click on the check box next to its name. For the moment, let’s choose the right-hand one, Minima.


A Cap Digital.svg ACTIVITY 2.3

Take a look at the available templates and choose the one you want to use for your weblog. (You can choose a different one if you like, but remember that if you do your webblog will look different from the examples in these notes.)

Click on Continue and within a few seconds a window will appear saying:

Your blog has been created!

Now click on Start Posting to publish your first article.


Publishing your first article

The terms article and entry are used interchangeably to refer to the posts to a weblog.

File:Fig 227.png
The administration page

We’ve already created our weblog and we’re now at the administration page, the control panel of the weblog. Notice that there are a number of distinct tabs.

As you shown on the right, we are currently on the Posting tab and the Create button is active. Within this tab you’ll see a large field entitled Post, and just above it, a field entitled Title.


A Cap Digital.svg ACTIVITY 2.4

Write “My First Entry” in the Title field and “Hello World” in the Post field. Now click Preview, at the top right of the Post field. Within a few seconds Blogger will show you the article as it will appear in the weblog.


File:Fig 228.png
The Preview screen

Check the text. If there are any errors, you can correct them by clicking on Hide Preview. If the text is correct, click on the Publish Post button and Blogger will publish the weblog. Alter a few seconds Blogger will confirm that the article has been published successfully:

File:Fig 229.png
Confirmation screen
File:Fig 2210.png
The weblog in operation

Click on View Blog (in a new window) to see the result:


We’ve finished creating our first weblog and publishing our first article in only a few minutes. If you want, you can give the address of your weblog to your friends, so that they can visit it, but maybe you should wait until you’ve made a few improvements. Let’s look first at changing the template.

To change the template of your weblog, click first on the Template tab, then click on Pick New. This will open a template selection page similar to the one we saw when we created the weblog.

File:Fig 2211.png
Template selection page

Pick a template from the list and click View to obtain a preview. If you’re happy, click Use This Template to select it. Now click Republish to modify the pages you’ve already published.


Opening and closing a session


That’s us finished for the moment, so click Sign Out at the top right of the administration panel to disconnect and return to the Blogger.com home page. You should always exit from the administration panel in this way, especially if you are share a computer with other users. If you don’t sign out, any other user can make changes to your weblog, without knowing your password.

The next time you connect, you’ll need to enter the user name and password that you chose when you signed up for your account. Whatever you do, don’t forget these!


File:Fig 2213.png
Signing in


Enter your user name and password in the fields at the top right hand of the page and click on Sign in:

The Blogger user interface[edit]

As we’ve already seen, it’s relatively simple to create a weblog using Blogger. Were going to look now at what further options are available for configuring our site. We’ll start by taking a closer look at text entry.

File:Fig 2214.png
Text formatting icons


Click on the name of your weblog If you look at the of the Post field, you’ll see a pair of drop-down lists, followed by a number of small icons:

If you click on the downward-pointing arrow at the right of the font drop-down list, you’ll see a list of available fonts:

File:Fig 2215.png
Available fonts
File:Fig 2216.png
Available text sizes

Highlight a piece of text and click on the appropriate item to change it to the selected font.

Similarly, if you click on the downward-pointing arrow at the right of the text size drop-down list, you’ll see a list of available sizes: Highlight a piece of text and click on the appropriate item to change it to the selected size.

You can also apply effects to text by using the b (bold) or i (italic) icons. Simply highlight a piece of text with the mouse and click the desired icon.

File:Fig 2217.png
Examples of text formatting

Here’s an example of some text with the various types of formatting applied.

There are several other icons which can be used to apply formatting to text:


Icon1.png This icon is used to apply colours to text.
1964.png This icon is used to insert links to other websites. We’ll look at this in more detail in a moment.
Icon3.png This icon is known as the blockquote function and is used to indent a highlighted section of text, perhaps to indicate that it’s a quotation.

The next group of icons are used to align or justify text:

50px This icon is used to left-align text, i.e.: place it hard against the left-hand side of the page.
50px This icon is used to centre text, i.e.: place it in the middle of the page.
50px This icon is used to right-align text, i.e.: place it hard against the right-hand side of the page.
50px This icon is used to fully justify text, i.e.: place it hard against both sides of the page.


We mentioned earlier that the globe icon could be used to create links to websites. This is very straightforward:

  1. Select the text that you want the reader to click on to open the link.
  2. Click the globe icon.
  3. Enter the address of the website you want to link to in the dialogue box and click Accept.

The necessary code is inserted immediately. You can see the result by clicking on Preview.


ACTIVITY 2.5[edit]

A Cap Digital.svg

Experiment with these icons until you’re familiar with what they do, as shown in the examples below.


File:Fig 2218.png
Formatting text
File:Fig 2219.png
reviewing formatted text

Click Preview to get an idea of what the final result will look like:

Many other effects can be applied to text, but in order to use these you would need to learn HTML.

Date and time[edit]

Blogger also allows you to configure the appearance of the date and time. In the lower part of the editing page you’ll see the words More post options ... If you click here, the following panel appears:

File:Fig 2220.png
More post options

The date and time of publication appears on every article published by Blogger. The Change Time & Date function lets you change the details displayed. For example, you can backdate an article, This can be useful if you are wanting to include articles from an older weblog and keep the original dates.

Comments[edit]

Reader comments are an important feature of weblogs, but you can decide whether or not you want to allow readers to add comments to your articles. If you decide not to allow these, readers won’t be able to click the link, or you can use the No & Hide option to remove the comment facility completely.

Drafts[edit]

File:Fig 2221.png
Edit Posts

In the bottom part of the editing window, next to the Publish Post button, you’ll see another button labelled Save as Draft. If you don’t want to publish your article immediately you can click on this button and the article will be saved in a list of articles which you can access from the Posting | Edit Posts tab:

The articles are shown in date order, with the most recent at the top of the list. Notice that the article you’ve just saved has the word “Draft” against it. You can click the Edit button to change it prior to publishing it.

Weblog configuration[edit]

We’ve already seen some options for configuring your weblog. We’ll take a systematic look now at a number of others. You can access a number of configuration panels from the Settings tab:

The Basic panel (top half)[edit]

File:Fig 2222a.png
The Basic panel (Top Half)

In this panel you can specify the Title and Description of your weblog. The third option Add your Blog to our listings? lets you specify whether or not your weblog will be public. Public weblogs appear in Blogger.com’s listing of weblogs. The final option, Show quick editing on your Blog let's you edit posts from your Blog with a single click.

File:Fig 2222b.png
The Basic panel (Bottom Half)

The bottom half of the Basic panel asks if you want to Show Email Post links?. This allows visitors to your weblog to mail copies of posts to their friends with the minimum of effort. The next option, Show Compose Mode for all your blogs? is a Global Option which applies to all your weblogs. It allows you to add an additional wysiwyg (what you see is what you get) editor which let's you edit posts in a form closer to how they'll finally appear. The Save Settings button allows you to save any changes you have made on this panel, while the Delete This Blog button removes the weblog completely.


ACTIVITY 2.6[edit]

A Cap Digital.svg

Experiment with settings in this panel until you're confident that you know what they all do. (We don't recommend experimenting with the Delete button unless you really want to get rid of your weblog!)


The Publishing panel[edit]

File:Fig 2223.png
The Publishing panel

Here you can define which server will host your weblog and specify whether you want to notify updates to Weblogs.com. In this case, the weblog is hosted by Blogspot.com, but you can change it to be hosted on your own ISP (Internet Service Provider) if you have web space there.


If you choose Yes in the Notify Weblogs.com option, each new change to your weblog will be notified to Weblogs.com, a weblog update notification service. Again, the Save Settings button lets you save any changes you have made on this panel.


ACTIVITY 2.7[edit]

A Cap Digital.svg

Use the Notify Weblogs.com setting in this panel to tell weblogs.com about your blog.


The Formatting panel

File:Fig 2224.png
The Formatting Panel

The options in this panel allow various aspects of the weblog to be controlled:


Option Meaning
Show Specifies how many days or posts will be shown on the home page of the weblog.
Date Header Format The format of the date shown for every entry.
Archive Index Date Format Format of the date for archived articles.
Timestamp Format The format of the time, i.e.: am/pm or 24 hours.
Time Zone By default this shows the Los Angeles time zone. Choose your own time zone from the pull-down list.
Date Language Selects the language in which the date will be displayed if you’ve chosen to display the names of the days and months.
Encoding Encoding in Internet Explorer. Only useful if you are writing in a non-European language
Convert Line Breaks If you’re publishing HTML code which contains line breaks, choose No, otherwise don’t change this option. Click Yes to convert carriage returns (the Enter key) in HTML pages to a new paragraph <p>.
Show Title Field Allows a title to be shown for each article. If you choose Yes you must add the code for this option to the template.
Show Link Field Allows an address field to be included in each entry. If you choose Yes you must add the code for this option to the template.
Enable Float Alignment Allows you to add HTML tags to control the positioning of text and images.
Post Template If you want load the same text or HTML code to each article that you publish, you can write it here and it will be added automatically.

ACTIVITY 2.8[edit]

A Cap Digital.svg

Experiment with settings in this panel until you're confident that you know what they all do. (We don't recommend experimenting with the settings the involve HTML code unless you are familiar with HTML.)



The Comments panel

File:Fig 2225.png
The Comments panel

This panel allows you to configure the way that reader comments operate. You can chose to Show or Hide Backlinks. You can also chose to Show or Hide comments. You can also choose who has the right to comment. This can be Anyone, or it can be restricted to subscribers to Blogger.com, or to members of the weblog (see the Members panel below).

The Default for posts field is used to specify whether new posts should allow comments (New posts have comments) or not (New posts do not have comments).

Comment Timestamp format allows you to choose the format of the timestamp, i.e.: am/pm or 24 hours.

Show comments in a popup window?

This allows comments to be shown in a new window, rather than the main blog window.

Show word verification for comments?

If you choose "yes" for this setting, then people leaving comments on your blog will be required to complete a word verification step, similar to the one presented when you create a blog. This prevents automated systems from adding comments to your blog, since it takes a human being to read the word and pass this step.

A test of this nature is often referred to as a captcha (Completely Automated Public Turing test to tell Computers and Humans Apart). If you want more information about this, see: http://en.wikipedia.org/wiki/Captcha

Enable comment moderation?

This lets you read comments and decide whether or not to accept them for display.

Show profile images on comments?

You can also specify a Comment Notification Address if you want to receive an email notification every time someone posts a comment on an article.

The Archiving panel[edit]

File:Fig 2226.png
The Atchiving panel

Older articles (those whose age has exceeded that specified in the Show option of the Formatting panel) are stored in the Archives, a separate area of the weblog. You can specify how often articles should be archived in the Archive Frequency field. The default frequency is Monthly and the other options are Daily, Weekly and No Archive.

The frequency should depend on the amount of activity on the weblog - there’s no point in archiving daily if you only update the weblog once a fortnight.

The Enable Post Pages? option allows each article to be archived as a separate web page.

The Site Feed panel[edit]

File:Fig 2227.png
The Site Feed panel


This panel allows you to specify whether or not your blog can be syndicated, allowing readers to access it by means of a newsfeed aggregator. This topic is discussed at length later in the course. You can specify whether or not you want to publish a site feed and whether full content should be syndicated, or simply a short extract. You can also specify a Site Feed URL. We'll discuss site feeds in greater detail in Section 3 of these notes.

The Email panel[edit]

File:Fig 2228.png
The Email panel

If you want to let your friends know when you add an article to your weblog, you can enter their email addresses in the BlogSend Address field and they’ll receive an e-mail every time you add an article.

The Members panel[edit]

File:Fig 2229.png
The Members panel

You can use this panel to invite your friends or colleagues to participate in your weblog by clicking on Add Team Member. To invite new members, simply enter their email addresses and, if you wish, a welcome message. The names of members will only appear on the site once they’ve accepted your invitation. You’ll be notified by email when this happens.

Note that only the administrator can modify the configuration of a weblog. The other members can only add articles. There is no limit to the number of members in a team.



Managing articles[edit]

File:Fig 2230.png
Editing posts


You can amend articles, or delete them from your weblog by clicking on the Posting tab and selecting Edit Posts:

This displays a list of articles, you can choose to edit an article by clicking on Edit, or to delete it by clicking on Delete. If you choose to delete an article, you’ll be asked to confirm this before it is deleted. The same screen allows you to choose the number and type of articles to be displayed, or to show only articles which contain a specific search term.


Creating links[edit]

Let’s look a bit more at the creation of links by producing a couple of fictitious blogs. The first one belongs to Jane and can be found at:

File:Fig 2231.png
Jane’s Blog

http://janesfirstblog.blogspot.com

The second blog belongs to Andy and can be found at:

http://andyslastblog.blogspot.com/


File:Fig 2233.png
Recently Updated Blogs

Shortly after creating his weblog, Andy notices that Jane's weblog has been mentioned in the Recently updated section of the Blogger Dashboard page.

Andy clicks on the link to Jane’s blog and he likes what he sees there, so he decides to put in a link in his own blog by highlighting the name of the weblog and clicking on the link icon.

Editing the link section[edit]

File:Fig 2234.png
Inserting a Link

Many of the default templates provided by Blogger (including those chosen by Andy and Jane) have a link section in them already. You can edit this by using s little HTML. Log in to your blog and click on the Template tab. This will display the HTML code for the template. Scroll through the code until you see something like this in the sidebar section:

<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://EDITME">Edit-Me</a></li>
<li><a href="http://EDITME">Edit-Me</a></li>
</ul> 

As you can see, there are a few links in there already. You can edit or delete these and add as many more as you like. If you are using a template which doesn't have a links section, you can copy the code above and paste it into your template. The best place to put it is in the sidebar, next to the archives or previous posts list.

You can add a link simply by pasting its URL in place of "http://EDITME" in the above example, or by replacing one of the default links included in your template. Then change the "Edit-Me" text to say whatever you want to appear, save your changes and republish your weblog.

The HTML for a basic link looks like this:

<a href="http://URL">TEXT</a>

Anyone looking at your weblog will see the word or words you have as the TEXT. This will be highlighted, and if it is clicked on, the browser window will go to the address specified by the URL.

You can also create a link that your readers can use to email you. Simply replace http:// with mailto: and insert your email address in place of the URL, e.g.:

<a href="mailto:myaddress@example.com">Email me!</a>

If you want to link to another webpage and have it open in a new browser window, just add target="_blank" to the tag. This tells the browser to open a new blank window for the link. The link would look like this:

<a href="http://URL" target="_blank">TEXT</a>