HTML Cheat Sheet For Blogger

I’ve uploaded a few html tutorials in the past but today I thought I’d do a little update and add a few more popular codes. These are all really easy to apply to your blog and you can add them via the template designer in blogger. Simply go to the add css section in the template designer and copy and paste the coding you want into the blank box. click apply and you’ll see the changes. Sometimes blogger likes to play up and not co-operate so if you don’t see the changes straight away, you may need to copy and paste into the html directly (above the ]]></b:skin> ).

Centreing the post header

.post-title {
text-align: center;
}

Centreing the date header

.date-header {
text-align: center;
}

Centreing the sidebar headers

.sidebar h2 {
text-align: center !important;
}

Centreing the page titles

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Re-sizing blog photos to the same size

.post-body img { width:600px; height:auto; }

you can increase or decrease the number in yellow to change the width of your photos

Increasing space between the sidebar and post area

#sidebar-right-1{
position: relative;
left: 40px !important;
}

you can increase or decrease the number in yellow to change the size of the space

Increasing the space between your posts

.post-footer {
margin-bottom: 85px!important;}

you can increase or decrease the number in yellow to change the size of the space

Adding a border to the sidebar

.sidebar {
border: 1px solid #000000;
padding: 5px;
}

You can change the number in yellow to change the width of border and size of padding. You can change the colour code in blue to the shade of your choice – you can find html colour codes here
If there’s any coding you’d like to see, let me know in the comments below!

Leave a Reply