Wayne John » templates

BlogSpot Blog – Using Free CSS Templates To Define The Look

Wayne — Thu, 07 May 2009 06:05:06 +0000

Last week I explained a little more about the skin tag, and showed you where all the [css] style declarations are going to be placed. This week I plan on showing a few methods I use to create custom themes for other interests of mine. I’m also going to apply those same techniques to create a Blogger template, which is what we’re here to do.

At this point, you should also understand that the [html] that defines the page resides between the <body> tags. If you haven’t yet, you might want to review the skin tag post, because this is an on-going series. You might also want to subscribe to my blog to catch each of these posts as they happen.

Where to find templates

Templates are all over the Internet. Simply typing in the search terms ‘free css templates’ brings back over 10 million hits. Using the ‘WordPress’ keyword you get a little more than 300k results. Using ‘Blogger’ you get nearly 900k results. Needless to say, you can find pretty much anything you want this way.

However, I’m not looking for a template that I can just slap onto my blogger template. Instead, I’m going to look around for style elements that I like, and create a brand new theme, based on all the existing templates whose ‘parts’ I like.

When I need a template though, I will browse through these sites:

FreeCSSTemplates.org – Not only do they have terrific [css] templates, but their recommended sites list is also handy to jump through. The quality of their templates are normally top notch.
Free-CSS-Templates.com – Yup, yet another one with fine quality [css] template shop.
FreeCSSTemplate.net – And finally another great site with very impressive templates.

You should see the trend there. Free CSS Templates are everywhere and free to use all while giving proper credits where due. Like thanking the original author for instance.

All you need is the [html] and the [css] and you can do pretty much anything. Best of all, it’s really easy to do, once you get a few ah-ha’s working for you.

Licensing

Just a quick blurb on licensing. Most all ‘free css templates’ you find will likely have a license of some kind attached to it. You should review the licensing agreement to make sure you’re not going to have issues down the road. I don’t want to get into a dissertation on licensing agreements in this post, because that’s a whole different ball game that I don’t even want to get into it. Important, mind your legalities, but snore.

Avoiding problems by planning an approach

It’s an important fact that some parts of template demonstrations you find may not work with Blogger. There are some constraints that have to be dealt with, like not being able to include any additional files. If additional files are necessary for proper usability, then hosting will then need to be addressed for those files, or one should be able to migrate the functionality found in those files, into the Blogger template itself.

The Blogger template is a single page that provides multiple views, so there are certainly going to be things that are possible, and things that aren’t.

What do you think we’ll run into?

As you might imagine, there are a million things that can go wrong, and things WILL go wrong. It’s part and parcel to mucking about with code. The trick is to find the basic structure of what you’re going for. We want the form and structure to be as close to acceptable as possible.

Some thoughts about the Gluten Site

I firmly believe that the look of a web site isn’t nearly as important to your audience when compared to what your audience gets from the content. It was hard for me to accept that, and I was so convinced that I needed a ‘perfect’ template. Here’s the thing though:

You will never find a perfect template

There are always concessions to be made when getting something for free.

As far as the Gluten Free site goes, I’ve found a template that does a good job in presentation. Here’s a snapshot of the template I’ve found:

What I like about this is that I can swap out the header image to be anything I need it to be. Not to mention all the parts are very well defined, not only in the larger structure, but the details in the post items as well. All certainly do-able looking so far.

Follow this link to download the Pizza Parlor Theme if you are following along.

Inside the zip file, you’ll find the following files:

default.css – This contains all the [css] definitions.
index.html – This file contains all the [html].
images folder – A collection of image files that are referenced either in the [css] or the [html] file.

You might think that at this point we can:

Take the contents of the default.css file and place them exactly over the existing body [css] definition in the Blogger template
Take the contents of the [html] file and replace the contents found between the <body>body> tags in the Blogger template

Guess what, you can. However, when you try to save it, it fails with an error. Stating that an “entity reference blah blah blah is referenced but not declared”. With this particular template, I know what the problems are, and I’ll explain them in a bit. If you use a different template, you’re potentially going to run into several errors with that template as well, and those bugs may not be as easy to squash. Nor might they be the same. Who knows what you’ll find. This is where a general knowledge of [html] and [css] will come in handy. But really, it just takes a good bangs on the head for things to sink in. You’ll never get it if you don’t try.

