傻瓜式feeds in tabs

Posted: October 4th, 2007 | Filed under: 网络·互联 | Tags: | No Comments »

在google小工具API编程指南里发现了一个名为feeds in tabs的实例，感觉甚是有趣。不过需要调用tab库，而我对javascript并不熟悉。所以就想能不能用我懂的知识做一个替代品呢?于是上网搜到了一个名为Javascript Tabifier的小小js plugin，这个小东西和Google Reader提供的widgets一结合，恰巧可以实现feeds in tabs的效果。
在html下的全部代码如下：

<html>
<head>
<script type=”text/javascript” src=”http://www.barelyfitz.com/projects/tabber/tabber.js“>
</script>
<link rel=”stylesheet” type=”text/css” href=”http://www.barelyfitz.com/projects/tabber/example.css”/>
</head>

<body>
<div class=”tabber”>

<div class=”tabbertab” title=”Internet”>
<script type=”text/javascript” src=”http://www.google.com/reader/ui/publisher-en.js”></script>
<script type=”text/javascript” src=” http://www.google.com/reader/public/javascript/user/12274289198166275392/label/internet?n=5&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22%22%2Cs%3A%22false%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC”></script>
</div>

<div class=”tabbertab” title=”Google”>
<script type=”text/javascript” src=”http://www.google.com/reader/ui/publisher-en.js”></script>
<script type=”text/javascript” src=” http://www.google.com/reader/public/javascript/user/12274289198166275392/label/google?n=5&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22%22%2Cs%3A%22false%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC”></script>
</div>

</div>
</body>
</html>

<head>区里先后引用了官方提供的js和默认css样式，<body>区里的格式是固定的，在http://www.barelyfitz.com/projects/tabber的使用方法中有说明。形如<div class=”tabbertab” title=”Internet”> 下面的即是google reader提供的widgets代码。如果要添加多个tab，格式须遵守说明。
如果要在blogger中添加这个傻瓜式feeds in tabs，代码如下：

<script type=”text/javascript” src=”http://www.barelyfitz.com/projects/tabber/tabber.js“> </script>
<style>…………..</style>
<div class=”tabber”>
<div class=”tabbertab” title=”Internet”> ………………..</div>
<div class=”tabbertab” title=”Google”> ………………..</div>
</div>

<style>和</style>之间的位置是css，可参考http://www.barelyfitz.com/projects/tabber/example.css”/，下面两个省略号位置放google reader的widgets代码。(当然，也可以放其他第三方网站提供的js代码，比如aiderss.com的)
最后还有一点要说明的是，实验成功后最好将Tabifier的js下载到自己空间(googlecode)再引用，否则会对别人网站的服务器造成压力。
附效果图一张：

Green lush模板侧边栏标题双重效果的实现

Posted: September 19th, 2007 | Filed under: 网络·互联 | Tags: | 1 Comment »

