Adding Sitemeter

I WAS ABLE to pull it off in my other weblog first, so it is kind of an afterthought here.

Nonetheless, having a free webcounter like Sitemeter that tracks visitors and generates other useful statistics is an essential adjunct to the blogging experience.

Installing it in Blogger Beta is different now, thanks to the Page Elements function that treats it as a widget. The steps can be found here, which presumes one has already secured an account with Sitemeter.

Taking the pains in adding that widget somewhere in the blog is critical; as I belatedly discovered, Sitemeter only starts counting when it is already embedded as a script, not when an account is opened. In the case of my other blog, opportunity cost came at the price of three weeks of zero -- as in zilch, as in a big fat egg -- traffic when there were visitors who either dropped by and left instantly, managed to lurk around, or commented to their hearts' content.

But it's better late than never.:)

Fixing width issues in Internet Explorer

I'VE uninstalled Internet Explorer for a number of months now, so I use the local Windows Explorer to see how the Microsoft browser handles my other blog.

Early today, I did the same with this test blog: a critical afterthought considering that IE does not intuitively understand the logic of my 3-column template design, unlike Mozilla Firefox. (Another proof of the latter's hands-down superiority.) As a result, my blog posts spill over into the right sidebar.

After checking how my two sidebars were structured, I identified the absence of a width declaration in the blogpost wrapper. Defining the best width through trial and error, and saving it in my code, zapped the problem away. The test blog still looks jagged and worn out in IE, but it definitely looks better. Yet it cannot compare with how Firefox renders the whole thing.

Testing image

WILL posting an image work in my new template? I am as eager to find out.

So, here goes nothing...

Tada! A 3-column Jellyfish template

THANKS to Patty, our youngest brother who has an ebook copy of Rachel Andrew's The CSS Anthology--101 Essential Tips, Tricks and Hacks, I was able to implement a three-column blog design in Blogger Beta, which is -- to my limited knowledge -- widely available from Wordpress.

The key lay in using the div tag: the logic and methodology is available from Chapter 8 of that invaluable reference, written in easy-to-understand language.

I still have some tinkering to do, mainly manipulating the font sizes. But then again, it was another milestone in my effort to maximize Blogger Beta's capabilities, even if I turned upside down its Page Elements feature -- which is supposed to make blogging customization more painless.

I just love w3.org:)

IN MY quest to replicate my other blog using Blogger Beta, I am making new wonderful discoveries -- similar (in my own way, of course) to how Magellan or Columbus must have felt when they launched into their respective voyages seeking new worlds.

