Customizing the Layout of Your Blog Page

Missed the Happy Run last Sunday, so I thought I'd write something useful (or something I found useful at least). This is a bit techie and not for the faint of heart but if this is something you've been meaning to do but never got around to doing because it's just so morbidly tedious, and could never figure out were to start, you're in luck my gentle readers and casual passersby, here's a step-by-step procedure on how to do it.

First a bit of background. You know how blog pages seem to be divided into 3 column? The middle column being your blog/widgets/bling-bling and the two other column besides it that are just gaping wasted empty space? Yeah, well, it's been bothering me of late. It makes my post look longer and imposing than it actually is. So I thought I'd dig in and click my way through into changing the layout of my blog. Surprise! surprise! Turns out the changing blog layout is a lot more complicated than it looks. And it ain't pretty boys and girls.

So if you're using Blogspot and wanted to change it, here's how you would do it. As soon as you log in to your account.

1. Click on the 'Customize' link on the upper-right corner of your blog.
2. There are 3 tabs there (Posting, Settings and Layout).
3. Click the Layout tab. Under the Layout tab, there 4 sub-tabs there (Page Elements, Fonts and Colors, Edit HTML, and Pick New Template).
4. Click "Edit HTML" tab, and you should now see the "Edit Template" and right below is the code for your blog web page.

Now this is where it gets nasty. Gone are the days when you simply edit HTML tags. Nowadays, you gotta know some serious CSS kung-fu if you want to get some loving out of non-trivial web pages like Blogspot. Now, I may not know enough CSS kung-fu but I'm a Ninja! "If there was a problem yo I'll solve it. Check out the 'hood while my DJ revolves it! Ice Ice Bebe.." Yo! Y'know what I'm saying Bro?!

Now CSS file might be beloved among web developers and can pass off as your regular, ordinary config file but it's not. It's a bane for normal people trying to take ownership of web pages freely hosted somewhere in the wholly wild world of Internet (hehe, define irony). It's cryptic, indecipherable and perilous to go near them. Fortunately, we only need to change a couple of the settings and not create one from scratch. So here's the basic format to keep in mind when changing the settings:

Selector { Properties: Values; }

The Selector is an identifier to certain part of your web page. The Properties are a way to control those certain part of your web page. The Values is of course the actual settings you change.

Below are the basic settings you need to change. The highlighted text is the modification you need to make. Your mileage might vary of course but so does our aesthetic taste :-) so play around till you get the right layout for you.



#header-wrapper {
width: 990px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 700px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}

Change, save, refresh and voilà! Your newly customize layout, just the way you wanted it.

And now here's before and after pic. Happy Hacking mga kapatid!

Fav Tools For A Richer Blogging Experience

