I have written many tutorials on editing a Blogger template. Many of the tutorials center around creating static pages in Blogger, since Blogger doesn’t natively support static pages. Since I switched to WordPress about a year ago, I haven’t really had a Blogger blog that displayed some of what I discussed.
I decided a few weeks ago to create a new Blogger blog, since I still had an account. I went online and found a template and began editing it and incorporating a few new things that I found. I have called this blog Blogger to the Limit and this post will outline some of the changes that I have incorporated into this blog.
Is a Blogger Template Customizable?
One of the reasons I moved to WordPress was because of the customization I am able to do on Technically Easy. With WordPress I have total control over every aspect of my blog. I am only limited by my imagination when it comes to modify this blog.
With Blogger blogs it is a bit more complicated. You don’t have as much freedom, as Blogger is managed by Google, and the underlying code and operation is outside the blog owner’s control. While Blogger templates are not as customizable as WordPress templates, you still do have a lot of control over how your blog looks and feels.
This is where Blogger to the Limit comes in. I wanted to show how much control you do have with a Blogger blog template, and what you can achieve by learning how the templates work.
While I am still tinkering with the template, I posted what I have done to the template so far in this post.
Blogger Template Changes
When I started my new Blogger blog I wanted to find a template that wasn’t part of the original Blogger template selection. I went to BTemplates and downloaded the Pro Black template.
I was looking for a template with a black background and one sidebar on the right. This template also included a navigation bar which I could use for my static pages. Once I installed the template I began to modify the underlying code and CSS to suit my needs.
The Homepage
(Click to enlarge)
The first thing I wanted to do was have a static homepage, with only a small abstract of the latest posts. The image to the left shows what the content section of the homepage looks like.
As you can see I created a static HTML welcome message above the posts, and this message only appears on the homepage. The post listing below the welcome message shows a small abstract that I add to each post.
The images beside each post indicates the category associated with each post. Each category will have a different image, and clicking the image will take you to the search results for that category.
Results Pages
(Click to enlarge)
The results pages include the search results, category listing and the post archives. All these pages are displayed in a similar way as shown in the image on the left.
By default, Blogger will display the entire text for all posts it returns in the result listing. I wanted to change this functionality by only displaying the abstract for each post. This reduces the size of the displayed page so a visitor can see more posts above-the-fold.
The one difference you will notice between the homepage and the remaining pages that are displayed is the fact that the homepage is the only one with a total black background. All the other pages include a header at the top, and a light background with black text. This allows me to further distinguish the homepage.
The original template that I downloaded didn’t have this feature, so I added it in and created two images to make the rounded post corners.
Static Pages
(Click to enlarge)
By far, the most popular Blogger tutorials on Technically Easy are the ones dealing with creating static pages. So I added several in my template to show how it can be done, as well as display static content.
I also wanted to distinguish the post pages from the static pages. There are several changes that are made to static pages to make them look different:
- There is no date on a static page. While a static page is a regular, back-dated post, I prevent the date from being displayed.
- The background for the page title is different between static pages and post pages. The image on the left shows the two headers.
- I don’t assign static pages to categories, so there aren’t category links displayed on static pages.
- I hide the comments controls to prevent people from commenting on static pages. Post pages still include the commenting feature. I haven’t disabled the commenting feature entirely, so I can add it back in for static pages, if I wish.
These are some of the changes that I have implemented with static pages. While they are post pages within the Blogger framework, they are displayed as static pages to the visitor.
The links to the static pages are placed in the navigation bar, which is at the top of the blog.
The Navigation Bar
(Click to enlarge)
The original template I had downloaded included links to the homepage, post and comment RSS feeds, and an edit link for editing the blog. I wanted to replace all but the homepage link with links to my static pages.
This was easy to do as I simply copied the URL to each static page and added them to the navigation bar. If you click on a link, you will notice that once the page is loaded, the link is no longer available. The link to the page in the navigation bar has been replaced with highlighted text. This was a feature shows which static page a visitor is displaying.
What’s Next?
I am looking into other changes I can make to this template. I would like to keep to using Blogger template code as much as possible. There may be times, such as using Slimbox to display images, where I may need to use Javascript. For the most part, however, I want to use just Blogger code.
I will also try to write a few posts on the blogger blog to fill out the blog so it doesn’t look so empty. While I’ll continue to write the Blogger tutorials on Technically Easy, I’ll write coding and template tips on Blogger to the Limit.