alooger

给google搜索加背景

noreply@blogger.com (Awai Li Run Yuan) — Sat, 26 Sep 2009 22:20:26 PDT

最近看到了一个提供firefox插件的网站，不过里面的插件与众不同，全部都是用来给google搜索添加背景的，你甚至可以上传图片，自己设计一个背景。目前只可以在firefox上面用，但是网站讲他们很快就让这些插件也与其它浏览器兼容的。

http://www.webmynd.com/look/designs

google frame

noreply@blogger.com (Awai Li Run Yuan) — Fri, 25 Sep 2009 07:45:12 PDT

Google现在为IE提供了一个加载项，原因是它没有像chrome那样支持HTML5，这就相当于在IE里面放了一个chrome。有了这个加载项，就可以用IE浏览google领头的HTML5网页了。

第一个需要添加这个plug-in的是google wave，如果你要在IE里面看google wave 的话，它就会显示你需要安装google chrome加载项，或者建议你选用google chrome, safri 或firxfox浏览器。

Google声称这样做的原因是IE跟不上网络的变化，没有很好的支持有用到HTML5和Javascripe的网页。对网络开发者而言，这更是一个大麻烦，因为他们不得不专门为落后的IE编写一些额外的代码。

看来google真的要大力推广HTML5的普及了，借此制定行业标准，为明年推出的chrome os做准备，以此挑战Microsoft的老大地位。

不过，大部分网络用户也是就上网聊聊天，看看电影，IE6到现在还都是全世界使用最多的浏览器，就足以说明广大的网民们基本用不着google所一向倡导的那些高级工能。推广新一代网络标准的工作还是任重而道远的。所以，起码在未来的几年里，google切不可轻言放弃对IE的支持，如果开发的网页都不支持IE的话，可就白白丢掉了大量用户。

Google 新推出 sidewiki

noreply@blogger.com (Awai Li Run Yuan) — Thu, 24 Sep 2009 05:32:09 PDT

Google最近在toolbar上面又加入了一个名为sidewiki服务，可以让你网页添加评论，并查看别人说了些什么。同时，sidewiki里面还有相关网页功能，帮你找到其它可能有用的信息。不过对我来说，这只是重新显示一遍google的搜索内容罢了。

由于这个功能是添加在toolbar里面的，所以目前还只有IE和firefox的用户才能用到，像我这样用的chrome的人们恐怕还要等等咯。

有兴趣的可以到这里下载。貌似只有繁体中文，大家将就一下啦。

Facebook推出新版

noreply@blogger.com (Awai Li Run Yuan) — Wed, 12 Aug 2009 18:18:46 PDT

Facebook最近在印度率先改版，推出了Facebook lite。特点就是两个字：简洁！其实我也是蛮讨厌Facebook原来的界面的，因为我想看的只是朋友们发表的文章和上传的照片而已，但里面有太多的quiz和game都不停地把信息放上来，实在让人很烦。不过，Facebook新版现在还只是在印度才能看到，具体的发布日期还不太清楚。

Facebook现在的样子。

新版的样子，photo credit: Azhar Chougle

搞笑google图片

noreply@blogger.com (Awai Li Run Yuan) — Tue, 11 Aug 2009 07:43:44 PDT

这个大家try一下吧，是春哥在国外的兄弟哦。

百度跃升为全球第二大搜索引擎

noreply@blogger.com (Awai Li Run Yuan) — Tue, 11 Aug 2009 07:11:48 PDT

comScore 近日公布调查报告显示，百度以6.9%的市场份额超过Yahoo，跃升为全球第二大搜索引擎。当然，这主要归功于中国快速增长的网民人数。

在中国，世界一流的网络公司好像没有一个能做成功的，msn, Yahoo, AOL, eBay，Facebook全都败给了本土企业，Google做了这样久，也没见什么起色，相信在可预见的未来也不会有什么大的发展。有人说这是外国公司本地化程度不够，有人说这是中国潜规则的结果，但归根结底，还是人家对咱不够重视，中国网民的钱，他们现在还不急着赚。

