Finally, after a lot of requests I released the "Daily Inspired" template for all Blogger users for free. This post explains how to customize it. If you have some problems or suggests please add a comment. In the next days I'll update this section with news and new tips about this template.
You can download this template (an html file you can customize quickly using, for example, Dreamweaver) at the following link but, first to use it on your blog, read carefully the disclaimer.
Download this Blogger Template
Disclaimer
PLEASE, READ THIS! This is an highly customized Blogger template which I suggest to use only if you have familiarity with HTML, CSS and Blogger. Before to make changes on your actual Blogger template, save a copy of your template on your local hard disk, so, if something go wrong with the update, you can restore it. Take a mind, if you use custom Widgets on your actual Blogger template, they will be removed using this template. I'm not responsible for eventual problems. Ok?
Customize Template
Add Blog Logo
To add your logo on this template find this code:
<td height="100" align="center">Your logo here</td>
... and add a logo image within <td> element instead of "Your logo here".
Add tab on the navigation bar
If you want to add a new tab on the navigation bar find this comment:
<!-- NAVIGATION BAR LINKS -->
...and add this code:
<a href="POST_URL" class="tabbed-bar"><div>Your Page</div></a>
Then, create a new post on blogger (= a new page...), add some content, publish it and copy the URL of this new post instead of POST_URL within the previous code. In this way your post will be a not a simple "post" but a page (for example take a look at my Tutorials page).
Search field
In order to use custom search on this template find this code:
<!-- SEARCH FIELD -->
<div id="search-bar">
<form action="http://YOUR_SITE.blogspot.com/search" method="get">
<div id="search-bar">
<form action="http://YOUR_SITE.blogspot.com/search" method="get">
...and change YOUR_SITE.blogspot.com/search with the URL of your blog. For example on this site is woork.blogspot.com/search
Customized Home Page
You can customize you Blogger home page adding a special section which will appear only on your home page. For example, on my Blog I added this section:
How to do it? Find this code:
<!-- START[Home Page Section]-->
... and add some HTML code which will be displayed only on home page.
Your name below each post title
To customize the name below each post title find this code:
<!-- ABOUT YOU, POST-->
<i>by <a href="#">Your Name</a></i>
<i>by <a href="#">Your Name</a></i>
...and change Your Name with your real name or an alias, and change the link to a page with some information about you.
Add sections on the sidebar
If you want to create new sections on the sidebar use this code:
<h3><div>Section Title</div></h3>
<div class="section-w">
<!-- HTML Code here -->
</div>
<div class="section-w">
<!-- HTML Code here -->
</div>
About me section
To add your personal information find this code:
<!-- ABOUT ME SECTION -->
...and customize this section adding an image and a short description of you.
Recent Post
You may active a Feedburner account to enable Recent Post and Recent Comments list. I used FeedBurner BuzzBoost service to add a section with recent entries and recent comments. If you have a FeedBurner account login, clik on "Publicize" tab and select "BuzzBoost" service:
Follow instructions on the page and copy and paste BuzzBoost code on this template, within the section Recent Post.
Take a look at this post for other tips about blogger:
7 Tips to design professional blog layout using Blogger
Categories on the sidebar
Take a look at my categories section on the sidebar:
<li><a href="http://YOUR_BLOG.com/search/label/LABEL?max-results=10">Label</a></li>
You can use the previous code to add new categories on categories section. If you know an alternative way to display categories (automatically) splitted on two column please add a comment!
Download
Download this Blogger TemplateRelated content
More articles about tips and tricks on Blogger and how to design professional Blogger template:
Some Blogger Tips you probably don't know
7 Tips to design professional blog layout using Blogger
Blogger Hack: add social buttons to increase your traffic
No comments:
Post a Comment