Its been a good few months since I wrote one of these posts but I thought I’d continue with the series as I still have a few things to share. If you want to see previous html posts click here.
I thought I’d continue where I left off which is styling the sidebar – you can find out how to change side fonts and backgrounds here and here. As I’ve said before, I’m not a professional web designer – I’ve simply found a few ways to customise a blogger template by endless searching and trial and error.
The sidebar is good for showcasing aspects such as subscribers, the blog archive, sponsors etc. There is a very easy way to make to the sidebar look attractive without having to mess around with your html template. Firstly, its a good idea to save your current template in case anything goes wrong. That way you don’t have to worry if you make a mistake. (To save – just go to the template section on your blogger dashboard and backup/restore. You will then be given the option to download your template to your computer!)
Adding a border (like I currently have) is a great way to make your sidebar standout and separate it from all your other content. To add a simple standard border around your sidebar, firstly you need to go to the template section on blogger – customise template – advanced – add css. In the blank box add the following code;
.sidebar {
border: 1px solid #000000;
}
This coding will give you a standard black border around your sidebar.
If you wish to change the thickness of the border, all you need to do is increase the value of the px in yellow.
To change the colour – just change the colour code in blue to the one you desire – you can find various html colour codes here.
If you dont want a solid line border, you could add a dashed border instead. To do this just use the following coding (again the thicnkess and color can be changed as above).
.sidebar {
border: 1px dashed #000000;
}
Or to have a dotted border use the coding below
.sidebar {
border: 1px dotted #000000;
}
I hope this was helpful. If you have any questions leave them below and I will do my best to answer. If theres any other html tips you’d like to see just let me know and I will see if I can help!