微软的msn，bing和hotmail，在美国都不是主流，当然没闲心进军中国了。雅虎中国早就卖给了阿里巴巴，所以无论业绩如何，雅虎总部都不会过问。前几天中国政府封锁谷歌中国的部分功能，google. com从头到尾都没有管过这件事。现在，像google这样的公司的主要精力还是在美国，至于在中国能不能赚钱，这些公司还不是很在意。互连网能发展的潜力仍然很大，在美国市场还没有饱和前，他们是不会下太大资本进军其它国家的。

对中国企业来说，这既是好事也是坏事。从好的角度来说，本土公司现在竞争较小，可以充分的开拓市场，积累资本。但坏的地方是，中国网络公司却没有利用这种得天独厚的环境，真正把精力放在技术开发，实现长远发展上，而是一心一意地在赚钱。典型中的典型就是校内网，越改版，越像Facebook，但放的广告却比Facebook多的多。同样是添加广告，google，youtube会做到不影响用户体验，而在中国，百度会为赚钱而修改搜索结果，很多视频网站不看完广告就不能看视频。

赚钱不是错，但一个企业要有自己的灵魂和志向。现在，twitter正努力成为一个世界新闻中心，chrome正努力推动互连网的更新换代。很难想象，当它们成功之后，开始把注意力投向中国，到那时，中国的公司还能怎样应对。

firefox的搞笑图片

noreply@blogger.com (Awai Li Run Yuan) — Sat, 08 Aug 2009 17:48:11 PDT

google chrome推出新beta版

noreply@blogger.com (Awai Li Run Yuan) — Wed, 05 Aug 2009 18:46:05 PDT

今早google chrome推出了新的beta版（点这里下载），一共有五大特点：

更自由地管理你的标签页。在旧版里，所有标签是不受你控制的，而现在你可以自由地添加、删除和移动你的标签。

更新更强的搜索栏。这次google在搜索栏的下拉菜单里加入了不同的图标，分别代表联想词搜索，书签搜索，历史搜索和网站搜索。

首次亮相的chrome主题。去我上一篇帖子看看！
兼容HTML5。google开始为chrome加入HTML5的特性，包括视频标签和网上工作，相信不久我们就可以体验到这些新功能了。
速度更快。chrome优化了JS环境，现在，当你遇到一个很大的网页的时候，chrome可以分批载入这个网页，先是文字和图片，这样等待的时间可以大大缩短。

Gmail为上网本设计新标签

noreply@blogger.com (Awai Li Run Yuan) — Wed, 05 Aug 2009 17:50:15 PDT

上网本的一大特点就是屏幕小，Gmail的标签往往就占了很大的空间，所以常把信件的题目挤到一边去。Gmail Labs今天就推出了一个新功能，可以自动缩小你Gmail的标签。

为谷歌浏览器添加主题

noreply@blogger.com (Awai Li Run Yuan) — Wed, 05 Aug 2009 18:47:01 PDT

今早谷歌浏览器chrome终于可以开始添加主题了，不过前提是你安装的是chrome 3.0 beta版。去chrome 主题看看！

安装时只要点Apply Theme就可以了。另外提供两个没有出现在安装列表，却很漂亮的chrome主题camo和snowflaks，只要点击这两个链接就能应用了。

同时，chrome这次还可以让你设计自己的主题（Chromium Developer Documetation），但界面只有英文版，有时间我会翻译出来的。

还要注意的是，chrome主题没有一个像firefox那样的主题管理器，如果你想卸载一个主题的话，在地址栏里输入chrome://extensions/，然后点uninstall就好了。

谷歌带你搜索旧新闻

noreply@blogger.com (Awai Li Run Yuan) — Tue, 04 Aug 2009 09:14:35 PDT

去年谷歌新闻发起了一个新项目，要把旧报纸数字化，然后通通放到网上。到现在为止，谷歌宣布其网站内新闻信息的容量已提高了有四倍之多。在Google News Archive里面，我们不仅可以搜索旧新闻，还可以用时间轴的形式呈现出来。

