Welcome to The Blogware Mechanic!
The Blogware Mechanic is a regularly-appearing series of articles that will show you how to go beyond the standard features included in your Blogware-based blog, customize it in ways you may not have thought possible and make your blog uniquely yours. Each article in this series will cover a blog customization from start to finish, with explanations behind how the customization works.If you're new to HTML and other aspects of web page design, you can simply follow the instructions for the customization; if you're comfortable with web design and even programming, you can use the techniques covered as a starting point for your own blog customizations. Blogware Mechanic articles will have something for Blogware blog owners of all experience levels.
Permalink Icons
When looking at articles on your blog's main page or category pages,
you'll notice that there's an icon beside the title of each article. By
default, it looks like a page with the upper right-hand corner folder
over. It's called a permalink icon, and an example is shown below:
It's called a permalink icon because it's a permanent link to the article. If you click on it (or as web techies like to say, "follow the link"), you'll get taken to the article's article page, which contains:
- the full text of the article
- any comments for the article
- any trackbacks for the article
- the comments form, if comments are enabled
With only a little work, you can use any graphic as your permalink icon. The procedure consists of three steps:.
- Choose a graphic for your permalink icon
- Upload the graphic to your blog's filesystem
- Edit the "category" template of your blog
Step 1: Choose a Graphic for your permalink icon
You'll need a graphic to use as your permalink icon. You can either
create a graphic using your favourite image-editing software or use one
from the many shareware or freeware icon sites. This article will
provide a set of icons that you can use, just in case you haven't got a
graphic that you want to use as a permalink icon.Although there are no hard and fast rules for what size they should be, they should be relatively small. A permalink icon that's too large will tahe your readers' attention away from the article, but one that's too small will be hard to click on. Generally, you want the permalink icon to be around the same size as your headline font. In the example below, the headline text is 18 pixels, and the icon is 24 pixels by 24 pixels:
In case you don't have a graphic that you think would be suitable for use as a permalink icon, I've created one in a number of colours and put them below. Feel free to copy any and all of them:
(You can copy any of the graphics above to your hard drive by right-clicking on it -- if you have a Mac and a one-button mouse, hold down the ctrl key and click on the icon -- and selecting Save Picture As... or Save Image As... from the menu that appears.)
Step 2: Upload the Graphic to Your Blog's Filesystem
"My blog's what?" you might ask. Let me explain.Every Blogware blog comes with a filesystem, which is a fancy way of saying "a place to store files". The filesystem in your blog is similar to the filesystem that your computer has: it's arranged as files and folders. The filesystem has all sorts of uses that I'll cover in a future Blogware Mechanic article; for now, we're going to use it as a place to store your custom permalink icon.
We'll access your blog's filesystem through your Publisher Control Panel. If you haven't done so yet, log into your Publisher Control Panel. Then, click the File Manager tab on the Navigation Bar. You'll be taken to the File Manager page.
On the left side of the page, you should see a column that looks something like this:
This is a graphical representation of your file system, similar to the way the file system is represented in Windows and Linux, and to a lesser degree, on the Mac. "Home" is the master folder into which all your files and folders go; in a brand-new blog, it's the only folder in your system.
Although you can put the graphic that will be your permalink icon anywhere in your file system, I'm going to show you a little convention I use. In my blogs, I put any graphics that are part of the layout into a folder called "layout", to keep them separate from other sorts of graphics. To create the layout folder, type layout into the Create subdirectory textbox (located in the Options form on the page) and click the Create button:
This will create a folder called layout as an immediate subfolder of the Home folder. The column on the left side of the page should look something like this:
We now want to go to the layout folder, which we do by clicking on the word layout:
You'll know that you're in the layout folder because the word layout is highlighted in the left-hand column and the File and Directory Listing form will indicate that you are in the layout folder:
Once you're in the layout folder, you can put your permalink icon file inside it by using the Upload New File form located near the right side of the page. Use the Browse... button to locate the file for your icon on your hard drive, then click the Upload button to copy the file from your hard drive to the layout folder:
Once the icon is uploaded, you should see it in the File and Directory Listing portion of the page:
Now that the file is in your filesystem, you'll want to make a copy its location for the next step. The easiest way to do this is to right-click (or control-click on the Mac) on the fiilename and select Copy Shortcut or Copy Link Location from the menu that appears.
Step 3: Edit the "category" Template of Your Blog
Templates are a very powerful feature of Blogware-based blogs -- they control the layout. I could write at least a sozen articles on what you can do with templates, but for now, we'll simply concentrate on the category template, which controls the layout of articles on the main page and the category pages of your blog.You edit your blog's template in the Templates page of the Look & Feel section of the Publisher Control Panel. To get there, click the Look & Feel tab of the Navigation Bar and then click the Templates option of the Look & Feel tab:
(If the Templates option is not available, contact your Blogware reseller.)
You should see a list of templates like the one below:
You want to edit the category template. Do this by clicking the Edit link in the category row. You will be taken to the Select Style page -- click the Customize button near the bottom:
You'll now be in the Edit Template page. Click the Go button to access the template code:
You will be taken to a page with a text area that looks like the one shown below:
The text area contains the code for the template that defines what the main and category pages of your blog look like. This code is a mix of HTML and Blogware's built-in scripting language, BOTS. You can identify the BOTS parts quite easily -- they're the parts contained within the double braces like so:
{{this is BOTS code}}
Blogware uses your blog's templates as a guide for constructing the pages of your blog. Whenever it encounters BOTS code, it treats them as instructions and replaces it with the appropriate HTML. (I'll cover BOTS in upcoming installments of Blogware Mechanic.)
Look for a snippet of code that looks like this:
{{if restricted}}
<a href="{{view_url}}"><img src="/_images/locksm.gif" width="7" height="10" border="0" alt="Locked"></a>
{{else}}
<a href="{{view_url}}"><img src="/_images/page.gif" width="13" height="13" border="0" alt="View Article"></a>
{{/if}}
What this code says is:
For each article do the following:For now, we'll simply use the same icon as the permalink icon for both restricted and unrestricted articles. Replace the code shown above with the following:
- If the article is a restricted article, use the built-in "padlock" icon (located at /_images/locksm.gif) as the permalink icon for the article. The permalink icon is linked to {{view_url}}, which Blogware automatically replaces with the URL of the current article.
- If the article is not a restricted article, use the built-in "page" icon (located at /_images/page.gif) as the permalink icon for the article. The permalink icon is linked to {{view_url}}, which Blogware automatically replaces with the URL of the current article.
<a href="{{view_url}}"><img src="PASTE HERE" width="WIDTH OF ICON" height="HEIGHT OF ICON" alt="Permalink icon"></a>
Replace PASTE HERE with the location of your icon. You copied that location at the end of Step 2. Replace WIDTH OF ICON with the width of the icon, in pixels. Replace HEIGHT OF ICON with the height of the icon, in pixels.
In the case of this Blogware blog (blog.blogware.com), the code used looks like this:
<a href="{{view_url}}"><img src="http://blog.blogware.com/images/layout/permalink_icon_article.gif" width="24" height="24" alt="Permalink icon"></a>
Once you've made the change, click the Save and Activate button:
Your template will be updated, and the process of changing your permalink icon is complete.
Check the result by viewing your blog!
If you have any questions or are having difficulty with this procedure, leave a note in the comments below.
Hope you enjoyed the first installment of Blogware Mechanic!