Blogger is a great platform for blogging. But it doesn’t have good templates. Blogger provides you only some basic templates that doesn’t look very good or catchy. Now you might think of customizing it or you can search blogger templates on google. If you find a template that gives you satisfaction then it’s good for you or in any case you can also might think to make some little tweaks in that downloaded template too.Now Starting from scratch can be problematic. The better way will be to start customizing the css of your current template ( or the default template of Blogger ). Developers tools available in modern browser can help you a lot. You can inspect elements and layout for different mobile devices and desktop resolutions in these developers tools present in modern browsers like Firefox and Chrome.

You can easily change the look and colors of your downloaded 3rd party template with these tools. For example , In chrome open your blog (with new template) and then go to Settings, more tools and then developer tools.

Google Chrome Developers Tools
Developers Tools in Chrome

The left panel shows the page source and the right panel shows the styles and other DOM related information of the selected element in the left panel. When you hover over the different containers (div tags) or elements in the left panel, the rendered webpage panel ( upper panel) creates a transparent color layer over the portion which is related with the hovered element.

You can play with the css directly in the developers tools. Select the element and then change the shown css in the right panel. It’ll show you the results without reloading the page, which is really very cool. After tweaking with css when you can copy that css and then paste it to the end of  <skin> tag in your blogger tamplate.

Also Read: Creating a blogger template from scratch