Handling Some Errors

In this template, there are 3 errors that occur when you blend in the [css] and [html] from the free template, and they each have to deal with a web standard that Blogger does a little differently.

For whatever reason, Blogger won’t accept special characters when expressed by name. What does that mean? Well, here’s an example:

Let’s say we are going to use a © (copyright) symbol in the footer. The template came with it expressed in [html] as: ©.

Which is perfectly find in most cases. However, due to our handy work having to be parsed by Blogger, we also need to conform to their rules as well. So for Blogger templates, we need to use the numeric equivalent to the © [html] and potentially any other similar construct.

Thankfully, we’ll find our answers over on the HTML Character Entity Encoding page. This page will allow you to find the equivalent special character code. Once you find a match for © you will find the numeric equivalent. Simply replacing all the © instances (there’s probably only one), will eliminate that particular error.

I’m going to allow you to struggle a bit and not give you the remaining fixes. You know Blogger will give you a clue. It’s your job to fix the remaining bugs, and they are the same nature as the copyright symbol was.

I might go further into debugging and dealing with errors generated. Perhaps some approaches you might use. We’ll see what happens and where all this is leading us.

Wrapping this up

A Blogger blog is made up of many parts, and for the most part, Blogger does a great job providing for all the functionality you want. But there is always the ‘I want more’ factor that comes into play. Initially, we’re going to take things slow and easy as we build the first iteration of the template. Later, we’ll expand it to meet the needs of the Gluten Free blog.

As you can see, we’ve taken a completely foreign [css] template, slammed it into our Blogger template in just the right places, and all was well. Save for a few bugs, but that just comes with the territory.

BlogSpot Blog – The Smallest Blogger Template

Wayne — Tue, 07 Apr 2009 07:00:48 +0000

I always enjoy seeing what is possible on other systems and web sites. I’m not a hacker by any means, nor would I EVER call myself that (unless I had dreams of working for the FBI), but this post should open your eyes to the possibilities of what you might be able to achieve with a Blogger blog. I’d like to introduce you to the smallest blogger template you will ever find.

New to my site? This is an ongoing series about building a Blogger template; where I’ll show you each and every move I make as I develop a Blogger Template from scratch. Subscribe to my feed to follow along and learn more than you ever wanted to know about Blogger Templates. Always use a sandbox when trying new things!

The Smallest Blogger Template

xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml'
    xmlns:b='http://www.google.com/2005/gml/b'
    xmlns:data='http://www.google.com/2005/gml/data'
    xmlns:expr='http://www.google.com/2005/gml/expr'>
    <head>
        <title>This is the Gluten Free Meals Sitetitle>
        <b:skin>CDATA[]]>b:skin>
    head>
    <body>
        <h1>This is an h1 tagh1>
        <h2>and h2h2>
        <h3>and h3h3>
        <h4>and h4h4>
        <p>A paragraphp>
        <ol>
            <li>Ordered List Item 1li>
            <li>Ordered List Item 2li>
            <li>Ordered List Item 3li>
            <li>Ordered List Item 4li>
            <li>Ordered List Item 5li>
        ol>
        <ul>
            <li>UnOrdered List Item 1li>
            <li>UnOrdered List Item 2li>
            <li>UnOrdered List Item 3li>
            <li>UnOrdered List Item 4li>
            <li>UnOrdered List Item 5li>
        ul>
    body>
html>

That’s it! There isn’t much there at all. Don’t you wish all templates were this tiny? Perhaps there would be more people able to work with them, but unfortunately that’s not the case. Over the course of this year you’ll see this template become convoluted with the widgets and wrapper code that I’ll add as I document the development of the Gluten Free Meals blog.

It’s my hope that by starting from such a bare HTML template that I’ll be able to show you, step by step, how to create your own template, and through that, empower you with enough knowledge to modify your own.

Included in this “barest of bones” template are a few header elements, a paragraph, ordered list and unordered list. I included these elements just to give a little example of the default styles.

If you have created a sandbox blog like I showed you in this prior post and are trying to follow along, you can copy the above HTML and paste it into your sandbox template. Every now and then I’ll supply the complete HTML for you to do what you will with.

