HTML Tips & Tricks: Styling The Sidebar #1


It's been a while since I wrote one of these posts but I really wanted to continue with them. Just to recap, I'm not a professional web designer or anything but I've picked up a few tips along the way in creating my own blog design and thought I'd share them. If you want to see any previous posts you can find them here.

So, the sidebar is pretty important 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!)
To style your sidebar, we are going to use a block of html coding but in order to use this we need to go to the template section on the blogger dashboard - customise template - advanced - add CSS.

In the blank box we can add the following code;

h2{
background-color: #FFFFFF;
color: #000000;
font-family: ;
font-size: 12px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0.1em;
line-height: 1.8em;
margin-bottom: 0.75em;
margin-left: 0;
margin-right: 0;
margin-top: 0.5em;
text-align: center;
text-transform: uppercase;
}

NOTE: This coding will also format the date header!I'll have a post very shortly on styling the date header.

This coding will style the sidebar as below:


Any of the above coding can be altered to change the sidebar to our personal taste. So for example, if you want to change the font of the sidebar titles we can use google fonts. My post here explains how to use and install a font from google web fonts. Using that post, I've chosen to install the font grand hotel. I've added the appropriate code within the html template but now I need to add the CSS to the above coding for the sidebar. The coding now looks like this;

h2{
background-color: #FFFFFF;
color: #000000;
font-family: 'Grand Hotel', cursive; 
font-size: 18px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0.1em;
line-height: 1.8em;
margin-bottom: 0.75em;
margin-left: 0;
margin-right: 0;
margin-top: 0.5em;
text-align: center;
text-transform: lowercase;
}

The sidebar now looks like this - I've also changed the font size and text to lowercase. The good thing about using the css section of the template designer is that you can see the changes before saving, so you can have a play around with margins, sizing, colours etc.


In the second part I'll show you a few tips for borders and backgrounds for the sidebar.

I hope this was helpful!


2 comments

  1. thanks this helped me :)

    ReplyDelete
  2. thanks for posting this, I really like finding new ways to customize my blog so this series is great for me, thanks :)

    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