例如从这张图中可以看出，“非典”一词在2003年4到5月的新闻里出现得最多，而今年5月又有一次小高峰，也许是因为H1N1的缘故吧。

Neo blogger模板

noreply@blogger.com (Awai Li Run Yuan) — Thu, 28 May 2009 06:33:51 PDT

特别感谢阿倫校長，他可以说是台湾Neo第一人，现在我们很多的Neo知识都是从他开始的。下面一些有Neo功能的blogger模板，可以装来试试。

先是阿倫校長亲手做的
iNeoogle（英文）
neokubrick（中文）
neoTrueColurs（英文）
neogadget（中文）

Hackosphere（英文）Ramani，也就是Neo鼻祖的提供的模板
Rounder with Neo（英文）
Neo wears denim（英文）
Neo colors（英文）
EboNeo（英文）

如何给现有blogger添加neo模板

如果给blogger添加标签云。

noreply@blogger.com (Awai Li Run Yuan) — Mon, 25 May 2009 21:21:51 PDT

这篇文章将教你如果给你的blogger添加标签云。

去到布局—>修改HTML，然后选择下载完整模板来做备份。但是不要勾选扩展窗口小部件模板。

找到 ]]></b:skin>，在它之前粘贴下面的代码，

/* Label Cloud Styles ----------------------------------------------- */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none!important;padding:0 5px;margin:0;vertical-align:baseline!important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:"" !important}

再找到 ]]></b:skin>，在它后面粘贴下面的代码，

<script type='text/javascript'> // Label Cloud User Variables var cloudMin = 1; var maxFontSize = 20; var maxColor = [0,0,255]; var minFontSize = 10; var minColor = [0,0,0]; var lcShowCount = false; </script>

找到<b:widget id='Label1' locked='false' title='Labels' type='Label'/> , 如果你的模板有一些不同没关系，把这整行代码删掉，然后粘贴下面的代码，

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='labelCloud'/> <script type='text/javascript'> // Don't change anything past this point ----------------- // Cloud function s() ripped from del.icio.us function s(a,b,i,x){ if(a>b){ var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m) } else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a) } return v } var c=[]; var labelCount = new Array(); var ts = new Object; <b:loop values='data:labels' var='label'> var theName = "<data:label.name/>"; ts[theName] = <data:label.count/>; </b:loop> for (t in ts){ if (!labelCount[ts[t]]){ labelCount[ts[t]] = new Array(ts[t]) } } var ta=cloudMin-1; tz = labelCount.length - cloudMin; lc2 = document.getElementById('labelCloud'); ul = document.createElement('ul'); ul.className = 'label-cloud'; for(var t in ts){ if(ts[t] < cloudMin){ continue; } for (var i=0;3 > i;i++) { c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz) } var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz); li = document.createElement('li'); li.style.fontSize = fs+'px'; li.style.lineHeight = '1'; a = document.createElement('a'); a.title = ts[t]+' Posts in '+t; a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')'; a.href = '/search/label/'+encodeURIComponent(t); if (lcShowCount){ span = document.createElement('span'); span.innerHTML = '('+ts[t]+') '; span.className = 'label-count'; a.appendChild(document.createTextNode(t)); li.appendChild(a); li.appendChild(span); } else { a.appendChild(document.createTextNode(t)); li.appendChild(a); } ul.appendChild(li); abnk = document.createTextNode(' '); ul.appendChild(abnk); } lc2.appendChild(ul); </script> <noscript> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> </noscript> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

保存，大功告成！

注意，如果你已经用了Neo模板在你blogger里面的话，请不要用这里的教程，我会再写一篇文章专门讲解如何为有Neo的blogger添加标签云。

下面教你如何更改里面的参数。

var cloudMin= 1;，
这是标签云里一共要显示多少个标签，1代表显示所有标签。
var maxFontSize = 20;，最多文章数的标签的字体大小。
var maxColor = [0,0,255];，最多文章数的标签的字体颜色。
var minFontSize = 10;，最少文章数的标签的字体大小。
var minColor = [0,0,0];，最少文章数的标签的字体颜色。
var lcShowCount = false;，false代表不在每个标签后不显示里面的文章数，把它换成true就可以在每个标签后显示里面的文章数。
注意字体的颜色都是GRB格式的。

