In current,the HTML editor of blogger is changed.Each and every item needs change to attract more people and provides facilities to people.New format of editor is very exclusive and easiest to handle.
New format of blogger HTML editor divided into 4 different parts.
1) Jump to widget:-
In this,different widgets of blogger page are included like HTML,Header,Navigation bar,Followers,Social icons etc.So,now you can jump directly to any widget for editing.
2) Edit Template:-
In this,all HTML and XML code of your blogger page will be shown.You can edit easily at any place,just coding knowledge is required.
3) Format Template:-
In this you can change positions as well as layout of your page as per your choice.So,it is easy to move one object with another.
Now,it is opportunity to use best blogger service and build very informative and attractive blog for genuine readers and increase web traffic.
I have noticed many of you not still satisfied with this.You want more to edit/change in blogger page.So,you want help regarding to understand complete coding system of blogger page.
Many of you are good designers and have own concept of designing and formatting.For you i have defined here some helpful tips to deal with HTML and XML codes in blogger editor.
1)Default structure
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<title>
</title>
</head>
</html>
Above code is default structure of any HTML code so it must be included before start to customize web page.
2)Meta tags
Now,next is meta tags which are required to understand what the website is all about ?Meta tags are also helpful to define keywords and description which can elaborate your website.
syntax of meta tag is as follows.
<meta content='all content is here' name='meaningful name of meta tag'/>
Don't forget that meta tags are always included in head section,it means in between <head> and </head>.
3)Links
Next is links which are of different types but mostly are of CSS and Javascipts,all are included in head section.
syntax of link is as follows.
<link href='url of your css/javascript' rel='type of your link(ex. stylesheet)' type='text/css or text/javascript'/>
4)Formatting <b:skin>...</b:skin>
Now next concept is formatting like color,backgrounds,fonts etc of your blogger page.
In new editor all formatting of your blog page included in between <b:skin></b:skin>.So,your complete stylesheet code are included in this tag.All classes of css are written in this tag.
#navbar-iframe, .Navbar {display: none !important;}
html, body {font-family: 'Philosopher', arial, serif;margin: 0px;padding: 0px;width: 100%;height: auto;font-size: 1em;background-attachment: fixed;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFeA2RMZYftvhlrAfMc_69bbKEZ_ZxY1LReByPIC0HPdXcTBtgUbf2EjTwKl-cFtIo3fs6bUlt74IMWO0jSGtthLNbYnvxPBCKladqgBY7MsYPd4xCIU2bDsVHrjqXJaffz_WpUTTSkOI/s1600/bg1.jpg);background-repeat: repeat;color: #000000;background-color: #4d1a00;}
Don't forget <b:skin></b:skin> also included in head section.
5) Body
Now next concept is <body></body> which includes actual content which is to be displayed to the visitor.
6)Sections <b:section>...</b:section>
In body part first tag is <b:section></b:section>.This tag includes different sections of your blogger page like header,navigation,content,sidebar etc.You can find different sections of your blog in Layout tab given at the left side of your blog dashboard if you chosen any customized template or download from different source.
7)Widgets <b:widget>...</b:widget>
The next tag is <b:widget></b:widget> which includes different widgets it means predefined source code like social widgets,page count widgets,followers widget etc.All widgets tags are included in between <b:section>and </b:section> tag,but don't forget different widgets are available for different sections.For example,Navigation section includes navigation bar widget.So,don't be confused to edit widgets,be sure about usage of widget before apply it to particular section.
8)Divisions <div>...</div>
The last but not least concept is <div></div> tag.It is the tag which includes different css classes which are defined earlier in css or in between <b:skin></b:skin> tag.Now,you can use it in different <div> tags as per your choice to format and then include <b:section> </b:section> tags in between <div></div> tags.
Never forget that only add those sections in <div> tag which you want to format as per defined class in <div> tag.For example,
<div id='mainnavigatation'>
<b:section id='navmenu' maxwidgets='1' showaddelement='true'>
<b:widget id='HTML2' locked='true' title='Main Menu(DO NOT EDIT HERE!)' type='HTML'>
</b:widget>
</b:section>
<div style='clear:both;'/>
</div>
In above code you can see that,to create navigation in page <div> includes navigation class and only one section is added which is for navigation menu.
Now i hope this information will help to customize your own blog template.If you want to download blank template for editing then simply click on below download button.