桃源水榭: Blogger技巧

上一个Hack比较适应于那些还未进行过修改的Blog，因为它要替换大部分代码，这样以前的Hacks都会被去掉，对我们是一个不小的损失。Photofool介绍了详细的添加方法，尽管有些烦琐，可是还是值得的。此Hack只适应于两栏模式。结果略有不同。实际效果如这个地址。觉得有必要补充一下，这个Hack会在访问者的计算机上写一个Cookies，保存期限为30天，它会记住浏览者所喜欢的布局。getExpireDate(30)修改括号内的数字就可以修改保存期限。
1.备份模板。无需展开代码。
2.紧跟之前添加以下代码：

3.紧跟之后添加如下代码：

在之前添加如下代码：

4. 用

将Header-wrapper包围起来，

紧跟

之后，

紧在

之前，如红色部分：

skip to main |
skip to sidebar

5.把content-wrapper用同样的方式包围起来。

如红色部分：

在这一部分里我们还要添加三个区域

，它们都要以

结束。如下面代码：

6.Sidebar-wrapper用

包围起来，如代码红色部分。

7.把Footer-wrapper用

包围起来。如代码部分。

8.最后要向上一篇文章一样去掉各个Wrapper的宽度定义

#header-wrapper {
/*width:660px;*/

#outer-wrapper {
/*width: 660px;*/

#main-wrapper {
/*width: 410px;
float: left;*/

#sidebar-wrapper {
/*width: 220px;
float: right;*/

#footer {
/*width:660px;*/

9.添加一个Html/javascript模块。加入下面代码，像上一篇文章提到的，一共有七种效果，分别是"yui-t1"到"yui-t7"，你可以根据自己的情况选择，这里例出了三种，分别是侧边栏在左侧、右侧和下方。

layout 1|
layout 2|
layout 3

补充：好像改变像Layout1的名字，不能在Html/javascript里修改。可以到代码里，找到Html1 Widgt，再在代码里直接修改Layout1的名字

Blogger beta:"Top of Page"、"Top of post"

这个Hack(via Hans)在文章脚部处添加了两个链接，一个回到页首，一个回到帖子标题处。

1.备份模板，展开Widget

2.找到下面的代码，并添加红色部分（如果使用了本Blog之前介绍的展开伸缩文章，可跳过此步）

expr:id='"post-" + data:post.id' >

3.继续向下寻找代码，找到文章脚部（Post-footer），比如我们把它添加在Quick edit之后，或者任何你想要的地方添加以下代码：

Top of Page
Top of Post

4.保存模板

Blogger beta:把模板修改为三栏

如果你的Widget较多，那么你可能会希望模板变成三栏。下面是一种方法，不过这仅仅是一个参考，不同的模板可能不同，视情况修改，记住在修改之前保存模板。
这儿我们需要自定义CSS，以设置各栏的宽度等。在Blogger中我们通过以下3部分控制页面：
#outer-wrapper - 用来定义整个页面
#main-wrapper - 用来定义文章部分
#sidebar-wrapper - 用来定义侧栏部分
在这儿，我们要添加一栏，所以我们需要再定义一个新的Wrapper，我们把新的Wrapper命名为#newsidebar-wrapper，因为大部分设置是相同的，我们只要Copy/Paste Sidebar-wrapper并做简单修改即可。

Step1：首先我们要确定各栏的宽度，推荐outer-wrapper:750px,main-wrapper:400px,两个sidebar-wrapper各为150px.要保证outer>main+sidebar*2。

Step2：修改CSS（Expand Widget Templates已选中），各个模板可能不同，在模板中找到相应的位置修改，下面是一个例子，如果需要调整页面距边框距离，请调整相应的margin 值。我们通过float来控制Sidebar在不同的位置显示，如果你希望他们都在同一侧，可将它们都调整为right或left.

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
#newsidebar-wrapper {
width: 150px;
float: left;
...
}
Step3：定义CSS之后，我们要再定义一个NewSidebar，此时关闭Expand Widget Templates即可，大约在代码的最后，你可以看到类似的代码，并添加红色标记的部分。

title='About Me' type='Profile'/>

Blogger简单代码修改

在不同的浏览器中显示可能会不一致

1.为标题设置固定链接
有些模板并未提供此功能，这给引用日志带来了不便，通过添加简单代码即可实现。
找到如下代码（使用时请将《》改为<>）：
《!-- Begin .post --》
《div class="post"》《a name="《$BlogItemNumber$》"》《/a》