First thing though, we need to understand what we’re starting with. You might recognize some of the HTML in the above code, and some may be foreign to you. Let’s see if I can clear this up for you.

Examination of the Smallest Blogger Template HTML

Let’s take a look at each line.

Line 1: xml version=”1.0″ encoding=”UTF-8″ ?>

If you’ve played with HTML before, you might have noticed this tag at the very start of most every blog, and many web sites.

The HTML you define is actually an XML declaration, and this tag defines the HTML in your template as version 1 XML using a character encoding of UTF-8. I could go on a define this tag even further, but I won’t. It’s discussed here ad-nauseam.

Blogger will inject this line into the template if you try to remove it. Blogger requires this tag be present.

Line 2: <html xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>

Ah, our opening HTML tag. And yes, that is a single line of code. It’s wrapped for your readability. You’ll find the closing tag at the very bottom of the template (html>). Everything in between is what you can call your HTML document.

The HTML tag includes a few property/value pairs that define the XML namespaces this HTML document will reference.

What?!?! Yeah, I know. Let’s see if I can break this down for you.

Blogger uses specialized tags within the template markup (like <b:skin>, this is not a standard HTML element). When a user requests a page from your blog, Blogger will look at your template, and replace these tags with data that is stored in some database somewhere. This can be your posts, tags you’ve supplied, comments….data.

If you look at the second namespace declaration, it reads: xmlns:b=’http://www.google.com/2005/gml/b’. This address will define for Blogger how to interpret the <b:skin> tag and what to do with it.

Blogger will also inject these namespace references by default, so there really is no need to worry about this any further, unless you’re planning on making this a career thing.

One thing to note is that the URL’s used in the namespace defintions are not web pages, but instead service addresses. They do stuff instead of displaying stuff.

Line 3: <head>

The <head> HTML element defines an area in an HTML document where additional information about the page can be supplied. Arguably the most important part of the <head> section is the <title> tag, which also contains the only part of the <head> section that displays content on the screen (see the title section below).

As the <head> element only defines an area for more elements to provide meta-data (or extended information) about the page, we’ll move along to the next item.

Line 4: <title>

Ah yes, the title tag. You should make yourself very familiar with this as this one tag has great importance for SEO. I’ll cover SEO aspects later in the series, but here is a well written article on that very subject if you are too eager to wait for it. Just keep in mind that it’s a very important tag.

The title tag encapsulates text that will be displayed in a browser title bar. As you read this, the title tag for this page should read “BlogSpot Blog – The Smallest Blogger Template”.

Later in the series we’ll replace our ‘hard-coded’ text with a Blogger control that will dynamically add the title to page for us.

Line 5: <b:skin>CDATA[]]>b:skin>

This is a blogger specific tag structure and is used to define an area where the CSS that defines a blogs “skin” can be written. A “skin” is a nice term to use when describing the general look of your blog or site.

I’ll also cover this particular tag in more detail later in the series. For now, you should know that this tag is only able to be used if the <html> tag contains a namespace reference to “http ://www.google.com/2005/gml/b”.

This is the only Blogger element that is required to be in a Blogger template. The only reason I included it in this post was because I had to. That doesn’t mean you need to include anything in it though.

Line 7: <body>

The <body> tag defines an area where you can write the HTML for your web page or blog template. I’ve filled in the <body> section with some HTML to prove this point since it is the element that defines the area that will be visible when a page is rendered to a browser.

If you are following along, check out the Gluten Free Meals blog and you’ll see how the HTML in the above example looks when rendered in a browser. If you are reading this weeks after the post date, who knows what you’ll see.

So, what’s next?

In my opinion, the next logical step I’ll take is to create the div wire-frame for the blog. This will further involve the <b:skin> blogger element, as well as the use of div tags and some CSS to make it all come together.

But what about the site itself and defining a plan for it? I should probably do a little due diligence and plan what parts of the site are going to be there, and explain why.

It’s easy to be eager to just dive in and begin coding, but that’s not how I operate. We need to define where were driving to before we hop on the road! Stay tuned to find out what’s coming next!

