Chapter 4: Buttons, Banners and Images
Using images in your blog template can highlight important areas and add interest
to the overall design.
So in this chapter, we’ll look at making clickable buttons and banners, online image
resources, and how post images can help transform the overall design.
Making buttons with CSS
The simplest of all buttons is simply a link with added styling!
It is easy to make simple buttons with a mouse-over effect by adding a class to a regular
link, and a little code to the style section of your blog template.
In this example, I will create buttons in my sidebar to the Home, About and Contact pages
of my blog19.
widget. Leave the title blank, and in the content box for the widget, add the following
section of code, substituting the URLs of your pages for those of your own blog:
This code will add regular links to your sidebar, which will look like any other link in your
blog’s design. To make these links into buttons, we need to use a little CSS magic!
Give your links some class!
By adding a “class” to your links, you can distinguish these links from regular links in your
template, and give them a different style.
19 To create your own About and Contact pages in your Blogger blog, simply create a regular post-page, backdate this so it
doesn’t appear too soon in the archives, and ensure you have copied the URL for these pages.
Don’t worry, this is quite simple to do! We only need to add a little code to the HTML code
for the links in your widget, like this:
<a href=”http://yourblog.blogspot.com” class=”button1”>Home</a>
In this example, I’ve given my Home link a class of “bu