《BlogItemTitle》
《h3 class="post-title"》
《BlogItemUrl》《a href="<$BlogItemUrl$>" title="external link"》
《/BlogItemUrl》
《a href="<$BlogItemPermalinkUrl$>"》《$BlogItemTitle$》《/a》
最后一行即为要使用的代码。

2.文字汉化
个人资料无法汉化。唯一的做法就是自己用语句引用图片和链接
在代码中找到相应的英文字符，直接替换成中文即可。以我的模板为例，代码如下
（不同模板代码不一定完全相同，另外我添加了一个"固定链接"并更改了顺序，请注意）：

《!-- Begin .post --》
《div class="post"》《a name="《$BlogItemNumber$》"》《/a》

《BlogItemTitle》
《h3 class="post-title"》
《BlogItemUrl》《a href="《$BlogItemUrl$》" title="external
link"》《/BlogItemUrl》
《a
href="《$BlogItemPermalinkUrl$》"》《$BlogItemTitle$》《/a》
《BlogItemUrl》《/a》《/BlogItemUrl》
《/h3》
《/BlogItemTitle》

《div class="post-body"》

《div》
《$BlogItemBody$》
《/div》

《/div》

《p class="post-footer"》
《em》《$BlogItemAuthorNickname$》于《$BlogItemDateTime$》
发布《/em》
《MainOrArchivePage》《BlogItemCommentsEnabled》
《font size=2》《a class="comment-link"
href="《$BlogItemPermalinkUrl$》"
title="固定链接"》固定链接《/a》《a class="comment-link"
href="《$BlogItemCommentCreate$》"《$BlogItemCommentFormOnclick$》》《$BlogItemCommentCount$》
评论《/a》《/font》
《/BlogItemCommentsEnabled》《BlogItemBacklinksEnabled》
《font size=2》《a class="comment-link"
href="《$BlogItemPermalinkUrl$》#links"》引用通告《/a》《/font》
《/BlogItemBacklinksEnabled》
《/MainOrArchivePage》《$BlogItemControl$》
《/p》

《/div》
《!-- End .post --》

《!-- Begin #comments --》
《ItemPage》

《div id="comments"》

《BlogItemCommentsEnabled》《a name="comments"》《/a》

《h4》《$BlogItemCommentCount$》评论:《/h4》

《ul》
《BlogItemComments》
《li id="c《$BlogCommentNumber$》"》《a
name="c《$BlogCommentNumber$》"》《/a》
《p class="comment-data"》At 《a href="#c《$BlogCommentNumber$》"
title="comment permalink"》《$BlogCommentDateTime$》《/a》,
《$BlogCommentAuthor$》 said…《/p》
《div class="comment-body"》
《p》《$BlogCommentBody$》《/p》
《$BlogCommentDeleteIcon$》
《/div》
《/li》
《/BlogItemComments》
《/ul》

《p class="comment-data"》
《$BlogItemCreate$》
《/p》

《/BlogItemCommentsEnabled》
《BlogItemBacklinksEnabled》
《a name="links"》《/a》《h4》引用通告:《/h4》
《dl id="comments-block"》

3.链接下划线、背景色的修改
因为Blog里链接较多，带上下划线会显得杂乱，尤其是sidebar看起来相当不爽。通过CSS全局设置即可去除下划线以及添加鼠标经过时的背景色。此代码要跟在《style
type="text/css"》之后，代码如下：
去除下划线：a{TEXT-DECORATION:none}
添加背景：a:hover {
text-decoration:none;
background-color: #70e1ff;

}

红色字体为相应颜色值，在此附上一组比较漂亮的颜色代码

4.Flickr
Sidebar上的Flickr徽章的代码也经过了修改，去掉了广告性质的两个链接，看起来舒服多了，不妨自己试一试。

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=

">
<$BlogTitle$>

<$BlogDescription$>

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=

<$BlogDateHeaderDate$>

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=

" title="external link">
<$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=

H)文章援引区域（Post Block Quote）

CSS=
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

HTML=

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=

posted by <$BlogItemAuthorNickname$> at " title="permanent link"><$BlogItemDateTime$>

"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments

#links">links to this post

<$BlogItemControl$>

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=
Links

Google News

Edit-Me

Edit-Me

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=
Previous Posts

"><$BlogPreviousItemTitle$>

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=
Archives

"><$BlogArchiveName$>

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=

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=

桃源水榭

Blogger beta：页面布局二

Blogger beta:"Top of Page"、"Top of post"

Blogger beta:把模板修改为三栏

Blogger简单代码修改

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

HTML=

">
<$BlogTitle$>

<$BlogDateHeaderDate$>

" title="external link">
<$BlogItemTitle$>

Links

Previous Posts

Archives

Blog Archive

Labels