My Blog

通过图示的方式直观地展示了blogger各部分代码的功能。

CSS=
#header {width:660px;margin:0 auto 10px;border:1px solid #ccc;}
HTML=<div id="header"><h1 id="blog-title"><ItemPage><a href="<$BlogURL$>"></ItemPage><$BlogTitle$>
<ItemPage></h1><p id="description"><$BlogDescription$></div>

B）导航栏（Navigation Bar）。此部分代码默认在代码中是不显示的。如果你要去掉NavBar只要在CSS中添加以下代码即可：

CSS=
#b-navbar { height:0px; visibility:hidden; display:none}

C) Blog标题（Blog title）

CSS=
#blog-title {margin:5px 5px 0;padding:20px 20px .25em;border:1px solid #eee;border-width:1px 1px 0;font-size:200%;line-height:1.2em;font-weight:normal;color:#666;text-transform:uppercase;letter-spacing:.2em;}
HTML= <$BlogTitle$>

D)Blog 描述（Blog Description）

CSS= #blog-description {margin:0 5px 5px;padding:0 20px 20px;border:1px solid #eee;border-width:0 1px 1px;max-width:700px;font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;text-transform:uppercase;letter-spacing:.2em;color:#999;}HTML= <$BlogDescription$>

E)Blog日期首（Blog Date Header）。贴子发布时自动生成日期。

CSS= h2 {margin:1.5em 0 .75em;font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;text-transform:uppercase;letter-spacing:.2em;color:#999;.date-header {margin:1.5em 0 .5em;}HTML= <BlogDateHeader><h2 class="date-header"><$BlogDateHeaderDate$></h2></BlogDateHeader>

F)文章标题（Blog Item Title)

CSS=.post-title {margin:.25em 0 0;padding:0 0 4px;font-size:140%;font-weight:normal;line-height:1.4em;color:#c60;HTML= <BlogItemTitle><h3 class="post-title"><BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl><$BlogItemTitle$><BlogItemUrl></a></BlogItemUrl></h3></BlogItemTitle>

G)文章区域（Post Division）。此部分包含了Blog Date header, Blog Item Title, Blog Item Body 和 Blog Item Footer。

CSS=.post {margin:.5em 0 1.5em;border-bottom:1px dotted #ccc;padding-bottom:1.5em;.post div {margin:0 0 .75em;line-height:1.6em;HTML=<div class="post"></div>H)%u6587%u7AE0%u63F4%u5F15%u533A%u57DF%uFF08Post Block Quote%uFF09CSS=.post blockquote {margin:1em 20px;}.post blockquote p {margin:.75em 0;}HTML=<blockquote>

I)文章文字区域（Blog Item Body)

CSS= .post div {margin:0 0 .75em;line-height:1.6em;}HTML=<$BlogItemBody$>

J)个人资料部分（Blog Member Profile Division）

CSS= #profile-container {margin:0 0 1.5em;border-bottom:1px dotted #ccc;padding-bottom:1.5em;}.profile-datablock {margin:.5em 0 .5em;}.profile-img {display:inline;}.profile-img img {float:left;padding:4px;border:1px solid #ddd;margin:0 8px 3px 0;}.profile-data {margin:0;font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;text-transform:uppercase;letter-spacing:.1em;}.profile-data strong {display:none;}.profile-textblock {margin:0 0 .5em;}.profile-link {margin:0;font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;text-transform:uppercase;letter-spacing:.1em;}HTML= <$BlogMemberProfile$>

K)文章底部（Post Footer）这部分包含了Authors Nickname, Item Date Time, Item Comment Count, Comments and blog item control variables等

CSS=p.post-footer {margin:-.25em 0 0;color:#ccc;}.post-footer em, .comment-link {font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;text-transform:uppercase;letter-spacing:.1em;}.post-footer em {font-style:normal;color:#999;margin-right:.6em;}HTML=<p class="post-footer"><em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em><MainOrArchivePage><BlogItemCommentsEnabled><a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled><BlogItemBacklinksEnabled><a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a></BlogItemBacklinksEnabled></MainOrArchivePage> <$BlogItemControl$></p>

L)链接（Links）

CSS=a:link {color:#58a;text-decoration:none;}a:visited {color:#969;text-decoration:none;}a:hover {color:#c60;text-decoration:underline;}a img {border-width:0;}#sidebar ul {margin:0 0 1.5em;padding:0 0 1.5em;border-bottom:1px dotted #ccc;list-style:none;}HTML=<h2 class="sidebar-title">Links</h2><ul><li><a href="http://news.google.com/">Google News</a></li><li><a href="Edit-Mehttp://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li></ul>

M)之前文章（Previous Posts）

CSS= #sidebar ul {margin:0 0 1.5em;padding:0 0 1.5em;border-bottom:1px dotted #ccc;list-style:none;}h2 {margin:1.5em 0 .75em;font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;text-transform:uppercase;letter-spacing:.2em;color:#999;}HTML=<h2 class="sidebar-title">Previous Posts</h2><ul id="recently"><BloggerPreviousItems><li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li></BloggerPreviousItems></ul>

N)存档（Archives ）

CSS= #sidebar ul {margin:0 0 1.5em;padding:0 0 1.5em;border-bottom:1px dotted #ccc;list-style:none;}h2 {margin:1.5em 0 .75em;font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;text-transform:uppercase;letter-spacing:.2em;color:#999;}HTML=<h2 class="sidebar-title">Archives</h2><ul class="archive-list"><BloggerArchives><li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li></BloggerArchives></ul>

O)侧边栏区域。此部分包含了Member Profile, Links, Resent Posts and Archives等

CSS= #sidebar {width:220px;float:right;}#sidebar ul {margin:0 0 1.5em;padding:0 0 1.5em;border-bottom:1px dotted #ccc;list-style:none;}#sidebar li {margin:0;padding:0 0 .25em 15px;text-indent:-15px;line-height:1.5em;}#sidebar p {color:#666;line-height:1.5em;HTML=<div id="sidebar"><div id="sidebar2"></div>

P)页脚部分

CSS=#footer {width:660px;clear:both;margin:0 auto;}#footer hr {display:none;}#footer p {margin:0;padding-top:15px;font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;text-transform:uppercase;letter-spacing:.1em;}#sidebar p {color:#666;line-height:1.5em;HTML=<div id="footer"><hr /><p><!--This is an optional footer. If you want text here, place it inside these tags, and remove this comment. --> </p></div>

注：该文章的日志中提到了
订正一个问题:B）导航栏隐藏的部分:CSS=
#b-navbar { height:0px; visibility:hidden; display:none}
应该改为:#navbar { height:0px; visibility:hidden; display:none}经过测试