Wayfaring Stranger

Blog Skins

Note: I have seen a few visitors coming to this post ... Welcome! BTW, when I changed to "Peaceful Rush" theme, I seem to have confused my server that offers the different skins. Please bear with me ... check back in a couple of weeks and I should have things fixed. Thx (5/18/2007)

I've been working on these skins and scripts for a while and I think I am finally comfortable with showing them off (being a perfectionist has its disadvantages :-). I have been using this skinning effort as a learning experience to get better w/ XML and XSLT. It has been fun and I hope you like a couple of the skins. Without further ado, the following is a list of the skins available for my blog:

Minima default (hosted on blogspot.com)
This is the default because it is the default site used by blogger.com and should always be available.
Minima (mimic)
Douglas Bowman's Mimina theme copied onto my home server for use by my skins. 'Mimicked' because I slightly modified the original CSS to work with my HTML. Even tho my HTML differs quite a bit, the look and feel is quite close.
"Lord of the Rings -- The Shire" theme.
No images are used in this theme (like mimia), it is a skin using colors only. It will be faster than LOTR (above) and Paradise (below) b/c there is no image download time.
Ocean (2)
This skin is like Ocean above, but shows off CSS muscle by swapping the columns. Same HTML, just a different look .... ohhhhhh.
Ok, I havent really looked at this skin with a PDA; but the layout is narrow and displays fewer colors (which should be suitable on a PDA, internet capable cell phone, blackberry, etc...); should the need arise.
"Paradise Blue" theme.
Paradise (2)
This skin is like Paradise above, but with "naked" panels. Not *too* usable, but shows off the cool background better.

The first skin (Minima) is my default "iwanttokeepanon.blogspot.com" theme. Since this site should always be available (a google affiliate I think), it is a safe bet for bookmarking. The rest of the skins are "fun" and may not be always available (subject to TXU-Energy and SWB outages, neither of which are "always on" as they claim).

The rest of the skins (2-8) are hosted on my home Gentoo Linux server; which is "almost always on" :-).


Q: So you can show off some HTML/CSS stuff; but why provide multiple skins?

A: Glad you asked (as if you did)!

  • First, I point my skinned pages to an external stylesheet; vs an inline stylesheet (which is what blogger does). If youve ever viewed a blogger theme before, you know what I'm talking about.
  • Second, I serve the main blog entry column before the sidebar column; which moves the real content "up" in the HTML. Some Blogger themes serve the sidebar column before the main blog entry column.
  • Both of the above decrease the time from "server request" to "client display" (aka. makes it look faster), and increases keyword density (good for google rankings).

A: because this is an XSLT / XML learning experience. Each of the skins (2-8) are generated via an XML stylesheet (called 'atom2theme.xsl') which "reads" my blog's atom feed (stock blogger publishing stuff) and transforms it into HTML. Each theme is then "beautified" via CSS (Cascading Style Sheets).

Is your head spinning from the geek-speak? What that really means is that your browser will read /exactly/ the same HTML for each skin. And then change that HTML to look pretty in your browser via a stylesheet. So ... your browser can cache the HTML and it can cache the CSS; which should make it pretty fast for you.

A: because it gives you a choice ... what can be better than that?!?


Q: What are the disadvantages of hosting your own blog skins?

A: Glad you asked again!

  • My server may be down due to TXUE or SWB outages. But I estimate a 90%+ uptime. If it isnt raining or lightning, I maybe up for more than a month.
  • My DSL connection may be slower than the blogspot.com website.
  • Blogger only serves _blog entries_ via the 'atom.xml' feed. So I download my _sidebar_ (links, sci/fi character, blogdom of God, etc...) once a day max. So the non-blog content isnt always real time acurate; but I dont change my sidebar that much.
  • During a sidebar *sync*, if an external website is offline (namely the blogdom of God), your browser my sit waiting for a timeout on the other server. (note: this could be solved by forcing a sync once per day so that no visitor causes the sidebar sync)


Q: I am an internet scripting guru and I desperately want your code. Can you give it to me or host some of my skins on your server?

A: ummmm, well; I would be glad to give out my XSLT and perl code, thats no problem. But increasing my PCs load isnt one of my personal goals right now. In fact, I offloaded all my skin images to Photobucket to decrease the hits to my server.

Note that the main blog entries column (the column youre reading right now) is generated from blogger's atom.xml feed, but the sidebar is ripped from the usual HTML stuff that everybody sees. Since the HTML sidebar is read by XML/XSLT tools, you would need to either meet my XSLT script assumptions or change it. Aka. your sidebar needs to follow blogger sidebar rules (H2 followed by a UL list) and needs to be HTML 4.01 valid (no unclosed tags and such). If you are serious, just leave a comment to this blog entry w/ a way to contact you.


1 Responses to “Blog Skins”:

  1. Thanks for reading my post and comments that follow ...
  2. Google : iwanttokeepanon (i did). And you will see that the ~3rd link is:

    And the ~5th link is:

    That means the CSS + XSLT + move JS down techniques that I used to increase keyword density is working. My home PC/server is ranked higher than the equivalent blogspot site!

    Unfortunately the comments are not in the "atom.xml" feed and cannot be rendered via XSLT. So the "read/leave feedback" links not only point back to blogspot, I cannot display the number of comments on the main page. Maybe I should have a look at the blogger API?


Post a Comment

<< Home