This site is definitely tops: the authoritative source for everything one needs to know about styling using CSS (that's cascading style sheets for you).

In fact, it just enabled me to tinker (using the good ol' trial-and-error approach) with the text decoration for my links -- from none to a thin dotted light blue line distinct from the dotted gray separator for my footer.

Neat, isn't it?

Solving the white space conundrum, finally!

THIS MORNING, I finally disposed of the white space between the post title and the body text, something that has stumped me since I began tinkering with the HTML code of this test blog.

The key lay in defining p (as in paragraph), which this wonderful site pointed to me.

Now, it's one major headache gone away, and the color combination of the links and the headers are now quite OK, more reflective of my other blog. Plus, I have added a nice dotted borderline between the body text and the footer, courtesy of this site.

I'm now facing the major decision point: are these enough to migrate that blog and enjoy Blogger Beta's enhanced capabilities?

I'll have the entire Penafrancia fiesta break to mull this over. But boy, am I overjoyed!

Workarounds: 3 - Enhancing blockquote

FOUR posts below, you will see that my blockquote now has a better look, thanks to a light yellow background I was able to tack in.

This was made possible by using a combination of the Pick New Template, Edit HTML and Fonts and Colors functions under the Template tab. What I did was to apply a new template (where blockquote attributes are more properly defined) to another blog using Pick New Template. In particular, Todd Dominey's Scribe template has this requirement. Then, I opened the HTML code using Edit HTML, located the following and copy-pasted it in the HTML code of this blog:

blockquote {
font-style:italic;
padding:0 32px;
line-height:1.6;
margin:0 0 .6em 0;
}

The Fonts and Colors function comes in handy in identifying the corresponding hexadecimal code for the background color I preferred. But to be able to apply this, I first had to create (again by copy-pasting and editing one of the original variable name entries) a variable name for my blockquote color: I called this blockquoteColor.

The final step was to insert the following line in the blockquote code I copied from the other test blog:

background: $blockquoteColor;

Confused? Most probably. But you'll only get to understand the logic if you also try...sometimes err...and get rescued by the "Preview" and "Clear Edit" commands under the Template > Edit HTML function.

Workarounds: 2 - Finetuning "About Me"

IF YOU will care to notice, there are now two "About Me"s in my sidebar. It is there to demonstrate another successful workaround I managed to implement, this time resolving my inability to remove the picture that automatically comes from my Blogger profile.

The trick is to use the Text widget among the page items that can be added using the Template > Page Element function.

It required some trial-and-error HTML work on my part to exactly produce the outcome I had in mind after adding the Text widget. Specifically, it required tinkering with the Span tag to manage font type and size and the Ul tag to separate the "View my complete profile" link from the main bodytext.

Unable to find a way to eliminate the space between the post title and the body, I think I will have to make do with what I accomplished thus far. Which means I am ready to migrate my other blog to Blogger Beta.:)

Workarounds: 1 - Restoring "Recently"

WITH THE Peñafrancia fiesta now underway, I was able to devote more time to this test blog.

A big headache I finally resolved was restoring the "Recently" list in my other blog to Blogger Beta. Thanks to eChuckler's solution that I found in the Blogger Help Group, I succeeded in adding a Feed widget that produces the same outcome, albeit on a limited manner.

The trick lies in copy-pasting the "Posts (Atom)" URL found in the bottom of the blog into the required URL box as one configures the Feed widget. Unfortunately, the maximum number is currently limited to 5.

I already used the Blogger Support Page to communicate my wish to raise the maximum limit to 10. Just a second ago, a canned reply entered my Gmail inbox; I hope something more concrete will follow.

The power of previewing HTML edits

IT WAS just past 4pm and I was already done explaining our Reinventing the Naga City School Board initiative to a group of visiting international academics and NGO workers. So I took the time to look under the hood of my test blog and do additional formatting tasks using HTML edit.

For one, I was not happy with the space between the post title and the body text. Unlike my other blog, where text flows directly right after the title, there is that white half-space separating the two in this test blog.

For another, the post title and body text are practically indented almost beside the left margin, which makes for a wider workspace that is too irritating to the eye. Unlike Microsoft Word, there are no similar point-and-click formatting tools available in Blogger Beta.

Fortunately, there is the highly useful "Preview" button when one invokes the Template > Edit HTML function -- a carry-over from the previous incarnation. In fact, it saved my day many a times when my trial-and-error attempts went awry. And while I was not able to fix the half-space separator, the white space to the left and right has made this test blog definitely more eye-pleasing.

A bug, and a workaround

SANAMAGAN, I just found out another limitation of the Blogger Beta, as I was trying to post a comment at Dom Cimafranca's blog. I can't. The message below (which I truncated) explains why:

Account Moved to a Google Account

The account you've just logged in with has been merged with Google Account.

You will need to log in to the new version of Blogger in beta with your Google Account.

Unfortunately, you cannot post a comment on a non-beta blog or claim a mobile blog using your Google Account. These features are coming soon.

UPDATE (9:44am): A workaround that would allow Blogger Beta users to post in the current Blogger-powered blogs would be to use "Other" as one's identity, and fill in the necessary information.:)

Editing HTML for the first time

LAST NIGHT, I already did some tinkering with the HTML code of this test blog, with positive results. Until my Blast card ran out: goodbye dialup internet...

But the sequence was quite fresh in my mind, so I implemented them after going through my usual internet "morning rites": checking my emails (Gmail, Yahoo and Hotmail), reading the news (Yahoo News, Yahoo Sports, Inquirer.Net, ABS-CBNNews, Google News: largely all at the same time), and finally checking the blogs in my roll.

Again, this HTML tyro was able to figure out how to retain the robust Arial Black title of his posts: essentially cutting and pasting the variable "blog title font" entry (which is built around that specific font) and renaming it "post title font". Neat, huh?

I also reconfigured my date header style to Verdana Bold, and used the Template > Fonts and Colors function to change its color to the shade of blue that matches my blog title.

It is the "Archives" widget that is proving to be too difficult: there's just too many greek-sounding and -looking line commands that my hotshot younger brother who's now working in some Paranaque-based international forwarder should easily understand.

In the face of this conundrum, I really postponing the migration of that other blog after restoring the "Recently" section in my other sidebar -- that I already thought to be largely irrelevant.

...looking forward

BUT, and this is a significant but, I

• am still unable to exactly duplicate the font scheme in the other blog here. I need to retain having the muscular Arial Black as the title font for my posts;
• even if by default, the Archives widget (which makes the "Recently" section in my other sidebar largely irrelevant) is right-justified when minimized, the post titles are left-justified when maximized. Which does not fit the design and style for my sidebar; in fact, it looks like the proverbial sore thumb sticking out; and
• need to fix the "About Me" introductory text leading to the expanded profile. They cannot be the same as these two blogs are radically different.

Which means I need to tinker with HTML, using the good, old trial-and-error approach, and in the process learn new tricks for this old dog!

So in sum, all premised considered, I am not migrating the other blog yet.:)