#labelCloud {text-align:center;font-family:arial,sans-serif;}，center代表标签云中间对齐，换成right代表右对齐，换成left代表左对齐，换成justify代表不对齐。

display:inline;，inline代表所有标签排成一条直线，换成block就变回了普通样子。

特别感谢phydeaux3

如何制作一个有动画效果的标签云

noreply@blogger.com (Awai Li Run Yuan) — Sat, 23 May 2009 18:11:54 PDT

这篇文章教你如何制作一个有动画效果的标签云，如下图。

首先，这一功能只对英文的标签有用，如果你的博客标签都是中文的，那就不用再继续读下去了。

去到布局—>修改HTML，找到下面的代码

<b:section class='sidebar' id='sidebar' preferred='yes'>
然后把下面代码粘贴在它后面，

<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'><center> <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> | Distributed by <a href='http://blogger-templates-designs.blogspot.com/'>Blogger Templates Designs</a></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240",  "300", "7",  "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/></center> </div> </b:includable> </b:widget>
so.addVariable("tcolor", "0x333333");是字体颜色，
so.addVariable("tspeed", "100");是转动速度，
<a expr:href='data:label.url'style='12'>是字体大小。
保存，大功告成！

特别感谢How to Add flash Animated label cloud Blogumus for Blogger @ Blogger Templates Designs和
在blogger 加入一個會轉動的標籤雲(animated label cloud) @ Fun New Run High

如何给blogger添加neo模板

noreply@blogger.com (Awai Li Run Yuan) — Tue, 04 Aug 2009 18:20:18 PDT

Neo技术是一名印度工程师设计出来的，他叫Ramani，现在在美国工作。Neo放在博客里面只有一个特点，就是快！你可以点我博客右边的文章列表，试试这一功能有多么酷。这里有一个演示网站，http://neokubrick.blogspot.com/，把自己的blogger网址输进去，然后点击后面按钮。

首先，Neo技术是通过抓取rss实现的，所以你的blogger必须有rss可用，也就是说你blogger一定要是公开对所有人的，私密blogger将无法使用Neo功能。

去到布局—>修改HTML，然后下载完整模板做备份，否则你可能把自己的博客弄得一塌糊涂，我第一次就是这样的。同时，不要勾选扩展窗口小部件模板，这样会更方便些。

main-wrapper要放在最后，所以找到下面两个代码，然后把它们倒换位置。

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> ——你的模板这里会有其它内容—— </b:section> </div>
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> ——你的模板这里会有其它内容—— </b:section> </div>
最后，你的content-wrapper部分应该是下面的样子，

<div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> ——你的模板这里会有其它内容—— </b:section> </div> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> ——你的模板这里会有其它内容—— </b:section> </div> </div>

如果你的博客的小工具栏原本在右边，而现在跑到了左边的话，找到下面的代码，然后把红色部分加进去，

#sidebar-wrapper { float: right; ——你的模板这里会有其它内容—— word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #main-wrapper { float: left; ——你的模板这里会有其它内容—— word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

找到<head>，然后在后面添加下面的代码，

<script charset='big5' language='javascript' src='http://nautica716.googlepages.com/neochinese.js'/> <script language="javascript"> var numPosts = 10; </script>

删掉博客原有的标签，再找到下面代码，

<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'>
然后在它后面添加下面的代码，

<b:widget id='HTML1'locked='false' title='Posts' type='HTML'> <b:includable id='main'> <div id='LabelDisplay'> <div id='LabelTitle'> </div> <div class='widget-content' id='LabelPosts'> <script language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', '');</script> </div> </div> </b:includable> </b:widget> <b:widget id='Label1‘ ' locked='false' title='Labels' type='Label'> <b:includable id='main'> <div id='LabelList'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='"javascript:fetchLatestPosts(\"" + data:blog.homepageUrl + "\",\"" + data:label.name + "\");"'><data:label.name/></a>&nbsp;(<data:label.count/>) </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </div> </b:includable> </b:widget>

