Hooray for Blogdrive!
Quote of the day: "Awesome new stuff "- John Furie Zacharias
A few new features have come out for Blogdrive that are seriously awesome. Two of them require a little action on your part in order to take advantage, and another you have probably already noticed, and only your readers (or mine, lol) have to do anything.
First, the [archive] tag will now allow Blogdrivers a quick and easy way to list... well, their archive... of entries in a convenient drop down box, listed by year, month and title. It's a standard black font on white backround, and I've placed mine directly under the calender ---->. If you look in your main template edit section, find the [calender] tag, and put <br>[archive] right next to it, and it'll look just fine. When you preview your changes before saving (after of course saving a copy of your template PRIOR TO EDITING), it may look far too wide due to long entry titles, but that will be fixed automatically when you save changes. It will be the same width as mine, which is 120 pixels.
Next, the [categories] tag allows you to categorize your entries as you see fit, with a little checkbox in your WYSIWYG entry editor so you can easily tag your post to a certain category. Another tag, [category name] will display the name of the category your readers are in once they have clicked. These tags need to be added to your main template, side section, or profile section editors.
Finally, what you may have already noticed, or what you may notice in a moment when you LEAVE ME A COMMENT, is that comments now feature the pictures of Blogdrive users that have commented. Comment comment comment. First, of course, for your picture to appear, you need to be registered and logged-in with Blogdrive, and you need to have a Blogdrive Profile established, but for most of us that isn't a problem. From then on, it's easy-livin', dawg! RACK UP THE COMMENTS.
Blog Layout [Tags]
I'm not very familiar with very many other blog sites, but this one uses a reference tag to display information that you've put somewhere else, like.. the WYSIWYG editor that you create your entries with. Other examples are things like your profile section of your side bar, "header" space above your main blog area; and even little things like the time and date that you post your entries.
If you look at your blog layout in the "main template edit" section of your Layout & Design page, you will see quite a bit of code. If you're planning on editing this layout, you're probably a little familiar with some of these codes. There's some CSS and some HTML, but there's also these little words inside brackets that look like [this]. These are the reference tags.
(Note: Blogdrive recently added a function that allows you to categorize your entries for easier browsing. Old blogs will have to be updated by adding a [categories] tag to your layout. Becareful when editing your layout, and copy your layout to a text document to secure yourself from irreparable damage. Then you can create your different catagories and label entries accordingly.)
I recently ran into a little trouble with a couple of these tags when I was working on my layout. In general, you can sort of put these things anywhere. Hell.. get creative! But some of the tags require a little attention to the way they're all setup. For a complete list of all tags and some information about how to implement them, click here.
While this page did help me figure out the problem with my comments section, it didn't explain that if you put the non-sensative tags inside the sensative area then these tags won't be recognized and they won't work. I was having some serious trouble with the tags for my next/previous page links, and still don't quite understand other aspects of what was going on.
However, I did realize that the reason these tags weren't working, but rather just showing up as regular [text], was because I just had them in the wrong place. As simple as the solution was, the problem had me stumped and still sort of has me stumped. They work, but when I try to put them where I want them, they have some alignment issue. That's another issue for another entry... THE END.
Begone Ugly Scrollbar
Not all tag boards are born beautiful. Some need to be tweaked and foremost of all ugliness problems is the sometime horizontal scrollbar that appears out of nowhere (okay, not really).
Anyhoo, for all ye Blogdrive bloggers, to remove it, all you have to do is to add this snippet of code in the BODY
section of the tag board CSS editor
Or if you prefer to embed it in your style sheet:
And voila! It is pretty again.
Thanks to the girlie matters
for the tip.
Simple Image Mapping
by John Furie Zacharias
Here is my own low-tech hack method of image mapping that I developed while working undercover as a marine biologist teaching fish anatomy to grammar school children in the Cayman Islands. *
The low-tech HTML table method of simple image mapping means that you must decide upon an entirely horizontal and vertical grid for your image. HTML tables only support rows and columns, not irregular polygons and circles. So, we have to make decisions how to chop up our image.
As you can see from the pink lines and numbers, I chose to create a 3-column and 4-row HTML table. Now that we have sushi-cut our fishy to highlight its anatomical parts to become HTML links, we can continue our work using one of two different methods. I'm going to focus on the black angel fish's fins for the sake of explanation.
The first method requires that you edit the original image and cut it up to fit into your HTML table. Using your image editor software, you need to create 12 seperate images, like squared puzzle pieces. For the sake of brevity, here is the first row of images 1, 2 and 3. I added cellpadding space so you could see that there are 3 images below.
Using this first method and the same images as above, you then wrap each image in an HTML hyperlink destination of your choice. It will look something like this, linking the 3rd image to the wiki definition of a dorsal fin:
So ... only 9 more image edits to fit into our table puzzle and then we still have to link them all. I have a much faster and easier method of doing this.
Using the same concept, let's make our 12 image links by virtually cutting up the original image. However, instead of using image editor software to make our puzzle pieces, let's use our original image in full as the background image of the 3-column and 4-row table. Then, we can simply use our magical transparent image as the wrapped image link, sized for each of the 12 table cells.
I think my second method has several time-saving benefits. You don't actually have to carefully cut up the image. It's all imaginary cutting and sizing with a transparent GIF image wrapped in the hyperlink for the destination page. You only have to host the original background image and the one transparent GIF image, rather than all the individual piece images.
Hey Kids! Click on the fish's fins to learn more!
Go ahead. Click. I said, CLICK. Okay. Click on a fin now or no snack time for you.
If you want the HTML code for the above table in order to understand it better, simply use your web browser's View > Source option.
Creating Topic Lists
by John Furie Zacharias
When I became a Blogdrive subscriber, one feature (see chart
) that I didn't expect to be used very much was the Visitor Search Ability
because I had already been using a third party search widget when I set up my free starter blog. Many blogs also use the Google search widget as we do here on HelpForum blog. Nonetheless, I recently developed a way to use the Blogdrive search feature as a topic, or category, listing feature on Thunderstorms in the Imajica
Actually, I had this idea a long time ago and only tinkered with it. I recently decided to expand its use on the blog. In the beginning, I really didn't understand what data the search feature was using and set my idea on the back burner. However, rather than procrastinating forever, I decided to use what I did know about it and share it with you.
• When your subscription plan includes the Visitor Search Ability feature, you can enable or disable it on your Layout & Design blog management page.
• When enabled, Search this blog appears wherever you have placed the [search] tag in your main template.
• When disabled, Search this blog does not appear on the front end of your blog, but the search feature still functions.
• When a user clicks Search this blog, it will display /archive/search.html with a blank query form for your blog visitor to enter keywords.
• In your main template CSS, input.sbtn and input.sfld are customizable elements for your search.html page.
• When a visitor enters a keyword for search, it is passed along as /archive/s?keyword.
• The search function definitely scans all of your entry titles for a keyword match.
Given these half-dozen observations, I decided to use my entry titles with a simple html link list table in my side panel to create a topics list for Thunderstorms. Click on the links below to see how easily it works.
I really prefer keeping visitors on the blog, rather than them being shown a query hit list on a vanila web page and then making them click again to come back to the blog.
The Blogdrive Visitor Search feature is more efficient, loads faster, and looks cooler because it's using your blog template. The RSS preview style is great for a blog with a long history and many entries because the [next] page function is something already familiar to your visitors.
Obviously, since my side panel is displayed on every blog page, I decided not to put the topics link into the footer of my entries. This is just how I decided to use it.
If you wish to create a topic system manually, you can check out the Topics List page here on HelpForum blog as an example.