Blogger beta:图片解剖Blogger beta模板代码





说明(点击看大图):
1.所有蓝色的部分都是位于Style标记之间的CSS样式表代码,红色的部分是位于Body标记之间的Html代码。
2.并不是所有的模板都完全一样,但大体类似。
3.享受自己的Hack吧^-^
4.via Blogatech


A)头部(Header)。此部分位于页首部,包含标题和网站描述,概括了整个页首部分。

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)文章援引区域(Post Block Quote)


CSS=
.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="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
<li><a href="http://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>

21 条评论:

匿名 说...

突然发现google search 这么强,刚在幻灭那里看到关于 google Blog Search 有了进一步的改进然后便想去试试看,一搜,吓我一跳,我刚发布的一篇日志就已赫然在录了……
http://www.google.com/blogsearch?hl=en&ie=UTF-8&q=myrpsh+blogurl:http://myrpsh.spaces.live.com/

显示为20分钟之前……

不过奇怪的是这篇最新的收录结果却在这页的最下边,why?

咖啡鱼 说...

Blogsearch是通过RSS来收录网站内容的,跟网页搜索是不 一样的,只要你发布了几乎立即就被收录了。就像一个RSS reader

Unknown 说...

H)文章援引区域(Post Block Quote)

...
...
...


我的怎么没有这段,我想改个跟你一样的,怎么做啊

Chocoyang 说...

很详细 谢谢。
我是个初学着 看不懂这个些东西。不知道如何修改,能给点相关的资料看看么?谢谢

怪羊 说...

太感谢了,这篇文章对我帮助太大了,我每次都得自己摸索好长时间才能明白对应的代码,这个清晰多了。

等有时间了再应用到我的blog上去。

肖峰 说...

新的具有layout界面的代码和这个大相径庭啊

匿名 说...

請問Beta可以做到像舊的Blogger把所有留言者名字列出來嗎﹖

我連要把最新留言列在部落格右邊都有問題﹐不知為何照所有朋友的做法卻做不到。

匿名 说...

抱歉﹐我只能在這兒回信了。還好我剛才打的都還在。可能一個繁體字一個簡筆字的原因吧。


哇﹗你的response超級快﹗﹗

謝謝謝謝﹗

我的部落格已經升級了。

嘿﹗可以了。我去enable full blog comment feed了﹐之前是none.

可是﹐字體好大﹐好可怕。
我還是想念以前可以在每篇文章下方把所有留言者名字列出的功能。在新版都不能用了(因為我是在blogger help抄來的﹐所以也沒本事看那兒出問題)。

你的網誌救了好多人噢﹗

匿名 说...

老板的blog隐藏navbar要用什么代码的?

Ezen 说...

学习学习

Unknown 说...

阅后确实长见识

老刘 说...

获益匪浅。原模板如何修改尺寸啊?

恶女K 说...

太感谢了
一下子开朗了不少

stef 说...

很有用。thx

bobo21888 说...

订正一个问题:
B)导航栏隐藏的部分:
CSS=

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

应该改为:
#navbar { height:0px; visibility:hidden; display:none
}
本人测试过

徐者居江 说...

用Google/Blogger 留言

匿名 说...

学习!

小chao 说...

好东西,学习来

╰☆NyTong☆╮ 说...

很详细涅 =)

只不过我是初学者...

不懂要怎么改地说...

╰☆NyTong☆╮ 说...
此评论已被作者删除。
Roy 说...

哇。学习了