How’s it coming for you so far? Do you have any questions on any of this? Perhaps you know some additional information that would be helpful to others reading along? Please share your comments and questions below.

As always, I appreciate your bookmarking and efforts to socially share this content with your readers and friends.

More Information

The global structure of an HTML document

Blogger.com Help – Lesson 20 – Pick New Template Layout

Wayne — Thu, 13 Nov 2008 08:00:34 +0000

Using the Blogger interface to pick a new template layout couldn’t be any more simple. This page is by far the easiest to understand, and perhaps one you might never look at again after establishing your blog. However, there may come a time when you want to give your blog a new look. On this page you can do just that.

Note to new visitors! If you would like to know more about this series or view all available lessons, just follow the appropriate link.

Here’s what the interface looks like:

The list area displays the various templates that Blogger provides to all bloggers. And each template also provides a way to modify the colors. The end result is a nice blend of options to create a blog that reflects your personality and style.

All you need to do is play around with the items. When you make a color change, the sample will also change color to give you an idea of what you will get. If you need more, there is a ‘preview template’ link that will open a new window and display your existing blog in the selection configuration.

If you find something you like, click the save template button and you’re done. I told you it was easy.

Important Note: If you have modified your template to include anything out side of the widget architecture, such as Analytics scripts or anything else, you will lose those items if they were not added via a widget.

Change Equals Opportunity

There are countless reasons why one makes a decision to change templates. You might need to change the dimensions of your blog to make room for other features and components that you didn’t see you would want or need when you originally set things up. Or maybe you just want to create a fresh look.

Whatever your reason may be, it is also an opportunity for you to make more of it than just a ‘changing of the template’. For instance, after you change your template, the first people that are going to notice are those that frequent your blog. They’ll most likely be your best critics too. You have the opportunity to include them as part of the process, either on the front or the back of the change, and the experience can be quite rewarding if done correctly.

You know your audience and what they expect from you as a blogger. Including them in the process can bring them closer to you, and help them to feel more like a part of you and your blog. That can’t be a bad thing.

Conclusion

There are a few things you should temper before just changing your template on a whim. If you have any level of traffic beyond that of a new blog, you might want to consider the impact of changing your blog theme may have on your visitors. You can also choose to include them in the process or exclude them entirely. It’s all up to you.

I hope that this series has helped you to learn a few new things and become more a more confident blogger using the Blogger.com blog system.

Blogger.com Help – Lesson 19 – Edit HTML Layout

Wayne — Tue, 11 Nov 2008 08:00:11 +0000

There will come a time for those that really get into using Blogger that they’ll want to modify and manipulate their blogger template to do things a little differently than the standard templates provide by default. Perhaps you want to switch your standard Blogger theme to a custom theme that was built by someone else. Maybe you want to create your own template, or perhaps make some simple changes. In this lesson I’ll cover the interface that allows you to do just that.

Being that one could write a book on templates and still not cover all there is to speak about, I’ll try my best to discuss the interface and delve slightly into some of the code, but mainly this will cover the interface and how to use it.

Note to new visitors! If you would like to know more about this series or view all available lessons, just follow the appropriate link.

Backup and Restore Template

The first item found on this page is perhaps…no, IS the most important of all the controls in the entire administration area. The controls under the Backup / Restore Template header will save your butt, but only if you decide to use them. So before doing any type of work on your template, you should make sure that you can recover from disaster the best you can.

I first want to point out that we can all define disaster as different things. For instance, you might define it as anything that causes you to lose time. You may consider it disastrous to have a single pixel line where there shouldn’t be one, while your friends may simply overlook it. Regardless of how you feel, Make sure you have a backup of your template!

How might you do this? Start off by downloading the template by clicking the Download Full Template link. This will allow you to save the contents of your template to your local disk. If, during your adventures in coding and template modification, you make an error or cause the New York city skyline to go dark, you can simply upload the template you just saved back into action by using the control immediately following the Download link. New Yorkers everywhere will thank you.

Edit Template

The edit template section might look a little intimidating to some, but if you have a backup of your template, you can do whatever you want and still get back to normal with ease. Besides, any changes you make are not put in place until you click the Save Template button found at the bottom of the page.