第一次看到Green Lush模板，就被它漂亮的侧边栏标题吸引了。
如何在新版blogger中实现这个效果呢?有一个低级的办法。其实，略懂css的人都能想到。
第一步:
将下列代码插入<b:skin><![CDATA[/* 和 ]]></b:skin>之间:

h3{
margin: 0;
font-weight: normal;
color: #d8f7af;
 font-size: 3.2em;
position: relative;
}

h4{
margin: 0;
display: inline;
position: relative;
top: -.5em;
left: 2em;
font-size: 1.8em;
font-weight: normal;
color: #94c258;
}

改变颜色值以匹配你的模板。当然，大小参数也可以调整，保存模板。
第二步:
打开控制台-模板-页面元素-添加页面元素-HTML/JavaScript,标题一栏空着，在内容框中加入

<h3>…SIDEBAR TITLE…</h3>
<h4>…SIDEBAR TITLE…</h4>

之后加入你想在侧边栏显示的内容就可以了。

Flash header for blogger

Posted: September 6th, 2007 | Filed under: 网络·互联 | Tags: | No Comments »

一个简单教程，参考 Techno Juice，演示效果也在此。
1.备份原模板
2.贴图不说话

3.依旧贴图不说话

4.把flash文件上传至自己的空间，记住外链地址。
5.修改html，勾选“扩展窗口小部件模板”，找到”!–Show just the image, no text– “这句，然后用下面的代码替换选中的蓝色代码部分(继续看图):

其中各项参数都是可以修改滴，src的地址要改成flash外链地址。

6.保存模板，大功告成!

友情提醒:作者原文的第4-7步全部说的是css问题，作者的修改(调整宽度及去边框)是基于个人需要，仅供参考。
(1)header wrapper的修改
#header-wrapper {width:670px;margin:0 auto 10px;border:1px solid $bordercolor;}
变成
#header-wrapper {width:800px;margin:0 auto 10px;border:0px solid $bordercolor;}
(2)header的修改
#header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; }
变成
#header { margin: 5px; border: 0px solid $bordercolor; text-align: center; color:$pagetitlecolor; }
(3)outer wrapper的修改
#outer-wrapper { width: 760px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
变成
#outer-wrapper { width: 900px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
(4)main wrapper的修改
#main-wrapper { width: 410px; float: left;
变成
#main-wrapper { width: 510px; float: left;

blogger的最新评论无法显示的原因

Posted: September 3rd, 2007 | Filed under: 网络·互联 | Tags: | 6 Comments »

8月25号开始，很多使用blogspot的人们发现自己侧边栏的最新评论显示不了，无论是使用高手写的js代码，还是使用最简单的供稿输出。
8月27号，Blogger Data API 论坛给出了解释，原来显示最新评论的标签由”title”变为”content/summary”，这一变化导致最新评论不能再由blogger提供的”供稿”模块输出，但修改javascript代码后还是可行的。这里有一个代码生成器。
众所周知，对于没有标题的文章，blogger会默认以文章的一些摘要生成一个标题，而评论也是没有标题的，所以这次blogger对rss feed格式的变动，也会造成不能再用”供稿”模块输出最新文章，当然，只指那些没有标题的文章。具体的例子可见blogger的已知问题博客，里面的文章都是没有标题的。所以如果在供稿网址里填写这个博客的feed:http://knownissues.blogspot.com/feeds/posts/default，出来的结果就像下面的图一样，只有作者名字和文章发表日期，内容全空了。

所以说，目前的”供稿”模块，成了没用的装饰。可笑的是，当许多blogger在论坛里提出这个问题时，blogger的工作人员推脱说it’s not their problem，不是他们的problem，是谁的呢?”供稿”这个功能可是blogger后台提供的呵!(参考)

在blogger中如何实现trackback

Posted: September 2nd, 2007 | Filed under: 网络·互联 | Tags: | 9 Comments »

我一直把trackback和backlink(反向链接)混为一谈。很早以前GG派写过一篇”为什么说backlink要比trackback好“的文章，那时没有太深的感受。现在回过头来看，backlink确实有简单、有效的特点，但也如iwfwcf的留言所说，trackback的互动性更强。即使现在的google blogsearch收录速度非常快，但要知道哪些人trackback了自己的文章，还是要去主动的订阅link:blogname.blogspot.com的搜索结果。
blogger没有trackback的功能，但无所不能的hackers什么不能解决? haloscan就是这样一个可以在任何网站上实现trackback的工具。
在blogger上使用haloscan的方法:
1.去haloscan注册一个帐号；
2.登录到member->install页面，选择blogger old version(如果选新版就是自动安装，需要帐号及密码，而且如果自定义了模板还需要上传模板，个人觉得麻烦，所以不建议选择)
3.接着你会看到安装代码的步骤，还是比较简单的
(1)先说在旧版blogger中的安装
a.把下面的代码放在<head>与</head>之间，注意将xxxxxx改成自己的帐号
<script type=”text/javascript” src=http://www.haloscan.com/load/xxxxxx> </script>
b. 将下列代码放在评论链接的位置，这个位置可视个人喜好而定，但注意要在<Blogger>和</Blogger>之间
<a href=”javascript:HaloScan(’<$BlogItemNumber$>’);” target=”_self”><script type=”text/javascript”>postCount(’<$BlogItemNumber$>’); </script></a> | <a href=”javascript:HaloScanTB(’<$BlogItemNumber$>’);” target=”_self”><script type=”text/javascript”>postCountTB(’<$BlogItemNumber$>’); </script></a>
有一点要注意，haloscan不仅提供trackback的功能还提供评论的功能，以上这段代码的前半部分(红色部分)是评论功能，个人推荐不要使用，以防与blogger自带的评论系统突。
以我的测试博客为例，找到 <p class=”post-footer”>………<a class=”comment-link” href=”<$BlogItemCommentCreate$>”<$BlogItemCommentFormOnclick$>><span style=”text-transform:lowercase”><$I18NNumComments$></span></a>这一段，在其后面加上| <a href=”javascript:HaloScanTB(’<$BlogItemNumber$>’);” target=”_self”><script type=”text/javascript”>postCountTB(’<$BlogItemNumber$>’); </script></a>，就出现了博客中的效果。
(2)在新版blogger中的安装(参考Jas 9 Taipei)
a.勾选扩展窗口小部件模板
b.将下列代码放在评论链接的位置，同样视个人喜好和版面而定，例如找到
<span class=’post-comment-link’ >
<b:if cond=’data:blog.pageType != “item” ‘>
<b:if cond=’data:post.allowComments’>
这一段，再往下到<!– quickedit pencil –>，在<!– quickedit pencil –>之前加入
<script src=’http://www.haloscan.com/load/xxxxxx’ type=’text/javascript’> </script>
<a expr:href=’”javascript:HaloScanTB(” + “”" + data:post.id + “”" + “);”‘ target=’_self’>
<script type=’text/javascript’>postCountTB(’<data:post.id/>’);</script></a>
保存即可。
最后说说trackback的用法。在装完haloscan的博客上点击trackback，就会出现一个地址，这个地址就是这篇文章的trackback地址，引用别人文章时贴上这个地址就行了。
在haloscan的控制面板上，可以方便的管理trackback，更改设置等，更多功能等着大家去探索。
不过，话说回头，对于没有trackback的blogger，还是如我上面所说的，订阅link:blogname.blogspot.com的结果更方便:p


Technorati : , ,

四种向blogger发布文章的方法之大PK

Posted: August 31st, 2007 | Filed under: 网络·互联 | Tags: | 6 Comments »

这里讨论的方法并不包括用blogger后台发布。
1.通过Gmail发布
这个选项可以很容易的在设置->电子邮件一栏中找到。同样这是一个多人共同博客并只允许一名管理员存在的好方法。不过缺点有:
一、不支持标签；
二、不支持插入图片(虽然对于邮件领域来说，图片可以放到附件中，然而写博客可就不好解决了);
三、块引用的格式有问题，这是因为gmail中的块引用是有格式的，即左边一小竖线，如果blog的css中定义了blockquote，那么两种形式会叠加，效果不好。
2.通过Google Docs发布
在发布页面上设置blog的时候，出现如下界面:

刚开始激动了好一阵，因为如图所说，Google Docs支持标题和标签显示，然而结果是不行。
或许我将include the document title when posting的意思理解错了?但无论怎样，上面明确告知可以将帖子分类-前提是将文档用同样的标签标记起来。可众所周知，Google Docs里从没有出现过label,category之类的字眼。如果勉强把folder当作label呢?结果还是失败。对此我很疑惑，既然这些功能并没有实现，为什么要给出说明呢?
然而用Google Docs发布有一个好处是其他三个无法匹敌的，那就是支持插入图片，而且图片可以准确无误的显示在博客中。图片储存在Google Docs的服务器上，而使用blogger后台发布图片时，图片是默认上传至自己的picasa空间的，这样一来就有个问题:用Docs贴的图片地址形如 http://blogname.blogspot.com/xxxxxxxxxxx.jpg，很显然，这样无法查看原图片了。
3.用Windows Live Writer发布
常常听到别人夸奖WLW，但我的体会是WLW不如下面提到的Zoundry.
首先安装很麻烦，必须先安装.NET。好不容易装完了吧，打开界面一看，是挺华丽的，可感觉华而不实:
其一、添加帐号麻烦，和Zoundry的方便形成鲜明对比。比如我有五个blogger，添加时必须逐一的重复填用户名、密码的步骤；
其二、无法插入图片，当然这个不是它的错，因为我不知道如何配置媒体库，即blogger上传图片的ftp地址；
其三、不支持标签，这个我不是很肯定，至少我没发现，因为匆匆装完之后我又匆匆将它卸了；其四、无法发布!!这是我匆匆将它卸载的原因，配置都很正确，网络也很通畅，就是无法发布…
4.用Zoundry发布
目前为止，用Zoundry发布是最好的方法，因此也放在最后写。
好处有:
一、配置账户方便快速，只需填一次帐号密码，我所管理的所有博客名单全部出现；
二、支持标签，这个是我没有想到的，也是Zoundry最赞的地方；
三、发布很快速，这个是作为离线发布软件最重要也最基本的功能；
当然缺点也有:
一、无法发布图片，同样因为不知怎样配置媒体库；
二、界面略显粗糙，尤其是工具栏按钮的设计，当然界面和功能相比，自然后者重要，否则也不会弃WLW而投奔Zoundry了。
综上所述，目前Zoundry处于明显优势地位，当然，我更希望的是Google Docs能不断改进，实现承诺的那些东西，期盼一个更整合的Google的到来!

调用google video player播放mp3

Posted: July 19th, 2007 | Filed under: 网络·互联 | Tags: , | No Comments »

最近常看到有人用google player播放歌曲，身为一个伪Gfan，我当然也要尝试一下，尽管之前对dewplayer很是欣赏的说。
在网上搜了一下，目前发现以下几种方法:
1.点击这个网址，输入歌曲URL，可以立即生成代码，很简单。可惜的是，我在blogger上测试时发现插入这段代码无法播放。
不过我们可以分析一下代码:


可以看出这段代码直接调用google video上的swf文件，外加一大堆罗嗦的参数设置，个人认为没什么用途。
2.插入以下代码:

注意将里面的musicname.mp3替换成想播放的mp3名，参数可自行修改。
这种方法是调用gmail上的swf文件，因为早前gmail附件已支持mp3播放。可惜经测试，这第二种代码也无法在blogger上使用。
3.既然无法调用，那就下载下来自己使用吧。我已经把这个swf文件上传到google code中，因此可以用以下代码:

这一次终于成功。。。
欣赏一下王菲的《不留》:p

将google小工具添加到你的博客里

Posted: May 12th, 2007 | Filed under: 网络·互联 | Tags: , | 1 Comment »

原来一直以为google小工具只能添加在igoogle中，没想到也提供代码。无意中来到这个页面，看到众多熟悉的面孔，甚至有基于ajax的搜索、mp3播放器、google calendar、IP地址显示等等。这下众多的入门blogger可省事了，甚至免去了自己添加代码的繁琐。真可谓一键在手，高枕无忧。只要点一下”添加到网页”，再自定义一下，就OK了~~不过有利必有弊，这些插件的下方均会显示add to google，还有丑丑的边框，我个人觉着有碍观瞻。不过怎么我以前没有发现这个地方呢?

« Older Entries