天南地北戈壁沙漠: 五月 2007

2007年5月29日星期二

[摘要]关于模板的使用、改变Blog链接形式、显示最新评论和热门文章排列
最初我的想法，是找个稳定的空间存放照片，便于亲戚朋友观看、下载，主要是生活照了，并不是什么大片。从建立相册开始，一步一步堕落到了开Blog，再一步一步堕落到了Blog Hack，虽说没研究出什么名堂，但是也花费了几个通宵得一点点经验值。现在是开博的年代，全国人民都开博，我也算是顺应潮流了，哈
对这几天的Blog修改做个小结，算是一个傻瓜式的Step by Step。注意：在对Blog做任何修改之前，最好是先做个备份。此注意放之四海皆准，不限于本文。

先谈谈关于模板。

像我这种既懒又不是很了解什么HTML、CSS、XML等东西的人，最好的办法就是选择一个合适自己的模板，再简单修改一下了。

Blogger自己带有不少模板，色彩搭配版面结构等，都比较漂亮，可以先预览一下，看看与自己的Blog搭配是否和谐，感觉好了就保存。网上也有很多现成的资源，但是要注意，现在有两个版本，一个是旧版的Blogger，一个是Blogger
Beta，两者的模板应该是不一样的（额猜想的，额是新手，也不懂），搜索下载时注意区分。好像现在Beta的帽子也摘掉了，但是不管怎么说，注意区分有两种版本。

推荐一个模板下载的地方

http://ggpi.blogspot.com/search/label/blogger%E6%A8%A1%E7%89%88

套用Blogger自带模板的办法就不说了，点“自定义”后，进入“选择新模板”页面，选好后，“保存模板”即可。

下载的模板使用步骤：

一、进入“自定义”，点取“修改Html”。

二、备份模板。给“扩展窗口小部件模板”选项打钩，然后备份。两种办法备份

1、点“下载完整模板”，起个名字然后保存。恢复的时候，可以“浏览...”，然后“上传”。

2、在编辑窗口中，全部选取，复制，粘贴到一个文本文件。恢复的时候，复制，粘贴回原来的地方。

三、套用模板。“扩展窗口小部件模板”打钩，“浏览...”，选取下载的模板文件（后缀名是.xml），然后“上传”。

这时候，可能会出现一些提示，说什么部件丢失之类的东西，不用管他，这些不影响Blog文章，顶多就是以后再加入需要的小部件。

预览一下,看看效果,不合适的话,可以“清除编辑”，或者适当修改一下。修改办法可以搜索一下，今后我也陆续总结一些东西发上来。

相关链接：
使链接列表弹出新窗口
给Blog侧栏加上最新评论
Blog首页显示文章摘要
侧栏增加热门文章排列
...
read more

[+/-] : 给Blogger增加热门文章排行

发帖者啄木鸟时间： 14:07 0 评论

[摘要]通过spotplex统计文章阅读情况，在侧栏做个排列。

对文章的阅读情况作统计，我在网上查询了不少方法，感觉使用起来比较简单方便的就是通过spotplex 分析了。推荐一下。
没有上图片，应该不会迷茫，过程还是比较简单明了的。
第一步，获得统计代码，打开spotplex

在右上部，点击“Get your Spotplex code for your blog!”，弹出一个新窗口，标题为“Get your Spotplex code (step 1 : Register your blog)”。
注册。很简单，超大的一个输入框，输入Blog地址，然后点击"Get my code"按钮，弹出新窗口，标题为“Get your Spotplex code (step 2 : Blog information)”。
输入Blog的标题、描述（随便写，用于spotplex的显示），选择一个分类，语言当然是选Chinese(simplified)了，再输入email地址，阅读政策打勾，Submit，弹出一个新窗口，标题为“Get your Spotplex code (Your Spotplex code)”。
这个窗口是再再清楚不过了，通过图片Step by step把添加代码的过程画得清清楚楚，照着做就是了。记下你的spotplexcode

代码添加到Blog后，在侧栏会出现一个spotplex的图标，什么样式由上面的第4步选定。点这个图标可以进入spotplex.com获取你的热门文章列表代码。

第二步，获取你的热门文章列表代码
两个办法进入spotplex，点击侧栏的spotplex图标进入，或者直接输入http://www.spotplex.com/code/SpotplexCode 进入，把spotplexcode改为第一步第四点记录下来的数字。
在你的统计曲线下面，点击“Get widget”小图标，会弹出一个标题为“Get Spotplex Widget”的新窗口。
这里有4块内容，最右边是预览窗口，左中是三个步骤选项。

Scope，选择Specific blog
Type，输入spotplexcode，选择Popular articles，别的也可以，但是我这里说的是热门文章排行
Options，如果不是那种超人气的Blog，Period这里还是选Last 7 days吧，要不然显得很冷清的，呵呵。大小可以默认，200x300。Items随便，5篇，10篇，15篇，看你喜欢
右边的Preview会显示一个预览的效果。注意，如果第一步完成未满24小时，可能会出现Java错误，我当时就碰到了。别管他，“Get this widget”，复制代码
在模板侧栏适当地方增加页面元素，选择 HTML/JavaScript，粘贴，保存