Looking back...

SO, AFTER a night-long sleep punctuated by waking up at midnight to attend to a crying daughter, where do I go from here? Before answering that, let me review what I accomplished:

For the whole of yesterday, I:

• set up this test blog, and chose a working template (Sand Dollar)
• manipulated the blog's fonts to approximate my personal blog
• incorporated changes in the sidebar, starting with the "About Me" and the Blogger logo widgets
• updated my links by typing all that I had in the other blog here, but was dismayed by an apparent inability to categorize them
• made post categorization operational (the main reason why I tried migrating to Wordpress) using the "Labels" widget
• successfully embedded the Technorati javascript in the sidebar, which meant I claimed this as my second blog
• discovered a workaround to the apparent inability to categorize links by adding mutiple elements of the same widget, and
  
• shifted the working template (Sand Dollar) to my preferred template (Jellyfish).

All these, ladies and gentlemen, without using the restored edit HTML functionality and tinkering with the HTML codes of this test blog. How about that for an enhanced blogging experience!

Manipulating templates

A REALLY powerful feature of the new Blogger Beta is its flexibility to change templates, and there are a handful, with ease -- without ever tinkering with the HTML code.

As can be seen here, I have shifted this test blog from the Sand Dollar to the Jellyfish template, which are both by Jason Sutter. The latter is the template of choice for my personal blog.

Questions, questions: Are the positive outcomes of these tests enough to justify the full migration of that blog to the new Blogger Beta? Or should I wait a little longer and try to discover more that this beta version has to offer?

These, I will sleep over tonight.:)

Enhancing "Links" through multiple widgets

THE VERY first impediment to the full migration of my personal blog when I first discovered Blogger Beta was (apparently) the lack of sub-categorization of my links.

Truth of the matter is, I like how I was able to organize my links under the original Blogger, using a trial-and-error method in the HTML code underpinning it. It had four sub-categories: Institutions, Blogs, Media and Resources.

Now, Blogger Beta allows you to do that in a limited way: through multiple addition of page elements using the Template > Page Elements function. Limited because unlike the previous incarnation, these page elements are independent of each other; there is no organizing supertitle like "Links" which I used.

