A Blogger user must be well aware of his template structure in order to proceed with effective template customizations. This would also help a great deal if a person plans to build his own Blogger template one day. I had to do some customizations to my current template so i had to make my mind refresh about the structure that i am using. So i thought i would make a post about it. :)
and
Our blogger template is in XML format and css format is not in XML format, may be interrupt the parsing since css code enclosed into CDATA. When blogger template execute,
is converted into
and
converted into comments
Blogger template layout contains mainly four parts,
Section is element which indicate part of layout like header, content, sidebar and footer and within section you can add multiple widget like blog archive, blog roll, or event third party HTML/JavaScript code. You can customize look and feel of section using CSS wrapped around it.
Syntax of section look like this
This would definitely help you too. This post is aimed to summarize the key features of the Blogger template.
So lets get started.
Sample format of blogger code (XML Code)
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
....
<b:skin>
<![CDATA[
]]>
</b:skin>
....
</head>
<body>
....
</body>
</html>
Head section contains all the meta tag information, css and Blogger variable.- Meta Tag : Meta tag information used for search engine optimization purpose, which include all title, description, keyword, author etc. included.
- CSS : CSS is used for designing purpose, changing to font style, size, color will be handled in this section. All the CSS code must be written between
<b:skin><![CDATA[
]]></b:skin>
<b:skin>..</b:skin>
<style type="text/css">..</style>
<![CDATA[...]]>
- Blogger variable : Blogger variable is used for creating interface between our template and Blogger Template Designer. See Details into How to make Custom Template into Blogger Designer Friendly Template.
- Header
- Body
- Sidebar (left or right or both)
- Footer
Section is element which indicate part of layout like header, content, sidebar and footer and within section you can add multiple widget like blog archive, blog roll, or event third party HTML/JavaScript code. You can customize look and feel of section using CSS wrapped around it.
Syntax of section look like this
<b:section id='header' class='header' maxwidgets='1' showaddelement='no' growth='vertical'>
</b:section>
Whereid
is required field, it is unique id provide to that section for identification, use alphanumeric for given id.class
is optional field, may be given an common name like header, main, sidebar and footer. You can given different name as you want.maxwidgets
is optional field, specify that how many maximum widget are inside that section.showaddelement
is also optional field, which specify in layout management in blogger, there will be show an "Add a Gadget". yes or no value are specify for this attribute, yes is default value.growth
is also optional field, which indicate that if gadget is add, then sequence of adding gadget is vertical or horizontal. vertical is default value.
<b:widget id="header" type='Header' locked="yes" >
</b:widget>
Whereid
is unique and alphanumeric, Once assign id can't be changed, until delete or add new one.type
is also required field, which one of the following,
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
locked
specify that, you can move widget using page element tab in blogger. If yes then can't move, that widget locked. If no then you can move this widget. Default value is no.title
is specify name of that widget.pageType
specify that on which type of page this widget is display. It can be all, archive, main or item. all is default value.mobile
is indicate this widget is display in mobile view or not.
Basic Code Structure on XML code
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>
</b:skin>
</head>
<body>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Weberience -Blogger design Tutorials (Header)' type='Header'/>
</b:section>
</body>
</html>
Body:
Its in fact everything that you see on a webpage, (every content of a website is part of body). Its the mother section you may say. Every thing lays in it. The two tags are body tags which contain every thing that you can see on a website.
Outer-Wrapper:
Its another block within body which contains every other object that you can control. The main objects within outer-wrapper block are Header, Content, Footer areas.
Notice how the 'Outer-Wrapper' appears after the <body> tag in your blog's HTML Editor, where all you blog's template code lays.
Header:
Header, as the name suggest is the section that contains all your blog's head content like header banner, adsense code maybe, description, navigation bar etc.
You can find this section in your template with the following code:
Content:
This section of your blog is pretty important as it contains the main body section of your blog (not to confuse with <body> discussed before) that has all your text content like what you are reading now. The content section also has footer and sidebars.
Footer:
The footer area is the one which contains your credits like All rights reserved, copyright Bloggingehow etc.
Some Usefull Coding Tuts for blogger :
So that's pretty much the basic of the Blogger's template layout structure. Hope that was easy to grasp. Share your views this template structure in the comment section below. :)
Its in fact everything that you see on a webpage, (every content of a website is part of body). Its the mother section you may say. Every thing lays in it. The two tags are body tags which contain every thing that you can see on a website.
<body> and </body>
Outer-Wrapper:
Its another block within body which contains every other object that you can control. The main objects within outer-wrapper block are Header, Content, Footer areas.
<div id='outer-wrapper'>
Notice how the 'Outer-Wrapper' appears after the <body> tag in your blog's HTML Editor, where all you blog's template code lays.
Header:
Header, as the name suggest is the section that contains all your blog's head content like header banner, adsense code maybe, description, navigation bar etc.
You can find this section in your template with the following code:
<div id='header-wrapper'>
Content:
This section of your blog is pretty important as it contains the main body section of your blog (not to confuse with <body> discussed before) that has all your text content like what you are reading now. The content section also has footer and sidebars.
<div id='content-wrapper'>
<div id='main-wrapper'>
<div id='rsidebar-wrapper'>'rsidebar' has 'r' as to denote right sidebar. It can be anything like this. Notice i have a single sidebar on the right side so it appears likewise in my HTML editor. It can be simply ( <div id='sidebar-wrapper'>) too.
Footer:
The footer area is the one which contains your credits like All rights reserved, copyright Bloggingehow etc.
Some Usefull Coding Tuts for blogger :
Lessons List
- How to create Blogger Accounts.
- How to create blog on blogger.
- How to install blogger templates.
- How to create First Post on blogger.
- How To Manually Customize Blogger's Lightbox
- How to create Post Template (Predefined Post Template code )
- Hide/Show Widgets/Gadgets In Home/Post/Static/Archive Pages In Blogger
- How to Custom Add Meta Description Tags/keywords to Blogger
- 10 Ways To Style and Create - Read More Links In Blogger
- Add Disqus Comment System in your Blog
- Add Easy to Setup Facebook Official Recommendations Bar In Blogger-Blogspot Facebook Plugin
- How To Add Easily Google Analytical Code on Blogger based website/Blog
- How To Make The Blogger Posts Have A Calendar For The Date In
- How can I Reduce and fix problem of Blogger's feed size below FeedBurner's 512K limit?
- How to Using Google Web Fonts API In Blogger
- How to easy use Floating Social Sharing Header Bar Widget For Blogger
- How to solve Problem Custom 404 Error Pages For Blogger Based Website
- How to use Custom Permalinks for Blogger Posts
- New Facebook Comment Box for Blogger With Notifications Enabled
- Professional Footer Quote Author Box Widget 2.0 For Blogger
- Stylish 5 Amazing Search Boxes For Blogger
- How to create Responsive google adsense ads on your website 2013[Next Upcomming Tuts...]
So that's pretty much the basic of the Blogger's template layout structure. Hope that was easy to grasp. Share your views this template structure in the comment section below. :)
:v
RépondreSupprimer