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. 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.

Customize a Third Party Blogger Template

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 and there 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

Microsoft Office Keyboard Shortcuts To work Faster and easy

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 -

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.

USB Disabler-a very useful, small application for Windows