Add css style to Google blogspot

CSS is style sheet by which you can make required changes to your website like width of headers, widgets, footers, posts, change margins and layouts.

Google blogspot is the best site builder for website developers and designers. If you are a blogger and if you want to make an attractive website so you must have knowledge about css because by adding the css style you can make a website more attractive and then you have better traffic of visitors.

Change in width of header, footer, posts and widget is not a difficult task. Here we write about to change appropriate requirement so that you can give your website a new look as you want.

Change the width of header in blogspot

For change width of header first edit the html code of your blogspot page. We can edit the html code by click on Template>Edit HTML

Now search and cut the portion of html code

<header>
....
....
</header>
We can search this code by using "Jump to widget" tab open and click on "Header1".
Paste this part of code after this line
<div class='fauxborder-right content-fauxborder-right'/>

We can also change the height of header by using the css code as here
.header{
height:100px;
}
paste the above code into custom css. We can open custom css in the blogspot by template>customize>advanced>add css.

Change the position of title in blogger/blogspot

Use following code of css for change the position of title in blogspot.
.title{
margin-top:-10px;
}
paste the above code into custom css. We can open custom css in the blogspot by template>customize>advanced>add css.

Change the width of image border in blogger/blogspot 

Use these css code for change the width of image border in blogger or blogspot.
.images{
image-border:1px;
}
paste the above code into custom css. We can open custom css in the blogspot by template>customize>advanced>add css.

Change the margin, width, height of blog posts in blogger/blogspot

Use these code of custom css for change the width, height and margin of blog posts in blogger or blogspot
.blog-posts{
margin-top:-15px;
margin-left:-40px;
margin-right:-0px;
}
paste the above code into custom css. We can open custom css in the blogspot by template>customize>advanced>add css.

Change the width, margin and position of menu bar or tab in blogger/blogspot

Use these code of custom css for change the width, position and margin of menu bar or tab in blogger or blogspot
.tabs{
margin-top:-10px;
margin-left:-25px;
margin-right:-25px;
}
paste the above code into custom css. We can open custom css in the blogspot by template>customize>advanced>add css.

Change the width, margin and position of side bar in blogger/blogspot

Use these code of custom css for change the width, position and margin of sidebar or tab in blogger or blogspot
.sidebar{
margin-top:-4px;
margin-left:-2px;
margin-right:-41px;
}
paste the above code into custom css. We can open custom css in the blogspot by template>customize>advanced>add css.

Change the width, margin and position of post footer in blogger/blogspot

Use these code of custom css for change the width, position and margin of footer of post in blogger or blogspot
.post-footer{
margin-top:-15px;
margin-left:-14px;
margin-bottom:-20px;
}
paste the above code into custom css. We can open custom css in the blogspot by template>customize>advanced>add css.

Change the width, margin, height, background color and border of footer of page in blogger/blogspot

Use these code of custom css for change the width, margin, height, background color and border of footer in blogger or blogspot
.footer-outer{
margin-top:-40px;
margin-left:-40px;
margin-right:-40px;
margin-bottom:-10px;
height:175px;
background:#808080;
border:1px;
color:#ffffff;
}
paste the above code into custom css. We can open custom css in the blogspot by template>customize>advanced>add css.