The look and feel of the blogger template can be changed by editing the HTML and adding extra CSS into the blog template. In this blog I will explain some simple method to accomplish that.
Download the template for backup. Now you can restore this template later if anything goes wrong. By choose the template file and Upload.
There is a Navbar on the top of any blog. You can remove this Navbar.
Before editing the HTML and CSS make a backup of the current template. For that, select a blogger dashboard and click on Backup / Restore on the top right corner.
Download the template for backup. Now you can restore this template later if anything goes wrong. By choose the template file and Upload.
There are two locations where you can add/edit code. One is Edit HTML and the next is Add CSS.
To edit html go to Template and there is an option Edit HTML.
Click on Edit HTML and you can see the html code as given below
Edit the HTML, preview and save the template. If anything goes wrong restore the template from the back up.
To edit CSS go to Template > Customize and then select Add CSS. You can add CSS script in that white space.
There is a Navbar on the top of any blog. You can remove this Navbar.
For that copy the following code into the Add CSS area.
#navbar { height: 0px; visibility: hidden; display: none;}
#navbar-iframe { height: 0px; visibility: hidden; display: none;}
You can see the preview of the blog there itself.
If everything is okie, click on Apply To Blog on the top right and view your blog in a new window. You can see the Navbar will be hidden from the blog.
Lets see another example..
#Example 2
#Example 2
To change the colors of the hyperlinks you can use the following CSS scrpit.
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
Instead of #000 you can use the HTML color code of a particular color. Here I am using black (#000) for all the links.
#Example 3
Now, to bring the title and description at the center of the page add this CSS code.
.title {
text-align: center;
}
.description {
text-align: center;
}
But how to know which class ( like .title, .description ) or ids ( like #navbar, #navbar-iframe ) represents which element ?
There is an easy way to figure out it.
First right click the element which you want to customize. In this example I have selected akku's book.
Then right click and click on Inspect element. Now that will pop up the html and CSS related to that element as given below.
Find out the class/id which formats that element. Here it is a class called title ( class="title" ).
If it is a class then use (dot)classname ( Here it is .title - see the example of title ) in the Add CSS area and add your CSS code to format that element.
And if it is an id use #id ( Like #navbar as in the first example ).
You can also use standard HTML tags for more customization.
Given below is some of the scripts which I have used in my blog.
To create a line after title and description use this.
.header-outer {
border-bottom: solid 2px black;
}
To remove the post footer text use this.
.post-footer {
display:none;
}
To create a 20 px padd on the top with color #dbdddc use this.
.content {
background:#dbdddc;
padding-bottom:20px;
}
And this one create a clean white area for blog posts and side bar.
.content-inner {
border: solid 1px #CCC;
border-top-color: #DDD;
border-bottom-color: #999;
background: white;
margin: 10px auto 70px;
}
For to change the body background color.
body {
background: #dbdddc;
}
To remove the blog feeds.
.blog-feeds {
display:none;
}
The links in the whole blog can be given with a common text decoration and color palette.
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
At periods make a back up of your current template.
Instead of #000 you can use the HTML color code of a particular color. Here I am using black (#000) for all the links.
#Example 3
Now, to bring the title and description at the center of the page add this CSS code.
.title {
text-align: center;
}
.description {
text-align: center;
}
But how to know which class ( like .title, .description ) or ids ( like #navbar, #navbar-iframe ) represents which element ?
There is an easy way to figure out it.
First right click the element which you want to customize. In this example I have selected akku's book.
Then right click and click on Inspect element. Now that will pop up the html and CSS related to that element as given below.
Find out the class/id which formats that element. Here it is a class called title ( class="title" ).
If it is a class then use (dot)classname ( Here it is .title - see the example of title ) in the Add CSS area and add your CSS code to format that element.
And if it is an id use #id ( Like #navbar as in the first example ).
You can also use standard HTML tags for more customization.
Given below is some of the scripts which I have used in my blog.
To create a line after title and description use this.
.header-outer {
border-bottom: solid 2px black;
}
To remove the post footer text use this.
.post-footer {
display:none;
}
To create a 20 px padd on the top with color #dbdddc use this.
.content {
background:#dbdddc;
padding-bottom:20px;
}
And this one create a clean white area for blog posts and side bar.
.content-inner {
border: solid 1px #CCC;
border-top-color: #DDD;
border-bottom-color: #999;
background: white;
margin: 10px auto 70px;
}
For to change the body background color.
body {
background: #dbdddc;
}
To remove the blog feeds.
.blog-feeds {
display:none;
}
The links in the whole blog can be given with a common text decoration and color palette.
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
At periods make a back up of your current template.
