Let's show you or remind you of how to change your post background and

widget background colour to look the same or the way you want them to

look like.

(step 1) Go to your blogger.com/home

(step 2) Click on template; it is seen between "Layout" and "Settings".

(step 3) You will see two buttons side-by-side one is written

"Customise" the other is written "Edit HTML", click on "Customize"

(step 4) You see a list like "Templates", "Background", "Adjust

widths", "Layout", "Advanced"; click on "Advanced"

(step 5) You will then see another list appear, click on "Post Background"

(step 6) Select the background colour you will love for all your

posts. Note: copy the colour's code or the html code for the colour

you have selected if you want your blog widget background to look the

same as your post background. The colour code is shown beside the

colour you chose (for instance: you'll see code like "#f954d" beside

the colour you chose)

(step 7) Click on "Apply to Blog" as to save the changes you have made

to your template.

(step 8) Read the post titled: <a


rel="nofollow">Change Widget Background @tricksfornewbloggers</a> to

learnt the steps for changing your widget background colour. There,

you will be shown a CSS code: "#Title1{background:#f878d;}" but you

might find hard to locate the right place to place the CSS code due to

the fact the direction given was a little bit confusing and took me a

very long period to locate the right spot.

(step 9) Since you have read the post @tricksfornewbloggers, then go

back to your blogger.com/home

(step 10) Click "Template" the way you did before

(step 11) You will see two buttons written "Customise" the other

written "Edit HTML"; click on "Edit HTML"

(step 12) Your html will appear, search for </head>. The easier way to

find it is press Ctrl + F on your keyboard then type </head> in the

search box that appear

(step 13) If you have found </head>, above it you will

<b:skin></b:skin> then click the middle (I mean, you should place your

mouse cursor bewteen >< and left-click)

(step 14) Once you click the middle, additional html codes will appear

all written in colour different from the colours of other html codes

(it is mostly written in purple; the code begins with words like "<!

CDATA" and when you trace it down, it ends with "]]>")

(step 15) Start writing your CSS codes in front of ]]>. Take for

instance, you have 3 widgets which are blog-archives,

google-plus-followers, popular-post. What you will write for the 3

widgets will look somehow like this:





(step 16) You now click on "Save"

Post a Comment

Previous Post Next Post