[Note: If you're having problems viewing the pictures, just point your mouse at the pic and click. If you're still having problems, leave a note and I'll check it out]

I've been using this Web 2.0ish online journal called Daily Mile to log my running and fitness regimen. Very nifty tool. First saw reference to it from runningdatc's blog. I thought I'd also share some of blogging tools I find indispensable or at least those I couldn't live without. It's always good to share something that other people might find useful, good karma points. So here it is boys and girls, 'hope you find it as useful as I do.

1. Web Analytics
2. News Aggregator
3. Google Alert
   

1. Web Analytics. These are tools that allows you to collate, measure and analyze data or 'hits' on your web pages. There's plenty of them around but I use Google's own analytic tool since it plays well with other Google apps. Here's snapshot:


Wordpress have a built-in but limited web analytics tools but for a richer set of data that you can slice and dice, go with a real web analytic tools. I had 3,589 page view for the last 7 months, using web analytics it allows me to mine my stats for some really interesting tidbits.

Example: One-third of my visitors came from outside Philippines (ie. US, UK, Singapore, Germany) and these are repeat visitors! (I didn't bore them to tears :-)) Of course I have to quantify that by saying that most of these visits abroad was source from other blogs, so a lot of it was referral. So for instance, half of readers from US were initially reading SFrunner's blog before heading to my site. Mucho gracias Wayne! Now for readers outside US, it's been mostly organic (via Google/Blogspot/direct). They somehow came upon my blog and came back for more (aw shucks). Now here is an interesting part, based from their network location/Internet gateway a lot of them are reading my blog at work! Hehe, how cool is that? :-)

Web analytics is good tool, use it track your traffic and get some really interesting perspective.

2. News Aggregators/RSS Readers. This topic came up briefly at the last Christmas dinner with runner bloggers/friends. From the looks of it, hardly anyone uses these tools (except for one or two guys), everyone either manually check blog updates or go to sites or blogs that have this small newsreel app that display brief headlines/updates of other blogs that the author follows. This is where news aggregrators comes in, it enables you to follow news sites, blogs and other RSS/Atom-enabled websites without using your web browser to check for updates.

Let me put it in perspective: When I started blogging I only keep track a small number of bloggers. Must read in my list are the rock stars (The Bull, The Bald, and Bards) plus a few other blogs, so that's a total of 7 or 8 blogs that I manually visit a week. Not bad. Fast forward a few months, a running boom and parallel jump in the number of people blogging their running experience. So now I keep track of close to 30 blogs. Now imagine keeping track this number of blogs manually... yeah not good. And that's where aggregators shines. It aggregates blog updates and pull them to your news reader to be read at your convenience. Really, this is more of a productivity tool than anything else although I'd hardly call keeping track of various blogs productive :-)

(Hmm... I'm starting to feel like I'm pontificating or something) Now, in case it hasn't sunk in how incredibly useful this tool is. Check this snap shot carefully.


Notice anything special? Yep, a single repository for all your favorite blogs. Blue means number of unread articles. Red means new post based on chronological order. How's that for productivity? :-) I use Akregator from KDE. For Windows check here. For Mac check here. Or just use Google Reader. Bonus points: you also avoid those bling-bling that bloggers are so fond of.

3. Google Alerts. These are alerts sent to you based on the search items that you've defined. Technically, this is not really a blogging tool, mostly just one of those tool you keep handy for some nefarious end (kidding :-)). So let's say you want to keep track of particular topic or update from any of the web sites, news, blogs or mailing lists (even video sites), this tool will track it for you. If any of these sites posted your "search items" an email notification is sent to you. I use it as personal tracker for any mentioned of my name in the web, you'd be surprise the things it can track and come up with. The little tool that could. So... wanna track your High School principal? Yep, this tool is badass.

Blogger vs Wordpress

When I first setup shop for my blog two months ago, the idea is to blog all the things I find interesting. Running, life, stuff (stuff as in technical stuff I do). But as popular cliché goes, life happens. This blog more or less evolved into a running-theme blog with sprinkling of various musing, rambling and whatnots. And my technical blog was put on hold. Mmm... actually, I was just procrastinating (as is my wont) doing my techie blog just doesn't seem that interesting. But better late and dead than never.

Which brings me to Blogger vs Wordpress death match. (I've briefly considered LiveJournal and Multiply.com but those are too Web 2.0ish and too teenager-y for me). At the time I started blogging, I was already hook to google suite of services (ie. Calendar, Notebook, Reader, Picassa, iGoogle). And so it was a natural progression to use their blogging tool. I didn't bother checking the competition, my experience was such that I'm content to stick it out as is with Google service despite all the whiz-bang widgets and popularity of Wordpress/Multiply/LiveJournal.

All good in paradise until I noticed that all the blogs I subscribe to are overwhelmingly in favor of Wordpress (for both web service user or hosting their own domain), hmm... what am I missing here? So for my techie blog, I thought I'd head over to Wordpress, give it a spin and see what new features I can use for better blogging experience. So after few hours of fiddling, here's what I found out:

- There are plenty of themes and widgets to choose from. All nicey and cutesy.
- Built-in visitor stat which is very convenient. No drama or tinkering with 3rd-party applets, just turn it on and off you go.
- Contact form which I can't seem to find in blogspot. As it is, my reader would have to use the comment section and make a note that this is personal message and not for public consumption.
- Wordpress automatically include the IP address of readers who left a comment. Useful for tracing rogue commenter.
- Folder-like tabs for different section of your blog. So let's say you want to have 'About' info in another section of your blog that doesn't clutter your home page, it's a cinch and elegant in Wordpress , kludgey and ugly in Blogspot.

Wordpress do have their plus points.

That said, most of these features are really skin-deep (unless you're using wordpress.org -- more on that below). Some of their (critical) behind-the-scene components are so rudimentary as to be outright useless or just not available. You wanna track the minutiae location of your readers (or at least by the city) or perhaps where you're getting your traffic from? Or compare your new visitors against those returning? good luck! Wordpress doesn't believe in web analytics. You want to extend those theme with a few lines of html/css code? Javascript? forget it! Widgets you say? Well, compare that to 44,000+ gadgets you can used in blogspot. Adsense? They seem to have something against it, no easy does it button for you.

Think of Wordpress/LiveJournal/Multiply as glamour chick you'd like to be seen with at the mall, all nice and glittery. Think of Blogspot as girl-next-door chick you would normally hang out with. Not the beauty queen of Web2.0 just the basics but flexible and more fun to work with.

Of course, it would have been a different story if I opted for my own domain and use web hosting for my blog software of choice. Then I'd definitely go for Wordpress.org which provides more customization. But as it is, I don't particularly like the idea of administering my own blog (ie. filtering spam, fiddling with third-party apps, etc) when it's done more efficiently by Google nor paying for the privilege when it's already gratis (well, the latter is not strictly true just a compelling one).

So in the end (or at least for the moment) I'm opting for Blogspot.com which is just exactly what I need for my next blog.

PS: My other blog focuses on Linux and open source software, mostly setup and configuration I did. Nothing there at the moment, but if Linux and open source are your thing, come back in few weeks time, and see if you find it relevant or useful.

Web Analytics

Two weeks ago I thought I'd setup web analytics for my blog. Like most new bloggers, I was curious to see if my blog is connecting. Google fan boy that I am, I used their web analytics service. It hasn't been integrated yet to blogspot.com but it's still a breeze to setup.

So after two weeks, here are the raw numbers: I had a total of 166 visits and an average of 11.07 visit per day. Woot! Woot! Hehe, I'm shallow, I know :-)

So what does google analytics tell me about those 166 visits? Some of the data are quite interesting. (visits are not hits, remember raw 'hits' or stats are misleading, ie. objects in your blog like pictures/movies also generate separate hits but are all collated into a single web hit counter so visits are always less than raw hits).

- Most of my visitors are from Philippines, no surprise there. But quite number of them are from abroad. Some came from California (ie. Sacramento, SF, others... thanks SFrunner) and some from other Asean countries. But it was surprise to see that my blog reach as far as Euro even Czech Republic, Australia, and Russia. My own little space in the whole wide world of Internet and people finding it :-)

- 75.30% of my audience are returning visitor! Yahoo! Imagine that, people came back and I didn't bore them to death.

- Tech Profile: 50% of my visitors uses Window/Internet Explorer combo, no surprise there. But number of readers also uses Linux/Firefox setup, tech-savvy guys (slight emphasis on guys, since it's a pretty rare to find girls who's into Linux and other OS stuff). 11.45% uses Mac OSX/Safari combo (hehe, people with money to burn :-)) A small percentage uses Mac OSX/Firefox and other OS (ie. BSD, Unix). I used Fedora 8 so rock on!

- Some of the traffic I generate came from search engines. Apparently, if you google Baracuda Adidas, one of the hits you'd get is my blog.

Thank you dear readers, for a new blogger like myself, it's a blast to know that my blogging somehow connected with other people! And that it strike the right chord among different people (hehe, I'm over-reacting of course :-) but that's how I'd like think about it)

Yep, it's blast to blog things you're crazy about and I can't think a of better way to keep myself motivated. I hope you join me in my blog and together we can enjoy the wonderful world of running.

And to steal line from lonerunner, run on friends!