I like playing around with and changing html and css, it lets you make something that looks very simple into something a lot more aesthetically pleasing, and once you know how to play around with coding properly, it becomes super easy.
If you look at my sidebar you'll see that I have my header title and a line that goes from either side to the edge. There is a small border of white between the line and the actual title, which uses a very small bit of carefully placed code to achieve this. This tiny bit of coding below will allow you to change your normal sidebar headers into lovely decorated headers.
.sidebar h2 {
font-family: 'Georgia';
font-weight: 200;
font-size: 14px;
color: #444;
background-color: #333;
line-height: 1px;
text-align: center;
text-transform: lowercase;
letter-spacing: 2px;
margin-bottom: 25px;
margin-top: 25px;
}
.sidebar h2 span {
background: #fff;
padding: 0 15px 0 15px;
position: relative;
z-index: 1;
}
This is exactly the coding I have in my template, minus the font I use. I've tweaked it a bit to suit me, so even if you just start with this as a base you can modify it to your hearts content!
How to do it!
1. Go into Blogger and find the Template section.
2. There will be a box at the top right that says 'Backup/Restore'. Please, please, backup your current template! Should anything go wrong, you can always go to this backup. (you don't have to backup your current template if you have a fairly recent backup or you are confident enough with coding to carry on)
3. Click 'Edit HMTL'.
4. In the box that appears with your template, find this piece of text 'sidebar h2'. It might just be called h2, depending what type of template you are currently using. (you can always use ctrl+f to find it, rather than scrolling through endless amounts of text!)
5. Copy the text above ^^ and paste it where you have your current sidebar h2 code is, replacing it completely. (make sure you don't replace anything that isn't related to the h2 section)
Now save your template. If you load up your blog you'll probably see that your sidebar titles have a big line right the way through it, without leaving a gap for your title. Don't panic, we'll get to that! If you'll notice in the above code there is a small section that says 'sidebar h2 span', this is what gives you the gap in the line.
1. Go back to your Template section and into Edit HTML for the second time.
2. Now you want to find your header titles. Locate this piece of text '<h2 class='title'><data:title/></h2>'. There will be one of these for every sidebar title you have.
3. You want to change it to this '<h2 class='title'><span><data:title/></span></h2>'. Adding the <span></span> tags around the <data:title/> adds the small white border.
4. Once you've got them all with the <span> tags, save and refresh your blog.
Viola, you successfully have those little lines at either side of your sidebar headers! If you need any help with this or would like some help setting it up on your blog, please give me a shout and I would love to help!
thank you for reading! ♥
No comments