添加统计代码满24小时候，才会正常显示列表，所以建议第一步完成24小时后，再进行第二步工作。...
read more

[+/-] : 如何在Blogger首页显示文章的摘要

发帖者啄木鸟时间： 10:41 2 评论

Blog提供的模板样式都比较好看，视觉效果挺好的。但是有个问题一直让我耿耿于怀，就是Blog首页不能显示文章摘要，造成首页太长，看到浏览器侧面的导航条缩成小小一块，感觉很不好，而且不容易找到兴趣内容。于是在网上寻找显示摘要的办法，总结一下，存在手动和自动两种方案。

一、自动化方案：

这个方案使用了overflow属性，即定义一个文章显示的样式框，指定高度，超出高度的部分用省略号代替。首先在样式表中添加代码：
.post-body_new{

border-right:0 px;

border-top:0 px;

border-left:0px;

border-bottom:0px;

height:100px;

overflow:hidden;

text-overflow:ellipsis;

}

改动 height，就可以改动首页文章显示的高度，这里是100px。

接着在找到代码<p><data:post.body></p>，改为：

<b:if cond='data:blog.pageType !="item"'>

<div class='post-body2'>

<data:post.body/>

</div><p>......<a expr:href='data:post.url' title='阅读全文'><b>[阅读全文]</b></a></p>

<b:else/>

<data:post.body/>

</b:if>

优点：方便，不用人工介入，系统自动截取文章的一部分进行显示，而且页面非常整齐，一块一块的，真正体现什么叫豆腐块文章。

缺点：很短的文章，下面一样留一块空白，因为样式框的高度是固定的。不能控制显示内容。

二、手动方案：

找到代码<p><data:post.body></p>，改为

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>.fullpost
{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style type='text/css'>.fullpost
{display:none;}</style>

<p><data:post.body/></p>

<p>...<br/><a
expr:href='data:post.url'>阅读全文...</a></p>

</b:if>

保存模板。这个模板的意思就是，在文章页面全文显示，在首页，则隐藏<span
class="fullpost"></span>之间的内容并增加“阅读全文”的链接。因此，以后发表文章的时候，注意手动添加代码<span class="fullpost"></span>将需要需要隐藏的部分包起来。通常做法是在文章模板处添加帖子模板：

<span class="fullpost">

</span>

优点：自行控制显示内容，可以很好的把文章的摘要或者主要内容显示在首页上，一目了然。

缺点：稍复杂一些，在输入文章的时候要注意添加模板。

相关文章：
http://anyjavalee.blogspot.com/2007/05/blogblog-hack-blogstep-by-step-blog.html

...
read more

2007年5月26日星期六

[+/-] : 相片磨皮的一个简单方法

发帖者啄木鸟时间： 11:48 0 评论

[+/-] : 融融的相册更新了

发帖者啄木鸟时间： 08:34 0 评论

2007年5月25日星期五

[+/-] : 如何增加最新评论

发帖者啄木鸟时间： 17:36 0 评论

[+/-] : 使Blogger链接弹出新窗口

发帖者啄木鸟时间： 16:54 0 评论

Blogger里的链接都是在原窗口中打开，通常我们在文章里要新开窗口打开链接时，只需要注意在输入链接时，后面加上 target="_blank" 就可以了，

如 <a href="http://......" target="_blank">

但是通过模版在侧栏增加的链接列表，只能到模版html去修改。比如我的Blog右侧友情链接，就是一个链接列表。修改模版HTML，找到如下代码（注意勾选“扩展窗口小部件模板”选项），把红色部分加进去，保存模版。

<b:widget id='LinkList1' locked='false' title='友情链接' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'> <ul>
<div id='link'>
<b:loop values='data:links' var='link'> <li>
<a expr:href='data:link.target' target='_blank'><data:link.name/></a></li> </b:loop>
</div> </ul> <b:include name='quickedit'/> </div></b:includable></b:widget>

在网上还找到一篇文章，指出当我们使用严格的DOCTYPE(xhtml1-strict.dtd)时，这个方法将通不过W3C的校验，会出现如下错误提示：

"there is no attribute target for this element(in this HTML version)"

在HTML4.01/XHTML1.0/XHTML1.1严格DOCTYPE下，target="_blank"、target="_self"等等语法都是无效的，我们只能通过JavaScript来变通实现。
标准格式是这样的

<a href="document.html" rel="external">打开一个新窗口</a>

还要配合javascript代码如下：

function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externallinks;

可以把它保存成一个.js文件(比如external.js)，然后通过外部联接方法调用：

<script type="text/javascript" src="external.js"></script>

真不知道老外为什么要把弹出新窗口这个简单的问题复杂化，也许是他们认为没有明确提示就打开一个新窗口是不礼貌的。

这个办法我还没用，至少采用过渡型的DOCTYPE(xh tml1-transitional. dtd)时没有问题，我这里就没有什么异常现象发生，以后再说了，先做个记号存起来。

...
read more