Thus, you will see my sidebar already featuring four standalone Links List widgets corresponding to what I had. Though I like my original configuration better, this is, for the moment, good enough.

Embedding Technorati

ANOTHER useful widget in Blogger Beta that can easily be added to the sidebar is an HTML/Javascript functionality through the Template > Page Element function.

I successfully tried this, so a Technorati link can already be found in my sidebar.

Again, I was initially stumped by the "An error occurred. Please try again." message that attended my attempt to rearrange my sidebar widgets.

I found out that by closing all apps first encountering the error message, and then reopening them (shades of the classic Windows workaround: reboot when everything else fails, or hangs up) can do the trick.

Is Blogger playing with me, or what?

REGARDING the previous post, I think the Blogger gods were listening as I fired away. The error message is gone, I was able to save the edited template, and my sidebar is now arranged the way I want it.

An error occurred while working with "Labels"

I CAN'T get this thing fixed.

Having disposed of my planning workshop with the city's Disaster Management sector, I rushed back to the office to take advantage of its DSL connection and continue my adventures with the new Blogger Beta with HTML editing.

I have just tried adding the "Labels" widget -- Blogger's answer to Wordpress' "Categories" and Del.icio.us' "Tags." It works just fine because the process is pretty straightforward; as one writes a entry, there is already a "Label for this post:" window where categories can be created and organized.

I also added the Blogger logo as another page element.

As can be seen here, it already forms part of my sidebar.

My problem started when I tried reorganizing the sequence of the widgets. What I wanted is the following sequence from top to bottom: About Me, Categories (previously Labels), Archives (previously Blog Archives), Links and finally the Blogger logo.

For at least 10 times I tried saving these changes to the Template. But to no avail: I always get the message "An error occurred. Please try again."

Is this a bug that the Blogger team needs to fix? Or can it be that the new software frowns on the use of "Categories" in place of "Labels"?

Updating links

MY FINAL task early this morning, before I drive down to my planning workshop at the city center, is migrating the links from my personal blog to this test blog.

The "Links" section is another widget that one can automatically include in the sidebar, using the Page Element tool in the Template tab.

On the whole, it took me more than 10 minutes to complete the process as I had to input the information required (essentially every site URL and site name) one by one. I am not familiar with importing/exporting links so I had to ditch that option.

A significant limitation: It is not possible to organize one's links the way I did under my personal blog (where these are categorized under "Institutions," "Blogs," "Media," and Resources). Wordpress has this capability, by the way.

I hope it can be done under HTML editing, as I love the way my links are organized and presented in that blog.

Tinkering with "About Me"

WHILE manipulating the font, I also tinkered with the sidebar, specifically the "About Me" section.

Now, this is a default widget that Beta Blogger incorporates. Among the options available, I managed to change the text -- from the detailed entry under my profile to a shorter description. If attracted well enough, a viewer would then click on the link "View my complete profile" and see the whole profile.

But I have a problem with the options as the picture/image/graphic contained in the "Profile" is automatically placed in the "About Me" widget by default. And there is no option to delete it.

This is one task that the newly restored HTML editing option should be able to handle.

Manipulating fonts

I'VE just tried changing the fonts without actually tinkering with the HTML code. Everything have worked fine thus far, as there are options in regard to typeface and their sizes.

One can opt for Arial, Courier, Georgia, Times, Trebuchet and Verdana, manipulate their size and style, and choose where it will apply -- at the post body, title and date; the blog title; as well as those at the sidebar.

I chose Verdana because it is also my preferred font for my personal blog.

An obvious limitation, by the way, is that font options are limited to the six typefaces listed above. How I wish the list of choices can be expanded with ease -- just like uploading my fonts in the Windows Font. Or why not start with the fonts that come with Microsoft Office?

Wala lang!

I DECIDED to set up this test blog to see if the new Blogger Beta can live up to its hype:)