In the article "How to add columns to Blogger Footer" we've learned about the basic (barebone) implementation of extra columns in Blogger footer.
This time, we'll try to customize them a bit. This is optional, of course. You will learn how to:
► control the style of your new footer
► add some colors to it
► change the link color (footer links can be in different color than the main link color)
► customize links
► change the headings style....
In the
first tutorial,
you've placed a CSS style + some HTML. Now, all we're going to do is a
simple play (tweak) in CSS (style). If you're ready, let's do this....
ADDING BORDERS
The simplest thing to do, but can produce a great effect. By default,
you have a top border (1px dotted) that divides footer from the content
area.
You can change the border style in this part of CSS:
#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
...tweaking the line in
pink. Options:
border: 1px dotted #999999; ► add a border around the whole footer container
border-bottom: 1px dotted #999999; ► place a border at the bottom
You can also change the border
style (dotted, solid, dashed...),
width (1px. 2px, 3px....) and
color (any hex color you like, starting with #). Read more about borders in Blogger.
***
ADD A BACKGROUND
Hm. Adding a backgound in the footer container is great, but you'll have
to work more on this. Why? Well, because when you add a different
background that your Blog already has, you'll have to change the text
color and links...We'll discuss this too.
When adding a background, you can either:
► colorize it (quite simple)
► or place the picture as a background (tiled, or repeated vertically...)
::Color as background::
To add a background color to your Footer, add this line to your #footer-columns in CSS:
background:#C6E2FF;
...change the #C6E2FF to any hex color you like...
The CSS should look like this, after placing the line:
#footer-columns {
background:#C6E2FF;
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
...
border if optional. You can combine
border and
background.
::Picture as background::
This
is more fancy. You can make something like I've did for this tutorial,
or place any kind of background you'd like (patterns, images,
lines....).
My suggestion is to place the pics (patterns) that will repeat (tile).
Because your Footer will stretch (in height) to fit your content
(gadgets)...
Steps:
1. Identify (measure) the
width of your Blog (
outer-wrapper, or under different name....). You will find this in your LAYOUT ► EDIT HTML. For my example (I've used
Minima default template) I've checked the width here:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
..there's the width, in
orange...660px.
2. Next thing is to create the background pic. I use
Photoshop, but any decent Graphic editor will do. You can do this in
Paint. So, here's my pic:
You have to make the pic the same width as your Blog (660px in my case),
cut the 1px-5px part. Your pic will repeat vertically. The smaller the
part is, faster loading time you get.
Always work in RGB mode, and export pics for web (or save as
.gif, or
.png) to keep the quality.
3. Upload the pic to a free web
host, like Tinypic.com, Photobucket.com....You need to copy the Direct
Link of your uploaded picture.
4. Place the picture in the CSS style in your code. Go to LAYOUT ► EDIT HTML, find your
#footer-columns style, and add the line in orange:
#footer-columns {
background:url(http://i39.tinypic.com/10wijch.jpg) repeat;
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
...
border is optional. You can either remove it, or combine with background.
...replace
http://i39.tinypic.com/10wijch.jpg with the URL address (Direct link) of your pic..
...this is just an example, you can play, combine, try different things...
Read more about backgrounds in Blogger...
***
CHANGE THE HEADINGS IN FOOTER
By default, you'll have the widget (gadget) headings just like the ones
in the sidebar. If you'd like to make a custom ones, read on.
First, we have to add some style to the CSS of
#footer-columns. So, locate this part in your code:
#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
...yours may be a slight different, if customized.
Place the code in
pink UNDER it, so it will look like this:
#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
#footer-columns h2 {
margin:5px 0 5px;
font-family:arial;
font-size:13px;
font-weight:normal;
line-height: 1.4em;
text-transform:none;
letter-spacing:.1em;
color:#000000;
}
...customize the font, colors, size, margins, letter spacing, weight...
You can also place an icon in the heading, add a background, borders...We'll talk about this more in other tutorial.
***
CHANGE THE LINK COLOR IN FOOTER
Why? If you customize your Blogger footer (add a background color), your
Links may not be visible. Links in Blogger carry the same style in the
whole template elements. In my example, I have the default Links in
blue, but I want them to bee more
brown-ish.
So, UNDER this part of code:
#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
..you will place this one:
#footer-columns a {
color:#8B4513;
text-decoration:none;
}
#footer-columns a:visited {
color:#CD6839;
text-decoration:none;
}
#footer-columns a:hover {
color:#8B4513;
text-decoration:underline;
}
...in
pink, you can adjust the colors of active link (a), visited link (a:visited) and hovering effect (a:hover)
...in
orange, you can change the text-decoration (underline, none, italic...)
...you can play with styles and link effects...this is just to get start with...
***
CHANGE THE TEXT COLOR IN FOOTER
This will change the
text color in your footer (not the Links, but everything else). Add the line in
orange to this part of code:
#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
color:#000000;
}
...adjust the color to whatever suits you...
Download Script
Live Demo
...I've also added some 
....to avoid it, I'll hide the style in "main-wrapper" using /* and */....in the code it's like this:
To avoid this, find the 
There are 4 steps to get this working:
...for example, if you 
We'll have to tweak the HTML code a bit. Until Blogger provides automated way of doing this....And I hope it will.
Now, you have to find this part of the code:
Before doing any customization, back up your template. Just in case....
To add a background picture behind our 
....well,
that's about it. If you are interested in some more customization of
Post Titles, or you want something else, read the article about placing icons in Post Titles.
But
there's a lot that can be done. We can give them some background color,
even a picture, an icon beside them, borders, lines......
To add some borders around your Sidebar Title, add the line (in 
To add some background color behind your Sidebar Title, add the line (in 
First
you need to make (or find some picture you'd like to appear in title.
You have to size it according to your Sidebar width (otherwise, it will
get cropped).
Now, this is a cool one. And my favorite. The idea is to 
...that's it. Do the same for "Labels", "About me" and everything else you want.....
We've
added the black arrow to our labels to make them distinguish a bit
more. First, you have to prepare your picture (icon, image). Choose the
one you like, but keep in mind:
Few notes:
For this example, I've activated:
Ok. When the post elements are rearranged, the next step is: adding icons. Wheeee!
Go to LAYOUT ► EDIT HTML ► click on .jpg)