The first thing to note is that Blogger hides most of the template code from you by default. The checkbox labeled ‘Expand Widget Templates’ will un-hide these sections so that you can see all of the template code.

For instance, the code shown below is the section of code that defines the footer area of the Views On Life template. If you look closely, you’ll see that the <b:widget /> line is a self-closing tag that when you choose to expand the widget templates, grows to several more lines, and is no longer a self-closing tag, but instead has a starting <b:widget> and a closing b:widget> tag set.

<div id='Div1'> <b:section class='footer' id='footer'> <b:widget id='HTML4' locked='false' title='' type='HTML'/> b:section> div>

When we expand the text by clicking the Expand checkbox, suddenly all these widget items become several lines of code that will look similar to this:

<div id='footer-wrapper'> <b:section class='footer' id='footer'> <b:widget id='HTML4' locked='false' title='' type='HTML'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/>h2> b:if> <div class='widget-content'> <data:content/> div> <b:include name='quickedit'/> b:includable> b:widget> b:section> div>

As you can see, there is much more code behind these widget items.

Another good thing to do when toying with your template code is to find a way to lay it out so that it makes sense to you. You’ll see the above ‘footer-wrapper’
is the rightmost item, and everything between the starting and closing tag is indented about 4 spaces. If you look at the next line, it also contains information in between its starting and closing tags, so those too are indented 4 spaces. This allows you to read the code much easier, and it also is a common practice among programmers to help improve the readability of the code.

You won’t be able to format the lines of code in the Blogger interface though, at least, not without a lot of hair pulling. Instead, if you used a simple text editor like Notepad, it would make things much easier. Simply paste your template code in, make your changes, format certain areas to help you understand it, copy and paste back into the template area in Blogger when you’re done and test your changes.

Now, the trick is to understand what each line is doing, and what it means. A person that can teach themselves, and determine where to get information can achieve that goal easily over time. But it DOES take time and plenty of patience, a healthy passion for puzzles is probably a good trait too.

Let’s say you decide that you want to make some changes within a particular widget and realize that your changes don’t really look good, or worse, cause the blog to crash. You can clear all your widget template items to their default state by clicking the revert widget templates to default link.

Some time ago, blogger switched the way they define templates. They refer to the old template design as their Classic Template, while the new one is simply called a Template. I don’t suppose anyone who has the updated templates would want to go backward to the classic template so I won’t go into the effects of doing this.

Conclusion

This page contains the most valuable bit of information I could ever provide to you. Make sure you have a backup of your template before you go and mess with it. By not doing so, you are only allowing yourself to have headaches and issues later. Don’t allow yourself that, be a nice person and make a backup right now, while you are thinking about it and put it somewhere safe. Someplace you’ll remember.

And by all means, if you are so inclined, you should play around with the code in your template. Maybe not directly in your ‘live’ blog, but perhaps in another that only you have access to or won’t affect your stream of visitors, or one that you don’t care about failing, such as a test or staging blog. I call these sandbox blogs, and they are quite handy when you want to try something new.

Further Reading

Here is a list of further reading you can do as it relates to understand more about the template code. I will be finalizing more posts around templates, but I suspect there are those that just cannot wait.

Bare Bones Guide to HTML – Great place to learn more about HTML

Page Elements Tag for Layouts – Learn more about the specialized tags that Blogger uses

Widget Tags for Layouts – Learn more about the tags used for widgets

Layouts Data Tags – Learn more about the data tags that Blogger uses

Fonts and Colors Tags for Layouts – Fonts and Color tags

Blogger.com Help – Lesson 17 – Page Elements Layout (Part 2)

Wayne — Tue, 14 Oct 2008 07:00:19 +0000

Due to this lesson potentially turning into a novel, I decided to split it into two parts. The first part covered the page elements layout navbar and header sections. In this we’ll continue on by taking a look at the Blog Posts, Side Navigation and Footer elements.

Giving your layout a once over when you first start your blog is important, and most likely most of you will take the time to review these settings and may still have some questions about the page itself. If that describes you, please let me know what you are trying to do as it pertains to this screen and I’ll see what I can do to help you out.

Please note that I will not be describing any of the Gadgets in this post. I’m reserving those for separate posts where I can focus on each one individually. Trust me though, I will be covering those in the next few weeks.

