HTML Editing-How to Customize a Third Party Blogger Template

HTML Editing-How to Customize a Third Party Blogger Template

During may regular web surfing I found a blog where an excellent blog post/article about customizing the navigation bar of a third party template was there. The blog's HTML editing procedure was advised correctly. As the article was perfectly written, Here I am not interested in discussing about what was written there or I found any lacunae there. In fact the post was written in a nice way and the procedure of customizing the blog’s navigation bar including the process of adding and modifying the pages was explained correctly and in an easy to understanding way. 

Customize a Third Party Blogger Template

What I want to say is, that some more things like header, related posts etc. could also be added and explained in addition. Customization of blog Header and the related posts is most important for blog’s look.

 

My entire explanation is based on the “Gremble Grey” template released by http://www.ivythemes.com. There may be a slight difference in other template HTML files as each template is written by a different writer and accordingly the layout may also differ, there some of the things written by me may some times not give the desired results but a lot of things may be similar. 

 

There are  millions of templates in the market therefore it looks impossible to explain the customizing procedure of each of them individually. I will advise the first thing to ensure you have saved the backup of your blog and your template –

What is a default template of blogger

Blogger provides it’s users a large stock of templates and if a blogger is using one of the templates made available by the blogger, this is called the blogger’s default template. 

What is a third party blogger template

Besides providing a lorge stock of excellent templates Blogger allows it’s users to use templates of their choice provided by other developers. While a user uses template of his choice provided by other developers on his blogger blog this is called a third party blogger template

How to Customize Blog Header in a Third Party Blogger Template by Editing HTML File

First of all take a the backup of your blog’s existing template, before starting the customization process of your blog header -

 Login using to your Google account using your ID and pass word, 

Go  to blogger dashboard 

Click Template

Click Edit HTML.

i. Now the HTML file of the blog will opened.

ii. Click any where in side the open HTML file.

iii. Press CTRL+F, 

iv. Now the template search box will appear in side the Open HTML File in top right hand corner. 

v. Write “header” in the open HTML search box and press enter. 

v. find the following Code -

 

        #header-wrapper{margin:0 auto 0;padding:10px;color:white}

        #header{text-align:center;color:#0185AF;margin:0}

        #header h1.title,#header p.title{margin:0;padding:10px 0 5px;line-height:1.2em;font-size:240%;text-            transform:uppercase}

        #header a{color:#0185AF;text-decoration:none}

         #header a:hover{color:#0096D1}

 

1.                   Center Change it to set the alignment of Header 

 

Text.(Centre, Left or Right)

 

2.                   0185AF Change it to change the text color of the 

 

header Text.(Choose desired color)

 

3.                  uppercase} Change it to change the text of the 

 

header Text to lower case.(Uppercase, Lowercase,          Sentense 

 

case etc.)

 

4.                  0185AF Change it to change the text color of the 

 

description.(Your desired Text color)

 

5.                   0096D1 Change it to change the hover color of 

 

header.

CLICK HERE to get color code help.

 Customize Blog Link colors in a Third Party Blogger Template by Editing HTML File 

To customize the links of your blog go to blogger dashboard>Template and open HTML file by clicking “Edit HTML”. Now click any where in side the file and press CTRL+F, the template search box will appear in side the Open HTML File. Write “link” in the HTML search box, press enter and find the following Code -

   a:link{color:#000000;text-decoration:none}

     a:visited{color:#000000;text-decoration:none}

     a:hover{color:#0099FF;text-decoration:underline

000000 – Replace this code to change the color of your links.

 

000000 - Replace this code to change the color of your visited 

 

links, means the links which are open at present.

 

0099FF - Replace this code to change the color of your links 

 

when your cursor is on the link.

Change No. of Blog “Related Posts” in a Third Party Blogger Template by Editing HTML

To change the number of “Related Posts” to appear on your blog go to blogger dashboard>Template and open HTML file by clicking “Edit HTML”. Now click anywhere inside the file and press CTRL+F, the template search box will appear inside the Open HTML File in the top right hand corner. Write “max_results” in the HTML search box, press enter and find the following Code -

{blog_url:"",max_posts:5,max_tags:5,posts_per_tag:5,tags:false,

 

loading_class:"rpw-loading",related_title:"Related Posts",

 5 Change this number to change the number of posts to be 

 

shown in related posts.(It may be Any Number between 1 to 10)

 

5 Change this number to change the number of Tags. .(May be 

 

Any Number between 1 to 10)

Thus we can make considerable changes in our blog by making small changes to it’s HTML file but remember never forget to back up your template before trying any change in the HTML file because a minor error may create trouble and to restore the backup is the easiest solution in such situation.

how to edit blogger template xml, how to customize blogger template, blogger editor, custom css for blogger, how to add html code in blogger post, blogger html editor, html code for blogger pages, How do I customize my Blogger HTML template, Can I customize Blogger template, How do I add a third party theme to Blogger, Where can I edit Blogger templates.