jacquie Site Admin
Joined: 31 Jan 2007 Posts: 102
Location: Salt Lake City, Utah, USA
|
Posted: Sun Feb 18, 2007 12:39 am Post subject: Adding a Personalised banner to your Blogger template |
|
|
If you want to change the banner at the top from the plain coloured one to an image of your own in Blogger here is what to do:
1 Find the image you want to display. Make sure it is wide enough to go across the banner space and the interesting part is at the top. upload it to your picture host.
2 Go to the Template tag and click on the HTML option.
3 Find the bit of code that looks something like this (the h1 at the beginning is the important thing to look for):
| Code: | h1 {
padding: 18px 0px 10px 5%;
margin: 0px 0px 8px 0px;
border-top: solid 9px $sidebarTitleColor;
border-bottom: solid 1px $descriptionColor;
color: $titleColor;
background: $titleBgColor;
font: $titleFont;
} |
4 Type // in front of the line ' background: $titleBgColor;' (This makes it ignored and is safer than deleting it in case you want to change it back at any time.)
5 Underneath that line add the following
| Code: | background-image: url('http://i5.photobucket.com/albums/y181/ferryfax/puppyface-1.jpg');
background-repeat: no-repeat;
|
6 Unless you want a picture of our dog, change the 'http...jpg' to the link for your picture that you uploaded in step 1
7. Click on the preview button to see of it has turned out how you wanted.
8 If it hasn't then ask here as it will be easier to deal with individual examples rather than go through all the possibilities. If it's OK save your template and you are done
_________________ Jacquie
Jacquie's Journal
Crafty Threads 'n' Yarns |
|