Customize a Third Party Blogger Template by Editing HTML File


Customize a Third Party Blogger Template by Editing HTML File 

Today while surfing I went through a blog, where I found a blog post about customizing the  navigation bar of a third party blog template and editing the relative template’s HTML file. Here I want to clarify that I am not going to discuss about and find any lacunae in the post I found. In fact the post was good 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 here, is to add some more explanation about customization of more items like header, related posts etc. Customization of blog Header and the related posts is most important for blog’s look-

In this post I have used the blogger template file of “Gremble Grey” template released by http://www.ivythemes.com and updated by http://www.ivythemes.com. There may be  a slight difference in the key words used in other template HTML files. Each template is written by a different writer and 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 and there countless templates in the market free or premium therefore the procedure of customizing each can not be explained individually. I will advise to ensure you have saved the backup of  your blog and your template –

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

To customize the header of your blog go to blogger dashboard>Template and open HTML file by clicking “Edit HTML” . Now click any where in side the open HTML file and press CTRL+F, the template search box will appear in side the Open HTML File in top right corner. Write “header” in the HTML search box, press enter and 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.
2.                  0185AF Change it to change the text color of the header Text.
3.                  uppercase} Change it to change the text of the header Text to lower case.
4.                  0185AF Change it to change the text color of the description.
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 in the HYML file-

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

Reactions:

3 comments:

  1. I think Editing HTML is not an easy job, at least not so easy as abc or as easy as the writer thinks.

    ReplyDelete
  2. Yes it is interesting. It looks very easy but it may not be so easy to customise a template by customizing the editing of HTML code file.

    ReplyDelete
  3. Ahaa, its good dialoggue on thhe topic of this piece oof writing here at this website,
    I have read all that, so now me also commenting here.


    Check out mmy weblog ... site []

    ReplyDelete