Blogger it's a very powerful platform to publish your blog. It's free and with some features which you can customize how you prefer, without limits.
In this post I want to illustrate some tips which can help you to improve your Blogger template to design a professional layout for your blog.
1. Start creating a custom templateA nice template is important for the success of your blog in terms of visits and return of money using AdSense. Before to start your custom template, writing code from zero, I suggest you to download a simple basic Blogger template, for example "
Minima": so, copy and past on your preferred HTML editor HTML source (remeber to check "expand widget models" option) and remove everything is contained within
b:skin tag. This is the only code which have to remain:
<b:skin> /*</b:skin>
...and, below the previous line, add this code into the
<head> tag to create your custom CSS style. I suggest you to use the following CSS structure:
<style type="text/css">
/* -- 1. Standard HTML elements reset --*/
/* -- 2. Custom Page Elements --*/
/* -- 3. Redefine blogger standard elements --*/
/* -- 4. Other custom classes --*/
</style>
In this way CSS code will be simpler to manage and update. This is a screenshot of a part of CSS code I used to design my blog:
At this point you can start writing HTML code, adding layer, sections and other elements to your template. When your template is ready, copy the code and paste it on Blogger Layout editor and save it. If you need more info about Blogger customization, I suggest you to take a look at
BloggerBuster a "Blogger-dedicated" site mantained for my friend
Amanda which provides useful templates, tips and tricks for Blogger users.
2. Create single custom pages on BloggerUsing Blogger you can create single custom pages like on WordPress. How do you do it? Simply creating a post which you will use like a web page for example adding links or in general contents organized for category. On my blog I created some pages (
Tutorials,
Showcases,
Freebies) and, for each page, I added a link on navigation bar:
...and each page contains links organized for topic (take a look at the page
Tutorials). When you have to modify the content of the pages you have simply modify the related post directly from Blogger Post editor.
3. Display some HTML elements only on home pageSometimes it's usefult to display some page elements only on home page and not on each single post. To do it, you have to use Blogger
<b:if> statement, adding the following code on your Blogger template:
<b:if cond='data:blog.pageType != "item"'>
<!-- ... HTML code if you want to display only on home page here... -->
</b:if>
In this way, if the current page isn't an "item" page (but for example it's your home page) , will be displayed all code within
<b:if> tag.
5. Page title and meta tag descriptionFor a better indexing of your blog on Google I suggest you to make these simple changes on your template. Change this line (blog title):
<title><data:blog.pageTitle/></title>
...with the following code:
<b:if cond='data:blog.pageType != "item"'>
<title>My site | This is a short description</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
...and add Meta tag
description below the previous
<b:if> statement.
<b:if cond='data:blog.pageType != "item"'>
<meta name="Description" content="Add here a short description of your site" />
</b:if>
For example on my template I added: "Woork is a popular tech blog mantained by from Antonio Lupetti. Topics focus on web design, tutorials, resources and inspiration", so when someone looking for my blog on Google, search results display the following description:
4. Design custom categories sectionBy default, categories on Blogger are displayed on one column. If you want to modify the default layout showing labels on two columns instead one column, you have manage manually your labels using this simple trick: adding on your template, for each labels, a link like this:
<a href="http://yoursite.blogspot.com/search/label/Category Name?max-results=max numbers of posts to display">Category Name</a>
For example, to design my categories section I used this code:
<a href="http://woork.blogspot.com/search/label/ajax?max-results=2">Ajax</a>
<a href="http://woork.blogspot.com/search/label/blogger?max-results=2">Blogger</a>
<a href="http://woork.blogspot.com/search/label/coldfusion?max-results=2">Coldfusion</a>
...
...and how you can see on my sidebar the result is:
I know, the process is not automatic and each time you add new categories, you have to udate your template manually... but this solutions renders more flexible template design.
5. Republish Feed RSS to manage recent entries and commentsPersonally I don't like Blogger default
archive widget. So, on my template 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 your Blogger template, within a new layer with class property =
"recentPost" (you can insert this layer, for example, within sidebar):
<div class="recentPost">/* FeedBurner BuzzBoost Code*/
<script src="http://feeds.feedburner.com/your feed here?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/Woork"></a><br/>Powered by FeedBurner</p> </noscript>
</div> To customize
recent entries section add a CSS class (
recentPost) using, for example, the following code:
.recentPost li{background:url(arrow image URL) no-repeat left top;
padding-left:14px;}
Final result is something like this:
You can repeat the same process to add a new section which contains links to
recent comments, simply changing the feed URL.
6. Add custom subtitle to your postsIf you want to add a subtitle to your Blogger post you can use a simple "trick" using CSS. On your Blogger template, create a custom class "
.subtitle" (for example, I used this code for Woork's subtitles style):
.subtitle{font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
color:#555555;
line-height:28px;
} Now, when you add a new post, to add a subtitle, add a div layer with class property = "
subtitle" before the post content:
<div class="subtitle">This is a subtitle</div>
This is a screenshot of Blogger Post Editor:
So, add the rest of your post below the div layer and the result is:
7. Add social web buttonsSocial web buttons are a extraordinary solution to share and make popular content you write on your blog.
Delicious, StumbleUpon and
Digg are my preferred social network which drive on my site a lot of traffic but also
Mixx,
Reddit,
Yahoo Buzz!,
DZone can help you to increase your visitors. For more info about how to add social buttons on your site
take a look at this post for the full list.
Related contentSome Blogger Tips you probably don't knowBlogger Hack: add social buttons to increase your traffic
Are you looking for some ideas to design an original interface for your next website project using the most popular JavaScript Frameworks such as Prototype, MooTools and Scriptaculous?
2. MochauiMochaUI is a beautiful web applications user interface library built on the Mootools JavaScript framework to develope quickly Web Applications, Web Desktops, Web Sites, Widgets, Standalone Windows and Modal Dialogs.
3. SmoothGallery 2.0 This javascript gallery and slideshow system (using mootools v1.11), allows you to have simple and smooth (cross-fading...) image galleries, slideshows, showcases and other cool stuff on your website. Absolutely Awesome!
4. MooSlide revamp slider Revamp of mooSlideBox is an ajax based slider easier to use than ever before, as it now has become a class. There are some options that can influence the look and behaviour of your box. Of course you can also have more than one box on your page! In addition you can now define, from where the box should fly in: from top or from bottom ( sample links show both variants ).
5. MooFlow Mooflow is an advanced image gallery with the following features:autoresize on changes of window dimensions, fullscreen option, scrolling with mouse wheel, scrolling with key input (left and right cursor), autoplay presentation loop, reflections via javascript, load images via json (with event or on startup), load images from a html-source with selector-filter, creates the UI automatically, UI skinable via CSS,fullsize viewer option, can run multiple instances and more.
6. Simple images slider to create Flickr-like slideshows If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework.
7. Slimbox, the ultimate lightweight Lightbox clone Slimbox is a 4kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.
