How to modify the design of your blog

Every blogger wants to have a nice looking blog, so before the blog is created the hunting of a good template begins... You will probably find a suited template for any kind of blog, but it will probably need a few modifications to fit your needs, or you just want to make it look a bit different.

So you found a good template for your blog, you install the template and you decide you don't like the background, or you want the menu to be white instead of black, or you think that the titles font is to big and you want to make it smaller, or, or, or...

Templates for blogger are made by many different people, and how they chose to name their CSS elements are entirely their option, so if you found a tutorial for "how to change the menu background" it may not work for you, because the menu is named differently in your template.

I will show you how to make this kind of changes to your template by yourself, with just a few clicks, and real time preview! I will show you this technique using "Google Chrome", because this is the browser i use.

How to modify page elements in blogger using CSS

So let's take my blog for an example. Let's try to change the background color of the top menu.

Step 1. Right click somewhere on the background of the blog, and choose: "Inspect Element".

Step 2. You will now see that a window appeared in the bottom of the page. What we are interested in is the right part of the window. In the right part you will see the CSS of the menu. In this case the menu is called:

.header-wrapper

Step 3. Now let's change the color to RED. Under the ".header-wrapper" there is a line called:

 "background: #fff;"

The line "#fff" is the code for color white. To change it to red, modify it in

 "#F00".

Or you can click on the small square, in front of the color code, and choose whatever color you want!.

Step 4. Now, if you are happy with the color, you need to make the change to the actually template in blogger. So go to: Template > Edit HTML.

Step 5. Press "Ctrl + F" and search for the CSS element you want to modify, in this case: ".header-wrapper". After you found it modify the color code with the one you chosen, in this case "#fff" to "#f00"

Step 6. Save your template and the change will be applied.

Notes:

• You can modify any element in your page using this method, you just need some basic CSS knowledge.
• You can make menus larger, smaller, you can increase, decrease font sizes or change the font type.
• You can hide elements (using "display: none")
• You can remove or add CSS lines.
• And all of those things are rendered instantly directly on the website.
• Is the best way to use if you want to experiment with different colors or styles and see which looks better. Only thing you need to do is put the changes inside the template,

Template Tags Tips & Tricks