Easy HTML For Beginners

One of the things I found most difficult when it came to creating my first Blogger templates was managing to crack some coding. I'd be up all night scouring Google for tutorials on how to do now what seems like the simplest of things, then re-designing my blog all over again because I'd made a mistake in my HTML coding. These days I have a small notebook which contains all of my HTML / CSS coding in for my blog & I thought I'd share what I think are the basics for any blogger!

Important! Before altering your HTML coding I'd definitely recommend backing up your template. Find out more on that here. The text that is bold in the codes below are customizable. :)

+ C E N T E R I N G   P O S T  &  D A T E   T I T L E S
Personally, I think that centering or alligning post & date titles is one of the key pieces of coding that everyone needs to know and amazingly, it's super easy that you could do it with your eyes closed. Go to your Blogger Dashbord, Template, Customise, Advanced, Add CSS & add the following:
.post-title {
text-align: center
}

.date-header {
text-align: center
}


+ R E S I Z E   P H O T O S
Blogger tends to do that really annoying thing where it cannot automatically resize your photos without this piece of code. Go to your Blogger Dashbord, Template, Customise, Advanced, Add CSS & add the following:
.post-body img{
width: 680px! important ;
}


+ C U S T O M   S I G N A T U R E 
Some people like to sign off their blog posts with a signature in the form of an image. If you don't want to add this photo individually on each post then add this code in your Post & Comment settings. To get there, click through Dashboard - Posts & Comments, Template and add:
<img class= "left" alt= "post signature" src="URL OF IMAGE">


+ S I D E B A R   T I T L E S
Customizing your sidebar can be tricky. Go to your Blogger Dashbord, Template, Customise, Advanced, Add CSS & add the following:
.sidebar h2 {
padding: 5px
background: #ffffff;
border-bottom: 1px solid #eeeeee
color: #444444
font: 16px JosefinSans;
}


+ I N C R E A S E   S P A C I N G :  B L O G   &   S I D E B A R
Increase space between blog & sidebar
If you want to achieve the clean, simplistic blog layout then I'd recommend adding some spacing between your posts and side bar. To do this, go to your Blogger Dashbord, Template, Customise, Advanced, Add CSS & add the following:
#sidebar-left-1 {
position: relative;
left: -50px !important;
}

That's all for today! I hope you enjoyed this little HTML post & found it useful! :)