找到<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>（你的博客可能显示的有所不同），然后把它全部替换成下面的代码，

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> <b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <span class='quick-edit-icon'> </span> </a> </span> </b:if> </b:includable> <b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h4> <dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> <p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </p> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </b:includable> <b:includable id='main' var='top'>  <div class='blog-posts'> <b:loop values='data:posts' var='post'> <b:include data='top' name='status-message'/> <b:include data='post' name='post'/> <script language='javascript'> var blogAuthor = '<data:post.author/>'; fetchComments('<data:post.id/>'); </script> </b:loop> </div> <b:if cond='data:blog.pageType != "archive"'> <div class='comments' id='comments'> <center><h2>No comments yet</h2></center> </div> </b:if> </b:includable> <b:includable id='backlinkDeleteIcon' var='backlink'> <span expr:class='"item-control " + data:backlink.adminClass'> <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable> <b:includable id='feedLinksBody' var='links'> <div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> </b:includable> <b:includable id='backlinks' var='post'> <a name='links'/><h4><data:post.backlinksLabel/></h4> <b:if cond='data:post.numBacklinks != 0'> <dl class='comments-block' id='comments-block'> <b:loop values='data:post.backlinks' var='backlink'> <div class='collapsed-backlink backlink-control'> <dt class='comment-title'> <span class='backlink-toggle-zippy'> </span> <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a> <b:include data='backlink' name='backlinkDeleteIcon'/> </dt> <dd class='comment-body collapseable'> <data:backlink.snippet/> </dd> <dd class='comment-footer collapseable'> <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span> <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span> </dd> </div> </b:loop> </dl> </b:if> <p class='comment-footer'> <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a> </p> </b:includable> <b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'><data:navMessage/></div> </div> </div> </div> <div style='clear: both;'/> </b:if> </b:includable> <b:includable id='feedLinks'> <b:if cond='data:blog.pageType != "item"'>  <b:if cond='data:feedLinks'> <div class='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if> <b:else/>  <div class='post-feeds'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.feedLinks'> <b:include data='post.feedLinks' name='feedLinksBody'/> </b:if> </b:if> </b:loop> </div> </b:if> </b:includable> <b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if> </div> <div class='clear'/> </b:includable> <b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control " + data:comment.adminClass'> <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable> <b:includable id='post' var='post'> <div class='post' id='post'> <a expr:name='data:post.id'/> <h2 class='date-header' id='PostDate'> <data:post.dateHeader/> </h2> <h3 class='post-title' id='PostTitle'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3><br/> <div class='post-header-line-1'/> <style>#fullpost {display:none;}</style> <div class='post-body' id='PostContent'> <p><data:post.body/></p> <div style='clear: both;'/>  </div> <span id='showlink' style='display:none'> <p><a href='javascript:showFullNeo();'>Read More...</a></p> </span> <span id='hidelink' style='display:none'> <p><a href='javascript:hideFullNeo();'>Collapse...</a></p> </span> <script type='text/javascript'> checkFullNeo(); </script> <div class='post-footer'> <p class='post-footer-line post-footer-line-1'> <span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass' id='PostEditLink'> <a expr:href='data:post.editUrl' title='Edit Post'> <span class='quick-edit-icon'> </span> </a> </span> </b:if> </p> <h3 class='post-comment-link' id='PostCommentLink'> <a expr:href='data:post.addCommentUrl' target='_blank'>Post a Comment</a> </h3> <span class='post-icons'>  <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> <span class='email-post-icon'> </span> </a> </span> </b:if> </span> </div> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </b:includable>
保存。

去到设置—>评论—>评论表单放置，然后选择整页，否则你的博客里不会显示评论对话框，这是我在用Neo功能时发现的它的一点不足之处。

