在用Blogger模板iStudio修改笔记　# 明

2011年4月3日星期日

在用Blogger模板iStudio修改笔记

发帖者 Sparkhandle 时间： 13:58

这个模板是在Blogger templates上找来的，名字里带有i，苹果风格吗？
首先，换上后觉得页面有点窄，还有几处bug，于是动起修改这个模板的念头。（因为自己不懂做整个模板出来呀！！）
那么，简单来对MOD过的地方做个笔记。

1、基本：进入后台——设计，常用的是“修改HTML”，偶尔用到“页面元素”
2、进入修改HTML，下载完整模板做好备份。
3、做过的修整（都是针对iStudio模板的）：

a.标题说明换成随机文字

点选扩展窗口小部件模板，找到<p class='description'>，把后面的<span><data:description/></span>替换成想要的东西，我找了个可用的JS语句实现随机文字显示：
<script type="text/javascript">
akari_txt = new Array(4);
akari_txt[0] = "隨機文字";
akari_txt[1] = "任何文字均可";
akari_txt[2] = "可以隨機抽出文字";
akari_txt[3] = "明 | Akari の简易事项";
index = Math.floor(Math.random() * akari_txt.length);
document.write(akari_txt[index]);
</script>
以后只要在akari_txt[×]后的引号插入就行了
new Array具体不知道怎么用，可以把括号里数字去掉，也可以把数字换成条数？

b.换页首随机图片

这个比较简单，找到<section id='RandomShow'>，把下面的图片地址改掉就行了。

关于图片属性可以找到#RandomShow img，然后修改后面的值

c.改文章标题字号

找到article .title h2把后面的font-size改为想要的大小

d.修改Back Top图标位置

原来的Back Top图标是在内文结束的右下端的，现改在主页的每个标题的右上角（其实也不是这样）
找<b:include data='post' name='shareButtons'/></div>在这之后加上
<div class='gototop'>
<a class='gotop' href='#' onclick='istoJS.goTop();return false;' title='Back Top'>Back Top</a>
</div>

然后去掉内文的Back Top:
找<p align="right">改为<p align='right'/><span></span>

d.去除一个图标bug

找到名为navlib.png的图片地址，下载来修改：把右边像上面的两个图标P掉

e.扩大页面宽度

1.查找两个900px，改为1000px
2.下载navfder.png、content_bg.png，修改宽度为1000，上传后替换源代码地址
注：navfder.png是导航条的背景图片；content_bg.png是正文的底色图片，高度只有1px；bg.png是最顶端的背景图，宽度只有1px，然后在x方向上repeat。

f.换底色

1.找到/* Basics */把下面的body{background:#后面的数值换成想要的颜色值（十六进制）
2./* Menus Nav */下header nav{clear:both;overflow:hidden;background:#填颜色值

g.在评论时间后面加入“回复此评论”链接

布局代码：

——不再需要 Flash 插件，不再需要过多的说明，只需一次点击，需要添加的回复功能代码自动就会出现在回复框中。这个功能是基于 Blogger 弹出式评论的弹出窗口设计的，但是你无需在 Blogger 控制台选择“弹出式评论框”——你仍然可以使用你喜欢的回复评论方式（比如现在流行的“嵌入式评论框（Embedded Comment Form）——

查找如下代码：
</cite> at <a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>后面添加下面代码：

<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=BLOG-ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>回复此评论</a></span>

BLOG-ID 需替换为你自己 Blog 的编号。这段代码会在评论框中插入形如下面代码的内容：@<a href="#c1234567890">我是评论者</a>

模板代码（未测试）：

把以下代码放在模板的 </head> 之前。
<ItemPage><script type="text/javascript">var fanch = "<Blogger><$BlogItemNumber$></Blogger>";</script></ItemPage>

把以下代码放在需要添加“回复此评论”的位置上，例如~~“小王说...”~~评论日期之后
<span id="reply-<$BlogCommentNumber$>" title="回复此评论"></span>

把下面的代码放在 </BlogItemComments> 之前。
<script type="text/javascript">
var fname = '<$BlogCommentAuthor$>';
var fhtml = fname.replace(/<[^>].*?>/g,"");
var fname = escape(fhtml.replace(/ /,""));
document.getElementById("reply-<$BlogCommentNumber$>").innerHTML = "<a href=\"https://www.blogger.com/comment.g?blogID=BLOG-ID&postID=" + fanch + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23<$BlogCommentAnchorName$>%22%3E" + fname + "%3C%2F%61%3E#form\" onclick=\"javascript:window.open(this.href, \'bloggerPopup\', \'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450\'); return false;\">回复此评论</a>";
</script>

完成