Edit HTML for templates in Blogger Beta released

It is here! Big excitement!! You can now edit your new Blogger Beta template. I have just found out and am researching it. At first glance it seems things are a little different. Just scanning the documentation, the new template language is completely different from the original one. There is much talk about widgets and sections...oh my.

So, above all, save your template before doing anything. Another way to experiment without damaging your orginal template beyond repair is to open an experimental blog and paste your template in. Go from there.

Here are a few links to get you started:

• Can I edit the HTML of my blogs layout?
• New Old Feature on Beta
• Page Element Tags for Layouts

Make your own offical seal

I don't know why, but anytime I can make something...a button, logo, seal, header...it makes me happy. Here is my newest find the Official Seal Generator. Much happiness!!! It was pretty large, so I resized it to half the orginal size. Pretty nifty.

Fluid 3 column Blogger template

I was inspired to the point of acting on it. The post by George Mikos made me realize that I wanted had to have a fluid CSS template. The thought of my blog expanding to fit each and every reader's computer display was very tempting. So, throwing caution to the wind, I jumped in.

It was relatively simple. Realizing the sum total must be 100% and I had three columns...two sidebars and the main content...I did some simple math. I first addressed the entire content:

• left margin 5%
• right margin 2%
• width 93% (this 93% contains the main and two sidebars)
  

I then assigned these values: (Follow me here. This is 100% of the above 93%)

• main 50%
• sidebarleft 22%
• sidebarright 22%
• 6% for the space between the columns
  

To actually edit the template, I located #content, #main, #sidebarleft and #sidebarright in my style sheet. In each one of those I edited the width property by removing the px value and replacing it with the % value. For example:

#main {
width:410px;
float:right;
}

changed to:

#main {
width: 50%;
float:right;
}

I tried different percentage amounts for the sidebars and main, until I found what I liked.

There is controversy over fixed vs fluid design. I had fixed and was never really happy with the way it displayed on different displays. I like the fact that now my page looks like it was made for each and every display. No large expanse of unused whitespace. I know...I like whitespace as much as the next person. It is striking when it is part of the design. Not when it is only there because of the limitations of a fixed template source.

Then there are schools of thought on the optimum line length for ease of reading. Some say 12-15 words are best or 55 characters. Others say longer lines are better. For me, I don't think it will be such an issue because I have three columns. But, I do have another little trick in mind, and I will write about it when I get it working!

So, let me know what you think. What computer display you use, and how do you like it? Any suggestions?

Customizable blogger template

Yes, artistic standards. The source should look pretty. Although authoring HTML and CSS is a decidedly left-brained, analytic activity, the right brain's capacity for gestalt can play a valuable role.RealityTopia

This article at RealityTopia Blog gets into the inner workings of a template. George Mikos wrote his own template source out of a need for an easily customizable Blogger template. He not only shows you the how, he explains why. I am able to learn much easier if I know the reason behind doing something, and he certainly provides that. The article is easy to read and interesting. Much like his template source which he takes great pride in. And he should.

I fully intend to study his methods more. I am interested in it all, but especially in the use of the CSS float property to dynamically access the entire width of a computer display screen, be it 1024 x 768 or 800 x 600.

There is much to digest in his post. I highly recommend looking it over if you have any interest in building your own template.

LibraryThing widget for your blog

LibraryThing allows you to put your book titles online. You can enter 200 titles for free. For an unlimited amount of books, it is $10 for a year and $25 lifetime membership. Joining is extremely simple...no first name, last name, secret question, email address, repeat email address, jumping through hoops. Adding books to your collection is as easy as joining. Just type in the title or author. A selection will come up and you click a title. After joining and adding some books, you are able to see who shares the same books. There is an active forum for discussing books and anything else you want to get off your chest.

If you want to share your collection in your blog sidebar, a widget is offered. You can configure it as you like.

Here is my little widget.

Customizing your header - Web2.0 Logo Creator

Here is another little fun thing I came across...Web2.0 Logo Creator It was meant to be a paradoy of Web2 Logos. But, it is still eye catching. I had entirely too much fun with it.

1 easy step to improve search box design

I stumbled upon a great little bit of code called Beautiful Form. It was written for Stylist, a program that is to CSS what Greasemonkey is to javascript. (So, it doesn't show up in Internet Explorer.) I liked it so much and wanted it to be incorporated into BlogU. So, I copied the code, made a few changes so it would blend with my blog and put it in the stylesheet. Here is what the search box looked like before and after:





Here is the code that I used:

@-moz-document url-prefix(http) {
/* change the buttons*/
input[type="reset"], input[type="submit"], button
{
-moz-border-radius: 0.5em !important;
border: 1px solid #CCC !important;
border-bottom: 1px solid #CCC !important;
background-color: #EEE !important;
color: #555555 !important;
}
input, textarea
{
-moz-border-radius: 0.8em !important;
}
input, textarea,select
{
background-color: #FFF !important;
border-top: 1px solid #C3C3C3 !important;
border-right: 1px solid #C3C3C3 !important;
border-bottom: 1px solid #C3C3C3 !important;
border-left: 1px solid #C3C3C3 !important;
color: #555555 !important;
}
/*change them on focus with a blue border*/
input:not([type="button"]):not([type="reset"])
:not([type="submit"]):not([type="checkbox"])
:focus,textarea:focus
{
-moz-outline-radius: 0.8em !important;
}
input:not([type="button"]):not([type="reset"])
:not([type="submit"]):not([type="checkbox"])
:focus, textarea:focus, select:focus
{
-moz-outline: 2px solid #ccc !important;
-moz-outline-offset: -1px !important;
}
/*rollover effect on the buttons*/
input[type="submit"]:hover,input[type="reset"]
:hover,button:hover {
border-color: #E8E9E8 !important;
border-bottom-color:#E8E9E8 !important;
background-color: #FCFCFC !important;
}
}

If you prefer to start with the orginal code, you can find it at userstyles.org.