保存，大功告成！不过注意，Neo技术只对博客里第一篇文章有用，所以你可以去设置—>格式设置，然后选择1个帖子（在主页上）。

一些现成的Neo模板

感谢Ramani，他的博客是Hackosphere，还有阿倫校長,是他的文章教会会我怎样在blogger里加入这一功能，他的网站是在您的範本裡安裝Neo。我有更改一部分，让整个教程更容易些。

如何给标题栏加入小工具

noreply@blogger.com (Awai Li Run Yuan) — Wed, 20 May 2009 03:22:33 PDT

之前我有讲过标题栏的重要性，它包括图片，文字和链接功能。

第一张图片是blogger原本的标题栏，第二张是改版后的标题栏，你可以看到里面有搜索工具和主页链接等。下面我就教你如何给标题栏添加小工具。

去到布局—>修改HTML，然后下载完整模板做备份。

勾选扩展窗口小部件模板

找到下面代码，并全选，
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='你的博客名称' type='Header'/> </b:section> </div>
然后用下面的代码把它完全替换，

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='你的博客名称' type='Header'/> </b:section> <div id='header-right'> <b:section class='header' id='header-right-top' showaddelement='yes'> </b:section> </div> <div id='header-right-bottom'> <b:section class='header' id='header-right-bottom-section' showaddelement='yes'> </b:section> </div> </div>

找到下面的代码，

#header-wrapper { border: 1px solid #000000; margin:0 auto 10px; border:1px solid $bordercolor; clear: both; word-wrap: break-word; overflow: hidden; } #header-inner { background-position: center; margin-left: auto; margin-right: auto; } #header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; }
也许你的模板中的代码会有不同，但不管怎样，找到#header-wrapper，#header-inner和#header三个部分（有的模板可能也没有#header-inner这个部分，不过不要紧），并用下面代码替换，

#header-wrapper { width: 950px; border: 1px solid #000000; margin:0 auto 10px; border:1px solid $bordercolor; clear: both; word-wrap: break-word; overflow: hidden; } #header-inner { background-position: center; margin-left: auto; margin-right: auto; } #header { width: 500px; float: left; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header-right { width: 400px; float: right; border: 1px solid $bordercolor; color: $pagetitlecolor; margin: 5px; } #header-right-top { padding: 0 5px 10px; } #header-right-bottom-section { padding: 0 5px 10px; } #header-right ul { margin: 0; padding: 5px; } #header-right ul li { display: inline; padding: 5px; } #header-right-bottom { width: 400px; float: right; border: 1px solid $bordercolor; color: $pagetitlecolor; margin: 5px; } #header-right-bottom ul { margin: 0; padding: 5px; } #header-right-bottom ul li { display: inline; padding: 5px; }
红色部分是标题栏的边框的颜色和样式，你可以改成自己喜欢的样子，如果你不想要边框的话可以把它们完全删掉。

保存，然后去到布局—>页面元素，这时你能看到原来标题栏变成了三个，而且可以在里面添加小工具了。由于浏览器的问题，新的标题栏的元素可能并没有对齐（如下图），但是不要紧，这不会影响你的博客。
如果你想给你的博客添加一个logo的话，把logo图片上传到你的服务器上（如google site），然后点击添加小工具—>HTML/JavaScript，粘贴下面的代码，

<img src="你的logo图片的地址" />

大功告成！你还可能在里面加上许许多多其它的小工具。

特别感谢blogger buster

标题栏的大用处

noreply@blogger.com (Awai Li Run Yuan) — Mon, 11 May 2009 20:26:19 PDT

博客的大标题永远是读者最先看到的东西，它是不是好看，是不是有用，会直接影响到读者的感受。即使有人碰巧在你的博客里发现了一篇好文章，但如果你的标题栏没有另他产生印象，他可能下次也不会再来了，没有回头客的网站流量肯定大不了。

下面是我喜欢的一些博客，看看其中都有些什么东西会令你注意到。

blogger buster

widgets for free

zenplate

