Blogger is not only for blogging, or creating post, but we can use blogger for design, what design?, design of the template with HTML of course. But coding in blogger is not easy; you need to understand the XHTML code of blogger, and you need to understand, where you can place the code. In blogger XHTML is many of a code, maybe you're already know some code like, CSS, ]]></b:skin>, <b:widget>, <b:includable>, <head>, <body> and many others. But the question is, did you know does this code meaning?, or where is the code placed?, what is the rule for placing code?, so here we are, i'll share the explication of the code.
Layouts Data Tags
The layout data tags is the most important code in blogger XHTML. The format of code is: <data:name1.name2/>. It's started with <data: then the name is like: post, and name 2 is the name code subbed by code name 1. The example is <data:post.body/>, post is the widget, and body of post is inside the post widget. So if we translate it, data of post's body. Data meaning the text or anything that is not certainly, or it can be from the machine, that is XHTML, in blogger edit HTML section if you see: <data:post.body/> but if you open your blog and view page source, you'll not found the <data:post.body/>, but that code will be changed to the post contents, view page source it's mean not view the source from the HTML we edited, but the browser is take a source from converted version from blogger, so the conclusion is: if we edit the blogger HTML and save, it's not saved directly to your blogger HTML, but it sended to blogger machine, and blogger is converting the XHTML to HTML for browser.
For the complete list of Layout data tags, you can see it in here:
http://damzaky.blogspot.com/2012/10/the-blogger-layout-data-tag-master-code.htmlBlogger XHTML structure
The Blogger XHTML structure is the very important code in HTML. The structure is easy, like the normal HTML, but in blogger have a rules for realese the XHTML. The simples structure of blogger HTML is:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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>
<b:skin><![CDATA[
YOU PLACE THE CSS IN HERE
]]></b:skin>
</head>
<body>
<b:section id='test'/>
</body>
</html>
Red : The red code is the key of HTML/XHTML, if you delete this code, when you save HTML, blogger won't save it.
White : I don't know about this code, but i think this is the most important code.
Blue : The blue code is the basic structural of HTML and the most important tag in HTML.
Green : The green code is the important code in blogger, but the ID is not only test, it can be another id because without this, code won't save the HTML.
Black : The black code is the place for CSS is not so important, but without CSS, blogger can be designed.
Dark blue : The dark blue is most important code in blogger, you can't delete it (maybe), but it's needed for replacing <style> tag in blogger.
Definition:<html> is used for the key of HTML/XHTML.
<head> is used for placing the code that not showing in the display, like javascript, CSS.
<body> is used for placing the code that is showing in your monitor.
<b:section> is code for the place of widget in blogger.
<b:skin> is used for placing the CSS code.
And that is the basic XHTML, but in blogger there are a general XHTML, that is used by many blogger.
<b:include data='blog' name='all-head-content'/> : meaning the all content of head tag like: meta, link, script<b:widget : meaning some widget in the blogAnd this is the HTML that is converted and ready to readed in browser
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
<title>Blog title</title>
<meta content='ur-blog ur-blog' name='Description'/>
<meta content='ur-blog ur-blog' name='keywords'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { var a=window,b="jstiming",d="tick";var e=function(c){this.t={};this.tick=function(c,p,h){h=void 0!=h?h:(new Date).getTime();this.t[c]=[h,p]};this[d]("start",null,c)},f=new e;a.jstiming={Timer:e,load:f};if(a.performance&&a.performance.timing){var g=a.performance.timing,j=a[b].load,k=g.navigationStart,l=g.responseStart;0<k&&l>=k&&(j[d]("_wtsrt",void 0,k),j[d]("wtsrt_","_wtsrt",l),j[d]("tbsd_","wtsrt_"))}
try{var m=null;a.chrome&&a.chrome.csi&&(m=Math.floor(a.chrome.csi().pageT),j&&0<k&&(j[d]("_tbnd",void 0,a.chrome.csi().startE),j[d]("tbnd_","_tbnd",k)));null==m&&a.gtbExternal&&(m=a.gtbExternal.pageT());null==m&&a.external&&(m=a.external.pageT,j&&0<k&&(j[d]("_tbnd",void 0,a.external.startE),j[d]("tbnd_","_tbnd",k)));m&&(a[b].pt=m)}catch(n){};a.tickAboveFold=function(c){var i=0;if(c.offsetParent){do i+=c.offsetTop;while(c=c.offsetParent)}c=i;750>=c&&a[b].load[d]("aft")};var q=!1;function r(){q||(q=!0,a[b].load[d]("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",r,!1):a.attachEvent("onscroll",r);
})();</script>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link href='http://ur-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://ur-blog.blogspot.com/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="ur-blog - Atom" href="http://ur-blog.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="ur-blog - RSS" href="http://ur-blog.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="ur-blog - Atom" href="http://www.blogger.com/feeds/3522685956630332245/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=3522685956630332245" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="http://ur-blog.blogspot.com/" />
<meta content='ur-blog ur-blog ur-blog' name='description'/>
<meta content='index,follow' name='robots'/>
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />
<style>
a {
color: #fff;
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div id='content-wrapper'>
<div id='main-wrapper'>
<div class='main section' id='main'><div class='widget Blog' id='Blog1'>
<div class='blog-posts hfeed'>
Blog post content
</div>
</div>
</div>
</div>
<div id='sidebar-wrapper'>
<div class='widget Label' id='Label1'>
<div class='widget-content cloud-label-widget-content'>
Widget content
</div>
</div>
</div>
</div>
<div id='footer-wrapper'>
<div class='widget Text' id='Text1'>
<div class='widget-content text-widget-content'>
Widget content
</div>
</div>
</div>
</div>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="//www.blogger.com/static/v1/widgets/130042055-widgets.js"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ;
</script>
</body></html>
: this code is reset code of CSS, i want to delete it, but it's impossible, but some people says that code can be deleted by using HTML comments.
<script type="text/javascript">if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');</script><script type="text/javascript" src="//www.blogger.com/static/v1/widgets/130042055-widgets.js"></script> : for this code also i don't understand the fonction, but i think is the reset code for widget, and it can't be deleted.
<script type="text/javascript">(function() { var a=window,b="jstiming",d="tick";var e=function(c){this.t={};this.tick=function(c,p,h){h=void 0!=h?h:(new Date).getTime();this.t[c]=[h,p]};this[d]("start",null,c)},f=new e;a.jstiming={Timer:e,load:f};if(a.performance&&a.performance.timing){var g=a.performance.timing,j=a[b].load,k=g.navigationStart,l=g.responseStart;0<k&&l>=k&&(j[d]("_wtsrt",void 0,k),j[d]("wtsrt_","_wtsrt",l),j[d]("tbsd_","wtsrt_"))}try{var m=null;a.chrome&&a.chrome.csi&&(m=Math.floor(a.chrome.csi().pageT),j&&0<k&&(j[d]("_tbnd",void 0,a.chrome.csi().startE),j[d]("tbnd_","_tbnd",k)));null==m&&a.gtbExternal&&(m=a.gtbExternal.pageT());null==m&&a.external&&(m=a.external.pageT,j&&0<k&&(j[d]("_tbnd",void 0,a.external.startE),j[d]("tbnd_","_tbnd",k)));m&&(a[b].pt=m)}catch(n){};a.tickAboveFold=function(c){var i=0;if(c.offsetParent){do i+=c.offsetTop;while(c=c.offsetParent)}c=i;750>=c&&a[b].load[d]("aft")};var q=!1;function r(){q||(q=!0,a[b].load[d]("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",r,!1):a.attachEvent("onscroll",r); })();</script> : this code in XHTML is placed inside the <b:include data='blog' name='all-head-content'/>
Maybe that's the basic, i'll update this article later, because i haven't more time now.....
