blogger template building 1

Here's some links va google for editing blogger CSS: goggle search: edit blogger CSS

The easiest way it to start with an acceptable standard template and customise it - got to "template" on your blog's dashboard - the click “adavanced” and then use the option “Add CSS”.

Add the following CSS code to your blogger template (for example):

.note
{
padding: .5em;
background-color: rgb(222,184,135);
color: rgb(0,0,0);
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
width:85%;
}
.note2
{
padding: .5em;
background-color: rgb(255,222,173);
color: rgb(0,0,0);
color: rgb(0,0,0);
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
width:85%;
}
.note3
{
padding: .5em;
background-color: rgb(220,220,220);
color: rgb(0,0,0);
color: rgb(0,0,0);
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
width:85%;
}

this is a note

this is a note2

this is a note3

Code used in this post and template:

w3c schools css horizontal align

w3schools css font-size

w3schools css text-align

w3schools css box model

Hype's Color Specifier

twitter developer follow button
Blogger Sentral - Adding official Twitter follow button to Blogger

addthis.com for sharing widget

To get my “follow RandomFutures” widget where it appears I actually manually edited my template - I pasted the code into the place where my template says: <div class='posts footer' thus:

<div class='post-footer'>
<p> <!-- Twitter follow button start -->
<a href="http://twitter.com/RandomFutures" class="twitter-follow-button"> Follow @RandomFutures</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </p> <!-- Twitter follow button end -->

As you get deeper into your editing you will want to make regular stable copies of your template but for now you can just revert to a standard template if you make a mistake first time out.

Important:
When making changes to your blogger template it's advisable to keep a working copy of old versions - see:
Digital K online - How to Backup your Blogger Template
google: Edit the HTML of your blog's layout
Chron.com: How to Customize CSS in Blogspot