博客的标题栏可以说就包括三部分，图片，文字和链接。图片像博客作者自己的标志，标题栏的背景或颜色。文字是博客的名字和简介。还可以看到，这三个博客上都有一排按钮可以链接到不同地方，甚至还有其它的链接功能像搜索引擎，rss，翻译和广告。

如果有人到了你的博客，他首先会体验到的是你的博客是不是与众不同，吸引眼球？然后他会想知道你的博客叫什么名字，里面都写的是什么。最后，他要想办法找到自己感兴趣的文章。

像blogger buster一样，你可以给自己的博客设计一个logo。许多博客网站都提供一些模板，但数量有限，而且可能和你的博客风格不符。所以，用photoshop这样的软件自己动手做一个logo绝对是打破平庸之作。

同时，博客的名字一定要既好玩又能概括博客的内容。新读者对你写的文章的第一印象全靠它了。

最后，如果你有能力的话，给标题栏加上些链接功能，让你的博客看起来就像一个真正的网站一样。

许多网站像blogger和wordpress，提供了很大的自由让人去改版自己的博客。也有许多地方提供不少现成的模板用。通过这些方法，都可以让自己的标题栏大放异彩，做出些你意想不到的好东西来。

给你些素材（英文），

freewebpageheaders

bloggertalk

add label cloud to your blogger

noreply@blogger.com (Awai Li Run Yuan) — Wed, 20 May 2009 03:24:28 PDT

Here is a tutorial teaching your how to add a label cloud to your blogger.

Backup your template first.

Go to EDIT HTML, but dot not expand Widget Templates.

Find ]]></b:skin>, immediately BEFORE that, paste the following code.

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none!important;padding:0 5px;margin:0;vertical-align:baseline!important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count
{padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Find ]]></b:skin>, immediately AFTER that, paste the following code.

<script
type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Find <b:widget id='Label1' locked='false' title='Labels' type='Label'/> , replace it with the following code.

<b:widget id='Label1'
locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName =
&quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels'
var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a
expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include
name='quickedit'/>
</div>
</b:includable>
</b:widget>

Save and enjoy!

Understand the codes.
var cloudMin= 1;
This is to limit the number of labels shown . Set it 1 to show ALL labels.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
Use these to change color and size for your labels. The size is in pixels and the color is in RGB format.

lcShowCount
Set it true to show the post counts.

#labelCloud {text-align:center;font-family:arial,sans-serif;}
You can change the fonts of your label here. And here are 3 arrangement for text-align.
text-align:justify;
text-align:right;
text-align:left;

display:inline;
You can change it to display:block; if you want put your label in a list form.

credit to phydeaux3

Creat a flash animated label cloud for blogger

noreply@blogger.com (Awai Li Run Yuan) — Wed, 20 May 2009 03:24:41 PDT

Make an flash animated label cloud for blogger,
1 Go to Layout>Edit Html, find
<b:section class='sidebar' id='sidebar' preferred='yes'>
2 Paste the following code after that,

<b:widget id='Label99' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<center>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js'
type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy
Tanck</a> and <a href='http://www.bloggerbuster.com'>AmandaFazani</a>
Distributed by <a href='http://blogger-templates-designs.blogspot.com'>Blogger
Templates Designs</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf",
"tagcloud", "360<!--width-->", "300<!--height-->", "7", "#ffffff");
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333<!--font color-->");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "75");
so.addVariable("tagcloud","<tags><b:loop values='data:labels' var='label'><a
expr:href='data:label.url' style='12<!--font size--> '><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</center>
</div>
</b:includable>
</b:widget>

You can choose not to expand the Widget Templates, and better delete your original label widget, it may looks like

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Thank to How to Add flash Animated label cloud Blogumus for Blogger at Blogger Templates Designs and
在blogger 加入一個會轉動的標籤雲(animated label cloud) at Fun New Run High

open/close sidebar

noreply@blogger.com (Awai Li Run Yuan) — Wed, 20 May 2009 03:23:56 PDT

a href="javascript:togglecomments('whoiswho')" title="click to expand">[+/-] 展開/收回
div id="whoiswho" class="commenthidden">