Note to new visitors! If you would like to know more about this series or view all available lessons, just follow the appropriate link.

Add and Arrange Page Elements

To continue on, here is the Add and Arrange Page Elements screen. We’ll be taking a look at items 4, 5 and 6 in this lesson.

For information on items 1, 2 and 3, please see the first part of this post

Blog Posts

Clicking on Edit in the Blog Posts area (4) will bring up the image below. It is within this editing screen that you can get some control over how your posts look, but the control is primarily for the header and footer of each post.

Number of posts on main page – This will, of course, show the desired number of posts on the homepage of your blog. Switching from ‘Posts’ to ‘Days with Posts’ will show a certain number of days worth of posts on your homepage. If you are a prolific writer, perhaps you might want to display a number of days worth of posts. If so, you will be able to display more post items on your blog for a longer period of time. There is nothing more frustrating for a prolific writer than to have your posts disappear so quickly off your homepage. This will allow your posts to get some quality air time if this describes your posting habits.

Of course, you can always increase the number too.

Each of the ‘Select Items’ in the list of items control Post Header and Footer elements. The checkbox next to each one will either hide or display the associated element, and as you check or uncheck each item, you will see the change immediately in the ‘Arrange Items’ section (image below). It only takes a little playing around with this screen to understand what one needs to do to change their post header or footer a bit. For instance, if you wanted to change from the default text ‘Links to this post’ to something like, ‘Hey, here are some people linking to my post!’, you would simply change the text where you see it in the list. Not terribly hard right?

The one notable item in this list is the ‘Show Ads Between Posts’ which will toggle the display of the Configure Inline Ads configuration section which is discussed below.

After you have decided what you want to show or not show, you should take a look at the layout of these post footer items.

You can click and move the dark shaded items with your mouse. Most likely, the default configuration is fine for most people, however you might want to customize it a bit to meet your needs.

Immediately below this section is where you can cancel or save your changes as well.

Configure Inline Ads

If you opted to display inline ads, then you will also see this configuration screen as well.

On the Views on Life blog, I have opted to display an ad after every post.
That may be a bit much, but I did it to really show it off.

You can make all the same decisions here that you can within the AdSense configuration screens as well. Such as picking a format and styling the ads with your color options.

For those that have multiple AdSense accounts, you can switch to a different publisher id by clicking the link found at the bottom of this configuration section.

Now, I understand that many of you have asked how to inject an ad into the post itself. Unfortunately, it’s not possible at all. The only thing you can do outside of using this tool is to include some AdSense code into the template itself, and even then you will only ever be able to include the ad above or below the post. This means you will not be able to include an ad, like I did at the start of this post. There may be some hacks to get this done, and if I find them, I’ll surely post about it. It’s one of those common questions.

Add a Gadget

Go go Gadgets! Gadgets are what make blogs fun for most people, and they can also be a great source of distress for some. I’ve had the pleasure of helping a number of people with their sites, and at the end of the day I should say that in nearly each case there was a gadget involved. Why would these be so hard to work with?

Gadgets attempt to bring many things to many people. While Google has achieved that to some degree, you still benefit by having some knowledge of HTML to get them to work perfectly. For instance, when you are adding a JavaScript/HTML gadget, you will be inserting HTML. If any of the HTML you insert into the gadget is malformed (screwed up), it can make the rest of your blog look like a kangaroo beat it up.

For that reason, I’m going to recommend once again that when you add gadgets, you should have one window displaying the gadget page so you change your settings should you need to, and another window that is showing your blog. Make a change to the gadget, preview it in the other window immediately. Your users will appreciate it when you do this. Or, make a sandbox blog as I described in part one of this post.

There are quite literally thousands of widgets, so don’t expect to get the low down on each one from me. I’m going to pick and choose the ones I cover unless people ask for help on any particular gadget.

As you can see, the gadgets are broken down into categories for your hunting convenience. All the basic gadgets that most everyone wants are found on the front page. Clicking the blue plus will add the gadget to your page, either the footer or sidebar, depending upon how you started the dialog.

Once you decide to add any particular gadget, a new window will display to show you configuration options that are unique to the gadget. Most of the ones I have looked at are pretty easy to work with. But like I mentioned above, I’ll be covering a few of these in future posts.

