Blogger beta:把模板修改为三栏
这儿我们需要自定义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即可,大约在代码的最后,你可以看到类似的代码,并添加红色标记的部分。
<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'> <b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/> </b:section> </div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
下面是鱼做完后的效果:
Blogger beta:Tab栏的添加及自定义
Step0:保存模板。下载解压由Exploding Boy制作的免费的Tab图片(国外访问较慢,鱼上传到了Googlepages),一共有十几组,可以到这个地址预览一下效果。这一系列图片中,其中你用到的只有两张,选择出你喜欢的类型,找到对应的二张图片上传到Googlepages,得到地址。
Step1:添加一个标签Widget。最好将标签按“By frequency”来排序,因为此Hack可以控制标签的显示个数,默认显示最多前5个标签,可自行修改。
Step2:找到并修改下列代码以让Header部分可以添加Widget。
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
修改之后是这样的:<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">
修改之后保存就会发现,现在已经可以把将才建的Label widget拖到标题下面了
Step3:选择一个你喜欢的Tab,并从本Blog最后的附录中找到相应的代码。将代码中的两张图片地址更改为你已上传好的图片地址。例如鱼用的是“TabI”,下面是TabI的代码:
/*- Menu Tabs I--------------------------- */
#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://sunrrr.googlepages.com/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://sunrrr.googlepages.com/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
将代码放在如下图所示的地方(点击看大图):
Step4:在模板中找到下图所示的代码部分:
并替换成下列代码:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<div id='tabsI'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home
</span></a></li>
<li><a href='自定义地址'><span>名称(暂时只能为英文)
</span></a></li>
<script type='text/javascript'>
var labelnum = 0;
<b:loop values='data:labels' var='label'>
if (labelnum++ < 5) {
document.write("<li><a expr:href='data:label.url +
"?max-results=100"'><span><data:label.name/></span></a></li>");
}
</b:loop>
</script>
</ul>
</div>
</b:includable>
</b:widget>
一些要注意的地方已经用红色标出,默认只显示5个使用频率最高的标签。
附录,相应Tab的CSS:
/*- Menu Tabs A --------------------------- */
#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
/*- Menu Tabs B--------------------------- */
#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}
/*- Menu Tabs C--------------------------- */
#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}
/*- Menu Tabs D--------------------------- */
#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftD.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightD.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}
/*- Menu Tabs E--------------------------- */
#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
/*- Menu Tabs F--------------------------- */
#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
/*- Menu Tabs G--------------------------- */
#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftG.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}
/*- Menu Tabs H--------------------------- */
#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
/*- Menu Tabs I--------------------------- */
#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
/*- Menu Tabs J--------------------------- */
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
/*- Menu Tabs K--------------------------- */
#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}
Blogger beta:让某一项只在首页(非首页)显示
以前在blogger中我们是通过一些特别的标记来控制一些内容在首页、存档页……的显示,在Blogger beta中,我们可以通过If判断是否为首页来控制内容的显示与否。只要添加两句代码。当让内容不在首页显示时,只需将等于(==)改为不等于(!=)即可。
1.紧跟Includable之后添加: <b:includable id='main'>
要添加的语句:<b:if cond='data:blog.url == data:blog.homepageUrl'>
2.在Includable结束之前添加: </b:includable>
要添加的语句: </b:if>
下面是一个只在首页显示Feed的示例:
<b:widget id='Feed1' locked='false' title='Latest Posts' type='Feed'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h2><data:title/></h2>
<div class='widget-content'>
<ul id='feedItemListDisplay'>
<b:loop values='data:feedData.items' var='i'>
<li>
<span class='item-title'>
<a expr:href='data:i.alternate.href'>
<data:i.title/>
</a>
</span>
<b:if cond='data:showItemDate'>
<b:if cond='data:i.str_published != ""'>
<span class='item-date'>
- <data:i.str_published/>
</span>
</b:if>
</b:if>
<b:if cond='data:showItemAuthor'>
<b:if cond='data:i.author != ""'>
<span class='item-author'>
- <data:i.author/>
</span>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
</b:widget>
Blogger beta:在侧边栏展开/收缩栏目
效果如本Blog右侧的友情链接,在首页不长的情况下,尤其是收缩了Blog贴子,太长的Sidebar会影响页面美观。
Step0:保存你的模板
Step1:将下列CSS代码添加到你的CSS中
.commenthidden {display:none}
.commentshown {display:inline}
Step2:把下列代码放在《Head》《/Head》之间,但不要放在CSS中
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
Step3:现在就可以通过“Add a page element”添加一个“HTML/JavaScript”来展示内容了。
要用到以下代码:
<a aiotitle="click to expand" href="javascript:togglecomments('独一无二的ID')">标题</a><br />
<div class="commenthidden" id="独一无二的ID"></div>
如下面是鱼的链接代码:
<a aiotitle="点击展开" href="javascript:togglecomments('myfriendlistss')">展开/收缩...+/-</a><br/><br/>
<div id="myfriendlistss" class="commenthidden">
<a target="_blank" href="http://sunr.blogspot.com/2006/06/blog-post_20.html" title="请留下你的信息">欢迎交换链接</a><br/>
<a target="_blank" href="http://vfly.blogspot.com" title="鱼的另一面">院子里的七颗小星星</a><br/>
</div>
其中涉及到的那个“独一无二的ID”指的是所选的ID不能已存在于模板中,最好想的长一点,不规则一点,如鱼的是“myfriendlistss”
Blogger beta标签的RSS
在Google Data API里已经提供了关于此方面的信息。其输出形式是类似于这样的:
http://beta.blogger.com/feeds/你的BlogID/posts/输出类型/-/标签名
并且可以将标签合并,只要在后面补充标签名即可。例如:
http://beta.blogger.com/feeds/你的BlogID/posts/输出类型/-/标签名1/标签2
其中的输出类型是full或者summary。我们知道Blogger Beta于前几天更新了Feed的地址类型,但似乎标签输出还没有变。
另外,好像并不是所有的人都可用
Blogger beta收缩/展开文章
Step0:备份你的模板:-)
Step1:开始吧,在<head></head>间添加以下代码,以引用脚本文件(其中的脚本文件建议自己保存并传到Google pages上去)
<script type='text/javascript' src='http://sunrrr.googlepages.com/hackosphere.js' />
Step2:在你的模板(确定已选中 Expand Widget Templates)中找到ID为"Post"的includable,会看到下面类似的代码,将红色的地方加到你的代码中.
<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Step3:找到Settings - Formatting,在最后的Post-template添加以下代码
摘要部分
<span id="fullpost">
隐藏部分
</span>
此Hack来自Hans&Ramani两个很有趣的人,Hans将这个叫做"躲猫猫"Post
在接下来的时间里,鱼会继续翻译一些国外的关于Blogger beta Hack的文章,欢迎关注,期待会带给我的朋友们一点帮助.
暂停更新几天
http://bhic.blogspot.com是一个关于Blogger hack的网站,使用Blogger beta的朋友可以经常去转转。
为Google calendar添加中国农历及节日
Google Calendar大约一个星期前就推出中文版了,今天Google中国黑板报 正式写了关于Google calendar的使用。不过默认的界面有点粗糙,字体太大,让浏览器的字号减小一些会感觉好一点。
尽管鱼搞不懂中国的农历(比如闰月),可是朋友的生日还是不能耽误的。Google官方似乎提供了一个中国日历,但是上面却没标中国的节气,鱼搜索到了一个比较实用的中国日历,里面包含阳历节假日,阴历节气,中国传统阴历节日,天干地支纪年,及十二生肖纪年,日常应用应该足够了。只要在公共日历搜索中搜索“阴历”一词,第一个日历就是了。如果你像鱼一样喜欢用Google desktop解决大多数事情,事情会变得更简单,Google已经提供了Calendar的插件。
普及篇——RSS阅读器的使用
我们通常说的Feed包括Rss0.91、Rss 1.0、rss2.0以及Google的Atom,它们都属于XML(可扩展标记语言),所以在很多网站,如果你看到橙色的XML标记说明此网站提供RSS输出。
先来看一下什么是RSS(来自维基百科):
RSS是一种用于网上新闻频道、博客(weblogs)和其他Web内容的数据交换规范,起源于網景通訊公司的推技术(push technology),將訂戶訂閱的內容傳送給他們的通訊協同格式(Protocol)。
为什么使用RSS?
RSS是用来显示用户已选择了的数据。如果没有RSS,用户可能需要每天去登陆某个网站(如雅虎)去浏览已更新的新闻,这可能是一件非常浪费时间的事情。目前已经有很多网站向用户提供了免费的RSS种子(RSS feed)。那么,用户就不必每天登陆到该网站检查更新的新闻,他们只需要下载一个RSS阅读器,然后将他感兴趣的网站提供的新闻RSS种子添加到这个阅读器,在本地电脑上运行阅读器就可以查看到新闻的更新内容。
Atom 是一种基于XML的文档格式以及基于HTTP的协议,它被站点和客户工具等用来聚合网络内容,包括网志和新闻标题等。它借鉴了各种版本RSS的使用经验。一些批评者说它只不过是另一个内容聚合领域的捣蛋鬼。
Atom被许多的聚合工具广泛使用在发布和使用上。值得一提的是, Blogger和Gmail这两个由Google提供的服务正在使用Atom。
关于Rss还有一个有趣的小故事,Rss在当年的网景时代就被开发出来了,但是直到Blog的兴起才流行起来。当时的版本是Rss 0.91,后来为了使它更符合XML标准,有一个组织便开发了RSS 1.0,RSS 0.91和RSS 1.0有较大的区别。开发RSS 1.0的这个组织并没有邀请当初开发RSS的作者参加RSS1.0的开发。那个作者知道这件事之后非常生气,于是又开发了RSS 2.0。声明RSS 1.0跟他的RSS没有任何关系。现在我们通常用的一般是Rss 2.0。后来Google针对RSS的一些缺点,开发了更加符合规范,扩展性更强的Atom。
通常Rss阅读工具有两种,一种是本地的Rss阅读工具,如FeedDemon(推荐)、周博通等;另一种是在线的,如Google reader(推荐)、国内最流行的抓虾等。在线的RSS阅读器通常会有一些延迟,不过鱼却要推荐在线的RSS阅读器,因为……因为鱼用过离线浏览器后觉得还是在线的更好用……嘿嘿,喜欢Google reader。有点奇怪的是,听说最好用的本地RSS阅读器不是专门的软件,而是Firefox上的一个Rss扩展,Saga。
本篇重点介绍Google reader。在使用的第一步,就是得到你想要订阅网站的Feed,通常我们会看到一个大大的橙色的标志。如鱼右下角的那个。很多网站为了方便订阅,加了很多“订阅到”图片,也如右下角的“Add to Google”和“订阅到抓虾”,这样你只要单击一下按钮,就会自动打开相应的RSS浏览器来订阅,鱼最喜欢Google reader和抓虾,所以拒绝提供第三方工具订阅方式。看到Feed地址之后就复制,然后到Google reader中搜索Rss地址,当然,这儿也可以搜索网站的标题,或者直接输入网站的网址,都是一样的。搜索结果是这样的:
此时点击Subscribe按钮即可订阅站点,或者点击旁边的“Add labels”来为网站添加标签。标签是Google的一大特色,添加标签可以很容易的分类网站,有时候你可能订阅了“无数个”网站,这样就不可能将所有更新信息看完,而此时你最喜欢的网站已经淹没在信息之中,此时就可以通过标签只关心自己喜欢的频道。
Blogger用户大多都是Gmail用户,在Google Reader里你可以看到熟悉的“星”标记,看到值得珍藏的可是加上星标,方便以后查找。
右上角的Settings可以让我们对我们已订阅的Feeds,Labels等进行详细的修改
这里要介绍一下它的导入/导出功能,这项功能方便我们在不同的Rss阅读器之间传递Feeds,当你用了新的阅读器,不用再一个个单独订阅。点击Settings里的Import/Export
把种子的OPML文件上传即可将种子全部导入到Google reader中;要导出种子的OPML选择下面的“Export your subscriptions as an OPML file”,这时会打开一个新窗口,这里显示的是OPML文件的内容,将此时的网页“另存为……”,然后你得到的文件就是OPML文件,可以方便的导入到其它的Rss浏览器中,标签等内容仍会保留。
最后介绍是的Google reader中的阅读,默认的Google reader以时间作为内容排序的依据。使用Google reader最方便的一点就是快捷键的使用,只要记住“J”下一条信息“K”是上一条信息就足够了,这对于阅读大量信息的人非常有用。点击正在阅读信息的标题就可打开原始网页。
抓虾是中文中最流行的Rss浏览器,非常简洁实用,中国Web 2.0网站的典范,因为是中文的,所以不作介绍。相信你一看就会用。
本站的全文Rss为:http://feeds.feedburner.com/eool 评论Rss为:http://sunr.blogspot.com/feeds/comments/full欢迎订阅,如果你用抓虾,觉得鱼的文章不错,欢迎“推荐”、“收藏”,以让更多的人看到。
Mp3播放器
(这是个截图)鱼一直很喜欢这个播放器,以前也在Blog中提到过,这次专门介绍一下这个播放器的使用方法,尽管在Blogger beta中暂时不能使用^#^,相信以后会可以的。如果你用的是Wordpress可以去它的官方网站下载相应的插件,这个播放器本来就是为Wordpress设计的。也会省下加代码的麻烦。
首先你可以把播放器的Flash右键另存并放到自己的空间(如Google pages),然后在你想要添加播放器的地方加入下面的代码,修改代码中的Flash文件的地址,当然SoundFile=后面就应该填音乐地址啦。
<object type="application/x-shockwave-flash" data=" http://202.100.82.31/eool/player.swf" id="audioplayer1" height="40" width="290"><param name="FlashVars" value="playerID=1&bg=0xeeeeee&leftbg=0x357dce&
lefticon=0xFFFFFF&rightbg=0xf06a51&
rightbghover=0xaf2910&righticon=0xFFFFFF&
righticonhover=0xffffff&text=0x666666&slider=0x666666&
amp;track=0xFFFFFF&border=0x666666&
loader=0x9FFFB8&soundFile= http://coloor.googlepages.com/--playingmygame.mp3"
>
<param name="quality" value="high">
<param name="menu" value="false"><param name="wmode" value="transparent"></object>
这个播放器我们可以自定义各个模块的颜色,只要在代码中相应的位置修改颜色的十六位值即可,下面是详细说明:
选项 | 对应位置 |
---|---|
bg=0xHHHHHH | Background颜色(十六进制颜色值) |
leftbg=0xHHHHHH | Left background颜色 |
rightbg=0xHHHHHH | Right background颜色 |
rightbghover=0xHHHHHH | 右侧按钮鼠标经过时的颜色 |
lefticon=0xHHHHHH | Left Icon颜色 |
righticon=0xHHHHHH | Right icon颜色 |
righticonhover=0xHHHHHH | 右侧图标鼠标经过时的颜色 |
text=0xHHHHHH | 提示字体颜色 |
slider=0xHHHHHH | 进度条颜色 |
loader=0xHHHHHH | 音乐加载条颜色 |
track=0xHHHHHH | Track颜色 |
border=0xHHHHHH | 边框颜色 |
Blogger beta评论RSS正常了
百度开始收录Blogspot
因为Blogspot以前在中国被封,故百度没收录Blogspot的内容,可是Blogspot被解封几个月了,百度却迟迟不肯收录Blogspot.com上的内容,这对广大Blogger用户来说不能不说是一大损失(谴责百度不收录Blogspot),因为在中国仍然是Baidu占主流,鱼之前的博客,70%的页面浏览量都来自百度,一个网站不被搜索引擎收录或被列入黑名单,是对一个网站致命的伤害。
今天止,Blogspot.com已被百度收录了161000页内容,但对于世界上最大的BSP之一的Blogger来说,收录完整仍需一段时间。
请用Site命令查看网站的收录情况。例如:site:sunr.blogspot.com
轻松让Windows media player显示歌词
上图可以看见,如果歌曲有MV,则会在下面显示出来,并有歌手的写真。
这是MV的播放,会新开一个窗口,速度还可以。
最小化Media player的时候,会在屏幕上方显示一个小窗口来显示歌词。
在官方的功能介绍里看到这么一项功能:音乐指纹识别
独有音频指纹技术通过旋律识别歌曲,歌曲歌词匹配更精确
试了一首没有任何信息的英文歌,似乎没有效果,呵呵。感兴趣的可以多找几首试试,软件下载地址
Foxflashplayer——推荐的Flash播放器
自从下了大师之路后,怎么看Flash就成问题了,Adobe的播放器功能也太简单了,连进度都不能调整,实在太不方便了。记得以前看《电脑爱好者》,其中推荐了一款Flash播放器——Foxflashplayer,下载试用了一下,果然合我心意。比较喜欢默认的皮肤 ^-^
一些介绍:
功能非常强大、好用的Flash播放器.基本上有关播放Flash文件的相关功能都已经具备而且界面精美可更换.是你观看Flash和玩 Flash游戏或学习Flash课件必不可少的软件.而且荣获2004优秀中国共享软件评选奖--年度最佳图形图象奖.是软件实力的最有效证明.
具有以下的功能:
1.强制播放;(不能正常播放Flash时可打开)
2.自动播放;
3.列表编辑;
4.多界面选择;
5.播放控制;
6.视频调节;
7.可编辑快捷键;
8.丰富的FSCommand命令;
9.有对Flash文件的各种提取和转换,解除保护等处理功能;
10.可智能地搜索网络的Flash;
11.整合了IE;
12.抓图;
13.可创建屏幕保护;
14.复读功能;
15.各种网络功能;
16.各种插件小工具;
等等...
主要特点是仍然是非常简单易用,而且功能非常强大.
如果你也恰好需要,不妨试一试。不知道BOX是不是不仅不让中国人注册免费帐号了,也不让上传啦,最近老是传不上东西去。只传上了一个Crack文件,下载地址,用Xdrive却告诉我传一个4M的文件要一个半小时……幸好Foxflashplayer比较容易找到,感兴趣自己找一个好啦,这个破解文件是3.38版本的,不过下载高版本安装程序的也可以使用。
大师之路Photoshop视频教程
最近鱼一直在自学Photoshop,在网上闲逛的时候看到了“大师之路”系列的文字教程,轻松的语言,重点的拿捏十分到位,是鱼迄今见到的最好的PS教程(远比鱼使用的书本教程好),并且是免费的。下面是其大师之路视频教程的下载地址,文件都比较大,一共2.2G左右,不过下载速度很快,建议使用迅雷的批量下载,提取出其中的.swf文件。如果你比较坐得住也可以去网上找大师之路的文字版,才40M左右。
教程源自http://www.99ut.com,请尊重原作者赵鹏先生。 仅用于个人学习,请勿用于商业用途。
#01章节(88分钟)
1 RGB色彩模式
2 灰度色彩模式
3 图像通道
4 CMYK色彩模式
5 色彩模式的选择
6 颜色的选取
7 HSB色彩模式
#02章节(43分钟)
1 图像尺寸
2 点阵格式图像
3 矢量格式图像
4 图像格式的选择
#03章节(66分钟)
1 界面概览
2 新建Photoshop图像
3 Photoshop画笔工具的使用
4 Photoshop笔刷的详细设定
#04章节(101分钟)
1 建立规则选区
2 建立任意选区
3 消除锯齿和羽化
4 选区的存储及载入
5 论选区的不透明度
#05章节(139分钟)
1 图层初识
2 图层的选择
3 图层层次关系
4 图层不透明度
5 图层链接
6 图层对齐
7 合并图层
8 锁定图层
9 使用图层组
10 使用图层复合
11 关于图层面积与可视区域
12 概览Illustrator与GoLive图层
#06章节(90分钟)
1 像素亮度
2 曲线初识
3 曲线与直方图
4 论亮度的合并
5 单独调整通道曲线
6 自动及黑灰白场
7 实战调整数码照片
8 制作网页翻转按钮
#07章节(129分钟)
1 色阶
2 色相/饱和度
3 色彩平衡
4 暗调/高光
5 匹配颜色
6 替换颜色和色彩范围选取
7 自动色阶/自动对比度/自动颜色
8 其他色彩调整
9 将灰度转为彩色
10 使用历史记录画笔
11 使用色彩调整图层
#08章节(等待发布)
#09章节(168分钟)
1 图案和图案画笔的定义
2 仿制图章/图案图章
3 修复画笔/修补/污点修复画笔/颜色替换/红眼移除
4 橡皮擦/背景色橡皮擦/魔术橡皮擦
5 模糊/锐化/涂抹/减淡/加深/海绵
6 渐变/油漆桶
7 自定义渐变
8 仿色的概念
9 裁切
10 注释/语音注释/吸管/颜色取样器/度量/抓手/缩放
11 制作适用于连续平铺的图案
#10章节(107分钟)
1 使用文字工具
2 使用字符调板
3 区域文字排版
4 路径文字排版
5 使用OpenType字体
6 概览Illustrator文字功能
#11章节(等待发布)
#12 (223分钟)掌握路径的绘制和修改,并利用路径的矢量特性制作作品。
01 路径初识
02 锚点
03 锚点方向线
04 曲线形态
05 绘制曲线
06 路径的其他操作
07 规划锚点
08 应用路径
09 实战路径运算
10 实战矢量制作
11 概览Illustrator路径功能
Gtalk2voip——Google talk电话,会议,离线消息
你只需要在Google talk或Live messenger上添加一个service@gtalk2voip.com好友而无需安装任何软件你就可以实现以下功能:
- 为Google talk用户发送离线消息(很实用的功能)
- 语音会议
- 语音邮件(Google talk已经添加了此功能,所以比较适合Live messenger)
- PC to Phone,网络电话(需要付费)
- 免费的SIP拨打和接听(About:SIP 协议是一种基于ASCII码, 类似于HTTP和SMTP的一种服务于互联网视频会议, 网络电话, 即时短讯, 互动游戏, 及虚拟现实的信号协议. )
- 从网页上接听顾客打来的电话(需要付费)
- 更多将要添加的功能(如:Phone number Lease service)
cFos&cFosSpeed——网络调整
cFos针对PPPoE用户,cFosSpeed则针对内网用户(例如鱼)。
引用一些介绍“这个软件不会提高你的物理带宽! 它的作用是让你的下载/上传均达到最大值。
某些ADSL用户,在使用BT/ED等P2P软件的时候,会遇到浏览网页的速度变慢,网络游戏的ping值变得很高等问题。其实这是由于Windows处 理TCP/IP的方式不完善导致的,各种数据封包没有优先级考虑,在特定网络条件下造成网络阻塞。解决此问题的终极方法就是引入第三方软件 cFosSpeed。cFosSpeed提供一种新的上传流量「封包重新排序」的功能,称之为「Traffic Shaping」.
cFosSpeed和传统网络优化软件不同,这款 德国软件并不是简单的调整注册表一些键值,而是有自己独特的网络驱动。通过优化的TCP ACK排序,在上传通道带宽全满的时候还可以保障下载带宽达到峰值;而且通过内置的网络通讯优先级设定,可以让你在使用高流量多连接软件的同时,享受低 PING的游戏快感! 根据软件的介绍,它可以在ADSL完全满载的情况下为用户提供出色的传输效率!!”
1.Windows默认的数据传输方式
2.当用P2P软件的时候就会让上传数据变慢:
3.此软件的作用就是调整上传与下载,让它们互不影响:
此软件默认是不用调整的,它会自动检测你的物理网络特性,适应时间可达几天。如果有使用上的疑问请看这里
将软件上传到了Box.net
欢迎下载试用Cfos7.0下载地址,Cfos key(注册)下载地址,CfosSpeed3.0下载地址
我的桌面我做主
以前很喜欢将“桌面”只放一只大大的垃圾箱,运行程序的时候不厌其烦的去翻菜单,现在生活安逸像笨头笨脑的猪,运行程序的时候不厌其烦的在桌面上翻来覆去。
这样的生活似乎就要结束了。不用清理向导,不用快捷键,而是一张别出心裁的Wallpaper
工作区、个人应用区、优先处理区……轻松管理你的快捷方式
一共有两张以适合不同喜好的人Layered desktop&Layered desktop DarK
如果你是个规规矩矩的人不妨看看关于桌面的详细使用介绍
完全卸载Windows media player 11
可是Windows media player 11并不是哪里都好,PPlive现在就不支持它的最新版本,严重影响鱼欣赏“Tom & Jenny”的情绪,现在的解决方法就是选择在“默认播放器中播放”。
舍友最近也装了Media player 11,但却因为正版验证问题而没有安装完成,导致PPlive直接不能用了,安装Windows media player 10却提示当前安装的版本较高,不让装,经过一番周折(超过半个小时),差点恨死微软的时候终于找到方法把Windows media player 11完全卸载了。
“开始”————“运行”
先输入 C:\WINDOWS\$NtUninstallWMFDist11$\spuninst\spuninst.exe,执行结束后, 再输入 C:\WINDOWS\$NtUninstallwmp11$\spuninst\spuninst.exe
重启Windows media player 11就会被完全卸载了,此时可以再装上第10个版本。
从Blogger迁到Blogger beta
Blogger beta的确仍存在不少问题,但FTP Blogger的代码太让人心烦了,换一次模板就要重新来过,动不动就要面对那奇形怪状的条纹。今天终于决定将所有的Blog迁到Blogger beta上,以满足喜新厌旧的鱼。
如果你也像鱼一样喜欢Blogger beta,不妨再搬一次家
请到Blogger to blogger beta迁移地址试一试
免费——Lingoes 灵格斯词霸
得知后立即下载试用了一下,因为四级让鱼觉得好恐怖,感觉上一点都不比金山词霸差,更重要的是理念,尽管有金山豆豆,可恶的广告的确令人讨厌。来看一下官方的介绍。比较多的功能仍在开发之中,如果不急可以再等几天,等正式版推出之后再下载。关注更多请登陆灵格斯官方网站
|
制作超酷的Photo Flick
开机出现“"xmnt2002 not found . . ."”解决方法
解决方法很简单,删除注册表中的键值即可(XP中):
1.开始菜单――运行 ,输入regedit打开注册表
2.在注册表中找到以下位置:
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager
在右侧的编辑窗口可以修改以下名称键值:
BootExecut
只留下类似下面的值即可:
autocheck autochk *
再重启电脑就看不到烦人的信息了
Lightbox使用及地址变更
下面是Lightbox测试(请在原始网页测试):
图片一
图片二
重新将Lightbox上传到新的服务器上,相信这一次不会再变更地址,请放心使用。
另外再将lightbox使用方法贴在这里:
实现方法:
1.在<head></head>之间添加如下代码(请将全角<>改为半角字符):
<script type="text/javascript" src="http://202.100.82.31/eool/js/lightbox/prototype.js"></script>
<script type="text/javascript" src="http://202.100.82.31/eool/js/lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://202.100.82.31/eool/js/lightbox/lightbox.js"></script>
<link rel="stylesheet" href="http://202.100.82.31/eool/css/lightbox.css " type="text/css" media="screen" />
其中引用的js文件我已上传到自己的FTP空间.
2.在你想要引用图片的位置添加以下类似代码:
<a href="pic/1.jpg" rel="lightbox" title="my caption">LightBOX测试</a>
将pic/1.jpg换成你想展示的图片地址
3.添加一组图片用以下类似代码:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
只要方括号内的字符一样,它就会将图片归到一个相册里
注意:
1.找到<body>
并修改为:<body onload="initLightbox()">
2.图片一定要用绝对路径
如果有自己的FTP服务器(如Googlepages),可以将文件传到自己的服务器上,这样会比较“安心”,文件请到Lightbox官方网站下载。下载之后修改其中的CSS和名为Lightbox.js的文件,将其中所有出现图片地址的地方更改为自己上传图片后的实际地址。
(针对Blogger.com生成的博客)
LightBox产生的超炫效果的确很吸引人,可是每次应用的时候都要写入代码并不是件轻松的事,上帝让人有懒惰的特性正是要求我们发现新的方法使一切变得简单起来。
Blogger的设置中有一项设置是“贴子模板”,这是一个预置的功能,可以让我们预先为贴子设置一些默认的形式,以方便撰写。LightBox的代码我们就可以放在这儿,设置以后它就会作为模板的形式出现在新贴子的代码里。一切都很简单
1.“设置”→“格式设定”→“帖子模板”
2.在里面输入你想在每篇帖子里显示的内容就行了,这儿我们要加入的代码是
单张图片:<a href="pic/1.jpg" rel="lightbox" title="my caption">LightBOX测试</a>
一组图片:<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
3.重新发布索引
Bloggerspaces新发布了一个超炫相册,呵呵,完全就是一个Lightbox,不过却让应用变的更加简单了,嫌自己的LightBox使用复杂,不妨用它。
LightBox只能在网页中引用图片,如果你嫌功能少,不妨试一试GreyBox,它可以像LightBox一样在网页中轻松引用图片或者网页。