HTML Tips & Tricks: Sidebar Borders

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!


17 comments

  1. Ooh thanks, I think I'll give this a try later; I'll definitely be checking your other html posts out as I'm clueless (I cheated and resorted to buying a pre-made template but I'm deffo interested in maybe developing it or giving my own one a go at some point!)! Danielle x

    frontiere-girl.blogspot.com

    ReplyDelete
  2. Your html tips series has helped me soo much, html is a tricky thing to grasp so thank you for the help!!
    The May Flower

    ReplyDelete
  3. Please make this a series! Being a new blogger I love finding out about tips are tricks, they really help me out!
    The Beauty Break

    ReplyDelete
  4. Very helpful thank you :)

    http://lifeisbeauty1994.blogspot.ie/

    ReplyDelete
  5. ah this is brilliant! thanks a bunch!

    http://emilybmarsh.blogspot.co.uk/

    ReplyDelete
  6. I've actually just done quite a bit using your html guides. Thank you, from a clueless html person lol xx

    Kate | A British Sparkle

    ReplyDelete
  7. Could you tell me how to put the title in the middle. I've noticed yours is in the middle and I'd like mine in too. Could you email me on how if you have time. SparkleDust-Beautyuk@hotmail.com unless there's a page I've missed. x

    Kate | A British Sparkle

    ReplyDelete
  8. Great advice.

    Unfortunately, it didn't work on my blog and I use the simple template too :/

    ReplyDelete
  9. Amazing - you are my new hero.

    www.sophiemakesup.blogspot.com

    ReplyDelete
  10. So helpful, thanks :]

    NK | www.esttrill.co.uk

    ReplyDelete
  11. Such a helpful post. It's always good to know how to tweak your blog!

    Katie | and-katie.com

    ReplyDelete
  12. Hi there, I love your blog & all your tips, such a great help for a newbie blogger like myself! I was wondering if you could help me with my Title, any tips on how to place it in middle, add a background, or anything! You can email me at glamriver@gmail.com and my blog is:
    http://glamriver.blogspot.com
    Thank you so much and any help would be fantastic!! :)

    ReplyDelete
  13. I used this on my blog but would you be able to help me. I would like it wider, is that possible? I am loving this series and usinng all your tips!

    http://whatmaisiedid.blogspot.co.uk/

    ReplyDelete
  14. Super helpful; thanks much!!
    I've been wondering how to add a border to my sidebar without making it tacky. :)

    ReplyDelete

Thank you so much for reading!I read every comment and try to respond.If you have a question you can also email me or tweet me @sweetelectric xoxo