What about you?

I know you’ve played around with the gadgets, we all have. I have a few in the hopper to do a post on, but are there more that you want to hear about? There are 19 default gadget items that display each time you open the gadget interface. Each of those will be getting some attention from me in the coming months. Are there others you have found that don’t work too well? Perhaps there are some that need a little describing. Let me know which ones you want to hear about and I’ll move those to the top of my list!

References for further reading

How do I show ads between my posts?
What color combinations are best for my site?
Why are some gadgets broken?

Blogger.com Help – Lesson 17 – Page Elements Layout (Part 1)

Wayne — Thu, 09 Oct 2008 18:54:31 +0000

The page elements layout administration page in Blogger allows you to add widgets to your Blogger blog, as well as position them. When you look at this page, you’ll see what’s known in the IT world as a wire-frame of your site. A wire-frame is nothing more than a generic layout that describes the sections of your site. I might be reasonable safe in saying that if you are reading this, not only do you have a Blogger blog, but you might have also spent quite a bit of time playing around on this particular page.

In this lesson we’ll take a look at each section that I have on the Views On Life blog. If your template does not look exactly like what I present here, that’s probably going to be ok. You see, most of us will have a header, body, sidebar and footer sections in our templates. If you have additional sections, that’s great. You’ll simply need to apply the same logic to your ‘extended’ section as I do here for the standard sections.

I am also going to break this particular lesson into several posts in an effort to not make a post that looks more like a book.

Note to new visitors! If you would like to know more about this series or view all available lessons, just follow the appropriate link.

Add and Arrange Page Elements

To start off, we should take a look at the page in its entirety.

The three buttons at the top of the graphic allow you to preview your changes, clear your changes since your last save, or save any changes you might have made, respectively. It’s worth noting here that whenever you make a change you should preview your changes first before clicking save. However, some changes will be done immediately. You can tell by looking at any message that might be displayed immediately above and center of section 1. The message will look like this:

When you see this message, you don’t need to save your changes, they were already saved for you. What you need to do instead is quickly check that your changes are looking how you intended on your blog! This immediate change to your live blog will force you to be on your toes when making changes, so make sure you’re fueled up on coffee before you make those changes.

I believe we all pretty much know what the navbar is, and I don’t need to explain it. You can however change the color of the navbar to better fit your blogs color scheme by clicking the edit button. Alternatively, you can get rid of it altogether by adding a little CSS code bit into the right spot in your template. If you would like to remove it, like I have for the Views On Life blog, a great walk-through can be found here. Please keep in mind though, that once you hide your Navbar, you will need to type www.blogger.com to reach your administration pages. You will no long be able to reach your dashboard from your site. Why, you just hid the bar that has the link to your dashboard silly!

Clicking Edit in the header area will pop open a new window with the following inside:
From here, you can change your blogs title and/or description. This is the same as if you went to the Basic Settings page and changed your title and description there.

You can also see that I was able to make a link in the description as well. Basic HTML is allowed here.

You can also change the background image if you like by uploading an image from your system to Blogger, or by referring to an existing image on the Internet by way of URL. If you would still like the title and description to be shown on top of the graphic, simply select ‘Behind title and description’. If you don’t want the title and description to show, simply choose the ‘Instead of title and description’. You might want to do this if the graphic you are uploading or referring to contains the text already.

Keep in mind that the header area is normally covering your entire blogs header. Normally. I say ‘normally’ (yes, I know, that’s three times now) because each persons template can be different. You may or may not want to have the graphic shrunk to fit the existing width of your header. Checking the checkbox ‘Shrink to fit’ will do that for you.

Finally, clicking save will put your changes into action.

Make a Sandbox

I cannot encourage everyone enough how important and beneficial it will be to you as a Blogger.com Blogger (ok, that just sounds funny) to create a secondary blog that models your current blog. Not only does it define a sandbox for you to play around in and try new things out, but it will keep your real blog alive and well.

You don’t need to advertise that you have a sandbox blog. In fact, you can hide it from the entire world if you want, or only share it with those you want to.

The upcoming posts will be focused entirely on templates in blogger; how to use them, change them and understanding what’s going on under the hood.