分享所有的订阅Feed
我的全部订阅Feed下载
善待自己的生命
也不知道有没有可能再回来。或许会是不同的面目。或许会写更多关于自己的东西。
沉浸网络太长时间了,自己的正常生活严重受到干扰。阳光应该在自己的生命中扮演更重要的角色。曾经因为Blog错失了美好的感情,因Blog荒废了学业,因Blog影响自己的休息,因Blog几乎扔掉了自己所有的爱好。
无法计算自己耗费在网络上的时间到底有多长,几年来,自己的生活都以电脑为中心,时常觉得自己失去的太多太多,可是却无法摆脱。即使将来也是,但它的位置将回归网络的本质。电脑是一种工具,提醒自己。
在此也劝那些寄生于网络的朋友们,善待自己。多付出一些精力给身边的人,他们才是真正的活在你生活中的人。
展开折叠评论升级版
Thanks to singpolyma.
1.展开代码,紧跟</head>之前,添加下面代码。
<script type="text/javascript">
//<![CDATA[
var comment_form_template = '<div class="commentelem"><div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
//]]>
</script>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2706908' type='text/javascript'></scrip><script type="text/javascript">
function toggleitem(postid,linkid,newtxt,displaytype) {
if(!displaytype) {displaytype = 'block';}
var whichpost = document.getElementById(postid);
if (whichpost.style.display != "none") {
whichpost.style.display = "none";
} else {
whichpost.style.display = displaytype;
}
if(linkid) {
var lnk = document.getElementById(linkid);
lnk.href = "javascript:toggleitem('"+postid+"','"+linkid+"','"+lnk.innerHTML+"');";
lnk.innerHTML = newtxt;
}
}//end function toggleitem
</script>
2.找到
<b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
紧跟它之前添加以下代码:
<b:loop values='data:post.feedLinks' var='f'>
<b:if cond='data:blog.pageType != "item"'>
<script expr:src='data:f.url + "?alt=json-in-script&amp;callback=peekaboo_comments_display"' type='text/javascript'/>
</b:if>
</b:loop>
3.找到
<b:includable id='comments' var='post'> <div class='comments' id='comments'>
将红色部分替换为下面部分:
<div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
document.getElementById('comments<data:post.id/>').style.display = 'none';
</script>
</b:if>
4.找到
<b:includable id='main' var='top'>
<!-- posts --><b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
红色部分替换为:
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
5.找到
<b:includable id='post' var='post'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
红色部分替换为:
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
最后保存模板。
Singpolyma模板
Singpolyma提供了自己的模板下载,示例可以去作者的Blog查看。
Blogger的页内评论
方法见Yee 或原文
去掉首页地址多余部分
Blogger默认的首页地址为:http://USERNAME.blogspot.com/index.html事实上那个Index.html没什么用处,看起来也很烦。点击下面按钮去掉它。
帮别人去掉,点下面按钮。
自适应模板的定义及添加Widebar
修改前备份模板。不同的模板情况可能不同,根据实际情况修改,下面的内容仅供参考。
什么是自适应模板?不同的电脑显示器的大小不一样,因此我们的Blog在不同的显示器上显示的效果也是不同的。有的模板把Blog的宽度设为具体的某一值,这样在所有的显示器上所显示出来的样式是一样的。但是,我们也可以让BLog自动适合显示器的大小。如本Blog。
自适应模板的宽度是以百分数来定义的,不像固定模板一样是固定的数值。更改也很简单,预先计算好各个区域的大小,再修改为百分值即可。
Widebar这里指的是跨越两个侧边栏的宽度的侧边栏,当然,首先你有两个侧边栏。Widebar是在两个侧边栏之上或之下的一个新的区域。下面的示例中我们将定义一个Widebar。
以Bloggeruniversity为例,这个Blog包含了四部分,两个Sidebar,一个Widebar,另一部分是文章区域(main-content).
整个浏览器的所有显示区域为100%,下面我们先从总体上来分配一下各部分的宽度。
左边距:5%
右边距:2%
中间部分:93%(包括文章区域,两个侧边栏,一个Widebar)
然后我们来详细分配“中间部分”各部分的区域分配。
文章区域:50%
左侧边栏:22%
右侧边栏:22%
余下的6%留作侧边栏之间的空白
因为Widebar在两个侧边栏之上或之下,所以它的宽度为两个侧边栏之和:44%。
1.先在CSS里定义Widebar区域的样式。
#widebar-wrapper {
width: 44%;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#widebar {
width: 100%;
padding:10px 0 5px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */
}
2.在页面中添加Widebar区域。找到<div id='main-wrapper'>(不同模板中此区域名字可能不同,如可能叫“content-wrapper”),添加下面代码以添加区域,无须选中扩展代码。
<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>
现在再回到“页面元素”就会发现多了一个区域。
为Blogger添加Lightbox Gone Wild
Lightbox Gone Wild可以在不离开当前页面的情况下加载其它的页面或信息,跟之前写过的Lightbox类似。效果很酷,除了应用起来有些烦琐之外。Yupoo上有这种效果。
1.在<head></head>之间添加下面代码。
<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=1093361"></script>
<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=2655847"></script>
<link rel="stylesheet" type="text/css" href="http://singpolyma.googlepages.com/lightbox.css" />
2.使用。添加下面的格式。
<div id=" lightbox-id" style="display:none;">
展示的内容
</div>
关闭Lightbox的链接:
<a href="#" class="lbAction" rel="deactivate">关闭</a>
开启Lightbox的链接:
<a class="lbOn" href="# lightbox-id">开启Lightbox</a>
via Singpolyma
添加Google Maps
代码存在一些问题,下课后继续修改。^_^ 又一中午没睡觉。郁闷!
成功啦,原来作者的代码中多了两个空格,晕死。 看鱼做的示例.
1.像以前添加Google Ajax search一样,先到官方网站上申请一个Key,地址在这儿。
2.备份你的模板。一定要注意这一步,不要出错的时候后悔莫及。
3.紧在</head>之前,添加下面代码。在这一步,我们可以设定默认的Google maps加载时的地点,要用到经纬度,可以通过Google earth得到。经纬度格式示例:4.700000, 52.300000
我实在没办法了,因为只要把代码复制到这上面,就不能正常显示,因此放在了一个文本区域中,如果还不行,那么建议你不要添加了,因为用处不大
4.保存模板,可能会弹出错误提示,可以忽略,因为你申请的Key是为你的Blog地址,而此时的地址是beta.blogger.com
5.现在你只要粘贴下面代码就可以把地图放在文章或侧边栏里了。
<div id="map" style="width:360px; height:260px; border:solid 1px #000000;">Loading map...</div>
via BeautifulBeta
漂亮的引用区域修饰
添加上面这种样式,在CSS里添加下面代码,其中那张引号的图片请下载并自己上传。
blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10;
padding: 0 20px 0 50px;
background: url("图片地址") 5% no-repeat #FFF8DD;
}
此样式相应代码,红色十六进制为上下边框的颜色,可自己修改:
blockquote{via BlogU
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}
一个Blogger模板站点
访问Blogger Templates
以日历形式显示文章日期
效果及原文请见良人的大秘寶,就是把文章的日期用一张日期的小图片替换。
1.添加CSS
.CAL { background-image: url('http://klcintw.images.googlepages.com/icon-calendar.gif background-repeat: no-repeat; width: 32px; height: 45px; float:left; padding-right:8px; } .MONTH { padding-top: 10px; text-align: center; font-family: "Arial Narrow" font-size: 9px; } .DAY { margin: -2px 0px 0px 0px; padding: 0px; font-family: "Courier New" font-size: 18px; font-weight: bold; text-align: center; }
2.添加JS
<script language="javascript" type="text/javascript" > function makeCal(id,ymd) { var postDate = new Date(Date.parse(ymd)); var panel = document.getElementById("divCal_"+id); panel.innerHTML = "<div class='CAL'><div class='MONTH'>"+postDate.getFullYear()+"-"+(postDate.getMonth()+1)+"</div><div class='DAY'>"+postDate.getDate()+"</div></div>" } </script>
3.找到下面代码:
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>
红色部分替换为:
<div expr:id='"divCal_" + data:post.id'><script type='text/javascript'>makeCal('<data:post.id/>','<data:post.dateHeader/>');</script></div>
已知问题:转换页(如选择下一页)后无法显示日历
控制模块在不同的页显示
之前已经写过类似的文章了,这里主要介绍一下如何只在某一标签页中显示。找到相应的模块,添加红色标出的部分。
1.不在首页显示,添加红色的判断语句。
<b:widget id='AdSense1' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div class='widget-content'>
<data:adCode/>
</div>
</b:if>
</b:includable>
</b:widget>
2.只在标签页中显示。
<b:widget id='Image1' locked='false' title='' type='Image'>
<b:includable id='main'>
<b:if cond='"标签页地址" == data:blog.url'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
</b:if>
</b:includable>
</b:widget>
3.只在首页显示,添加的位置与上面的一样
<b:if cond='data:blog.homepageUrl == data:blog.url'>
</b:if>
让所有链接在新窗口中打开
很多人问到这个问题。修改一下Html解决问题。选中“扩展窗口小部件模板”。找到链接模块,添加上一个target='_blank'属性。如下面红色标出的部分。如果你用过之前介绍的链接的Hack,代码可能不同,但也可以找到相应的部分。
<b:widget id='LinkList2' 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>
Blogger:12个可换主题的模板
PurpleMoggy之前介绍了一个Hack,可以通过JS即时更换Blog的主题,也就是即时调用不同的CSS来显示Blog,方法比较繁琐,而且需要事先做好相应主题的CSS文件。现在作者做了一些现成的供我们使用,一共十二个。只要下载相应的XML文件上传就可以了,另外也提供了相应CSS,及JS的地址,可以自己保存起来。Demo为示例。修改之前请保存模板。这些模板包括了三种方式来改变主题,选择一种你喜欢的方式,然后把另二个模块删除即可。
1) Minima Stretch
Demo(示例):
--minima-stretch-switch.blogspot.com
CSS files(相应的CSS文件):
--minima_stretch_demo.css
--minima_lefty_stretch_demo.css
XML file(XML文件,下载上传):
--minima_stretch_demo.xml
2) Minima
Demo:
--minima-switch.blogspot.com
CSS files:
--minima_demo.css
--minima_dark_demo.css
--minima_blue_demo.css
--minima_ochre_demo.css
--minima_lefty_demo.css
XML file:
--minima_demo.xml
3) Stretch Denim
Demo:
--stretch-denim-switch.blogspot.com
CSS files:
--stretch_denim_demo.css
--stretch_denim_light_demo.css
XML file:
--stretch_denim_demo.xml
4) Denim
Demo:
--denim-switch.blogspot.com
CSS files:
--denim_demo.css
--washed_denim_demo.css
XML file:
--denim_demo.xml
5) Rounders
Demo:
--rounders-switch.blogspot.com
CSS files:
--rounders_demo.css
--rounders2_demo.css
--rounders3_demo.css
--rounders4_demo.css
XML file:
--rounders_demo.xml
6) Herbert Jellyfish
Demo:
--herbert-jellyfish-switch.blogspot.com
CSS files:
--herbert_demo.css
--jellyfish_demo.css
XML file:
--herbert_jellyfish_demo.xml
7) No. 897 & 565
Demo:
--no-switch.blogspot.com
CSS files:
--no_897_demo.css
--no_565_demo.css
XML file:
--no_demo.xml
8) Thisaway
Demo:
--thisaway-switch.blogspot.com
CSS files:
--thisaway_demo.css
--thisaway_blue_demo.css
--thisaway_green_demo.css
--thisaway_rose_demo.css
XML file:
--thisaway_demo.xml
9) Snapshot
Demo:
--snapshot-switch.blogspot.com
CSS files:
--snapshot_demo.css
--snapshot_sable_demo.css
--snapshot_tequila_demo.css
XML file:
--snapshot_demo.xml
10) Moto
Demo:
--moto-switch.blogspot.com
CSS files:
--son_fo_moto_demo.css
--mr_moto_demo.css
--ms_moto_demo.css
XML file:
--moto_demo.xml
11) TicTac
Demo:
--tictac-switch.blogspot.com
CSS files:
--tictac_demo.css
--tictac_blue_demo.css
XML file:
--tictac_demo.xml
12) Dots
Demo:
--dots-switch.blogspot.com
CSS files:
--dots_demo.css
--dots_dark_demo.css
XML file:
--dots_demo.xml
FTP方式Blogger一键添加最新文章模块
你要得到的就是其中你设置的RSS地址,如图中的地址是:http://home.planet.nl/~hansoosting/testfeed/rss.xml
2.到模块生成页面(Recent Posts Widget for FTP Blogs),填写一些基本内容(要用到RSS地址),点“Creat”按钮,会生成代码,将这些代码复制到你想要的位置就可以了。
文章最大显示篇数为25。
3.安装之后要加一部分CSS来修饰添加上的模块。下面是作者的一个简单示例:
.bbrecpost {margin-top:10px;}.bbrecpostsum {font-style:
italic;}.bbwidgetfooter {margin-top: 10px;margin-bottom: 10px;}
Google Ajax Search应用另一例
很早之前写过一个简单的例子,因为需要调整的东西太多并且容易出错,因此把那篇文章删掉了。Hoctro介绍了另一个Ajax Search,这个更实用一些。比较酷,采用了标签的形式,跟Blog结合的更紧密。示例可以看 Blogger Show,或者原作者Hoctro's Place
1.去http://code.google.com/apis/ajaxsearch/signup.html申请一个Key。
2.添加JS和CSS。这一部分添加在] ] ></b:skin>之后,或者你喜欢的位置。
<script
src='http://www.google.com/maps?file=api&v=2&key=申请到的Key' type='text/javascript'/>
<script
src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=申请到的Key' type='text/javascript'/>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
<link href='http://www.google.com/uds/css/gsearch_darkgrey.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
/* primary colors */
.app_gsvsc { color : rgb(153, 170, 221); }
.search-form-complete_gsvsc div.search-form-save_gsvsc { color : rgb(170, 221, 153); }
div.search-form-save_gsvsc { color : #202020; }
/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }
/* hover colors */
div.more_gsvsc:hover { color : rgb(170, 221, 153); }
div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }
.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }
.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }
.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }
/* secondary colors */
div.more_gsvsc { color : rgb(204, 204, 204); }
div.tag-control_gsvsc { color : rgb(204, 204, 204); }
.searchForm_gsvsc { color : rgb(204, 204, 204); }
.search-form-input_gsvsc { color : rgb(204, 204, 204); }
td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }
div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }
.footerBox_gsvsc a { color : rgb(204, 204, 204); }
.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }
div.edit-tag_gsvsc { color : rgb(204, 204, 204); }
/* special settings, not called out in standard color overrides */
.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }
.results_gsvsc div.video-result_gsvsc { border-color : #000000; }
.search-form-input_gsvsc {
color : #676767;
background-color : #e0e0e0;
}
.gsc-control {
width: 100%;
}
</style>
<script type='text/javascript'>
var coreSearch;
function SolutionLoad() {
var controlRoot = document.getElementById("searchControl");
// create the search control
coreSearch = new GSearchControl();
coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
// prep for decoupled search form
var searchFormElement = document.getElementById("searchform");
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(searchFormElement);
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// populate - web, this blog, all blogs
var searcher = new GwebSearch();
searcher.setUserDefinedLabel("网络");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setUserDefinedLabel("Blog搜索");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setSiteRestriction("你的Blog地址");
searcher.setUserDefinedLabel("你的Blog名称");
coreSearch.addSearcher(searcher);
searcher = new GwebSearch();
searcher.setSiteRestriction("http://www.blogger.com/");
searcher.setUserDefinedLabel("Blogger搜索");
coreSearch.addSearcher(searcher);
coreSearch.draw(controlRoot, drawOptions);
}
function doCoreSearch(q) {
coreSearch.execute(q);
}
registerLoadHandler(SolutionLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
return true;
}
</script>
3.通过修改HTML添加两个模块,其中一个是搜索结果,一个是搜索框。无需选中“扩展窗口小部件模板”,找到类似的以下部分:
<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='相关文章' type='HTML'/>
<b:widget id='HTML5' locked='false' title='日常使用的软件' type='HTML'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
<b:widget id='HTML1' locked='false' title='搜索订阅' type='HTML'/>
<b:widget id='Label1' locked='false' title='标签' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='存档' type='BlogArchive'/>
<b:widget id='AdSense2' locked='false' title='' type='AdSense'/>
<b:widget id='Feed1' locked='false' title='评论' type='Feed'/>
<b:widget id='LinkList1' locked='false' title='[+/-]链接' type='LinkList'/>
</b:section>
</div>
然后把下面的代码放在任意两个b:widget 之间:
<b:widget id='HTML41' locked='false' title='Search Bar' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchform'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML42' locked='false' title='Search Results' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchControl'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
4.到页面元素中,拖动刚添加的两个模块到适合的位置,保存。
5.最后介绍一下自定义部分。下面这段代码是第一部分代码中的一部分,我们就是通过这部分定义的Blog搜索。其余红色的部分都是已定义的搜索,可以根据实际情况修改或去除。因为火狐浏览器会缓存js,所以如果几个博客都有这个api插件的话,就会报错,出现这种情况,请点确定。
searcher = new GblogSearch();
searcher.setSiteRestriction("你的Blog地址");
searcher.setUserDefinedLabel("Blog名字");
coreSearch.addSearcher(searcher);
相关介绍:GGpai
号召更多的人来使用Blogger !
还有更多的优点等待你的发现!欢迎补充!
Blogger相关文章模块升级版
之前显示BLogger相关文章的Hack模块,是根据文章的标题来判断文章的相关性。PurpleMoggy的这个Hack是根据标签来判断文章相关性的,应该更合适一些。(标签中不能包含像?/之类的字符)
1.把下面代码放在<head></head>中。选中“扩展窗口小部件模板 ”
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
2.在代码中找到下面的部分。
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
3.更改为下面形式。其中的粗体为添加的部分。
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
4.保存模板,并转到“页面元素”中,添加一个HTML/Javascript模块,在里面填上下面代码,并保存。
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
5.再回到Html编辑,选中“扩展窗口小部件模板 ”。找到下面的部分,其中粗体部分为要添加的部分。
<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
自定义部分:通过蓝色标记(即i < 20和max-results=10)出的部分我们可以自定义显示相关文章的数目。页面加载速度和相关文章的数目之间的平衡自己掌握好了。
Blogger:折叠式链接列表
以前我们通过在侧边栏展开/收缩栏目来让友情链接收缩起来,唯一的缺点就是添加链接时比较麻烦。这个Hack直接就是一个链接列表,但是却可以展开收缩,比较方便。不用展开模板代码,找到侧边栏部分的合适位置,例如:
<b:widget id='HTML5' locked='false' title='推荐使用的软件' type='HTML'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
<b:widget id='HTML1' locked='false' title='搜索|订阅' type='HTML'/>
<b:widget id='BlogArchive2' locked='false' title='相关文章' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='标签' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='存档' type='BlogArchive'/>
<b:widget id='Feed1' locked='false' title='评论' type='Feed'/>例如你可以放在这之间
<b:widget id='HTML2' locked='false' title='链接' type='HTML'/>
然后把下面的代码放在任意两个b:widget 之间,添加完代码保存。然后在“页面元素”就会发现多了一个链接列表,现在就可以添加链接了。
<b:widget id='ALIST' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = (new Date()).getTime();
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;">');
//]]>
</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
via Singpolyma
页面加载转换效果
更新:我把这个效果从这个Blog里去除了,效果自己加上试一试吧,反正很简单。很Cool哦
在IE下有效,FX(好像我见到的大多数人都习惯称之为FF)下只能看到加载效果。转换滤镜不起作用。Gecko 的浏览器下面也可以看到。效果请在IE下打开这篇BLog的单独链接查看。很Cool~
没有效果要多试几次哦。这个效果要求新的页面在后台完全加载结束后才会进行转换,因此会觉得加载时间长一些。不过Blogspot还是蛮快的嘛
1.添加到<Head></head>区域,放在前面好了。
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)" />
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)" />
2.添加到</body>之前
<script language="JavaScript" type="text/javascript">
function loading(){
document.getElementById("loading").style.display="block";
}
window.onbeforeunload=loading;</script>
<div id="loading" style="position:absolute;top:300px;left:0px;width:100%;text-align:center;z-index:100;display:none;"><span style="background-">请稍候,页面正在加载... </span></div>
via s5s5
更改默认Feed地址
在以前写过的头信息优化这篇文章中,曾介绍过如何修改Blogger的默认的Feed地址,但太粗略,所以在这里再详细写一下。
在头信息,也就是<head></head>之间,有这样一句:
<b:include data='blog' name='all-head-content'/>
这句的作用就是在加载网页的时候自动加载所有关于此Blog的一些相关信息,如网页编码、生成工具以及Feed地址等元内容。里面所包含的内容在模板编辑中我们是无法看到的,那么它究竟包含了些什么呢?
打开你的Blog,然后查看页面的源代码,此时这一句所囊括的内容便一览无余。如我的Blog:
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link rel="alternate" type="application/atom+xml" title="色彩斑斓 - Atom" href="http://sunr.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="色彩斑斓 - RSS" href="http://sunr.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="色彩斑斓 - Atom" href="http://www.blogger.com/feeds/23208269/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.blogger.com/rsd.g?blogID=23208269" />
<link rel="alternate" type="application/atom+xml" title="色彩斑斓 - Atom" href="http://sunr.blogspot.com/feeds/7941511704063610200/comments/default" />
红色部分,属性rel="alternate" ,会自动通知浏览器或其它Feed探测器后面的Feed地址。其中最后一句是某一篇文章的评论Feed地址,如果做修改会丢掉此部分。
1.修改就变得很简单了,首先去掉<b:include data='blog' name='all-head-content'/>,然后把下面的代码替换到它的位置上。
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link href='自定义的Feed地址' rel='alternate' title='RSS' type='application/atom+xml'/>
<link rel="service.post" type="application/atom+xml" title="博客名称 - Atom" href="http://www.blogger.com/feeds/你的BlogID/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.blogger.com/rsd.g?blogID=你的BlogID" />
2.另外我们也可以隐藏在Blog最下方的订阅提示。修改CSS。
.feed-link { display:none; }
Blogger:自动隐藏搜索栏(Navbar)
以前也介绍过一个简单隐藏Navbar的方法,但那种方法会完全去除Navbar,即使我们需要的时候。现在我们可以让它在鼠标移动到上面的时候显示出来。其它时候会自动隐藏,用了一个滤镜。添加下面的CSS:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
把这些代码放在
body {
background:$bgcolor;
之上即可。
Blogger:显示“您的位置”
在一些门户网站上我们可以看到一类导航会显示出你所在的“位置”。这个BloggerHack就是针对此功能的。
示例可查看我的测试BLog,http://hacktests.blogspot.com
1.找到以下位置:<b:widget id='Blog1' locked='true' title='博客文章' type='Blog'>紧跟其后把下面代码粘贴过去:
<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
您的位置:
<a expr:href='data:blog.homepageUrl' rel='tag'>主页</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>
2.在下面找到下面代码,<b:if cond='data:post.dateHeader'>紧跟其后添加
<b:include data='post' name='breadcrumbs'/>
3.添加CSS。可根据自己需要修改。
.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}
4.保存Game over
Blogger相关文章模块
感谢GG(没找到你的地址)提醒:只要“:”这个符号是英文标点":",就能查询这个英文冒号前的中文,从而搜索相关文章。
这段JS是根据文章标题来过滤相关文章的,所以对中文支持不怎么样,效果见这篇文章。
这个模块可以在侧边栏上显示出与当前正查看的文章相关的文章。只在某一项目页起作用。不太完美的地方就是要等一段时间才会把相关文章“过滤”出来。添加也非常简单,无须展开代码,找到侧边栏的任意两个b:widget之间,把下面的代码加上就行。
<b:widget id='BlogArchive2' locked='false' title='相关文章' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:title'>
<h2 id='relatedTitle'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='RelatedPosts'>
<div expr:id='data:widget.instanceId + "_ArchiveList2"'>
<b:if cond='data:style == "HIERARCHY"'>
<ul id='relatedArticles'><b:include data='data' name='interval'/></ul>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
<script language='JavaScript' type='text/javascript'>
// 'Related Article' hack by Hoctro - Nov 2006 http://hoctro.blogspot.com
// Some rights reserved - 2006
//Cross browser event handling written by Scott Andrew
function addEvent2(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
}
else {
elm['on' + evType] = fn;
}
}
function copyNodes2() {
var ele = document.getElementById('relatedArticles').cloneNode(true);
var aList = ele.getElementsByTagName('a');
var atext = "<data:blog.pageTitle/>";
var arr = new Array(3);
arr = atext.split(":",3);
var related = document.getElementById('relatedArticles');
var relTitle = document.getElementById('relatedTitle');
relTitle.firstChild.nodeValue = relTitle.firstChild.nodeValue + " about " + arr[1] + 's';
while (document.getElementById('relatedArticles').hasChildNodes()){
document.getElementById('relatedArticles').removeChild(document.getElementById('relatedArticles').firstChild);
}
var listLen = aList.length;
for (var j=0;j < listLen;j++){
var txt = aList[j].firstChild.nodeValue;
var sarr1 = arr[1].substr(1, arr[1].length-1);
if(txt.search(sarr1) != -1) {
var litxt = document.createElement('li');
txtNode = aList[j].cloneNode(true);
litxt.appendChild(txtNode);
related.appendChild(litxt);
}
}
}
// Load event to run our script
addEvent2(window, 'load', copyNodes2, false);
</script>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<b:loop values='data:posts' var='i'>
<a expr:href='data:i.url'><data:i.title/></a>
</b:loop>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
</b:widget>
via Hoctro's place
Google是革新的终结者吗?
Steve Jenson,Blogger团队的一名成员,今天离开了Google。Steve是下半年第二个离开Blogger团队的成员,至少是我们已知的第二个。
Google的确推出了一系列很酷的作品,也收购了很多很有成就的产品,但是被收购之后呢?它们还像以前那样继续焕发光彩吗?下面请看一些例子。
以时间线为续:
2003年二月。Google收购Pyra工作室,也就是Blogger的开发者。但是让我们等待了三年半之后,2006年八月,Blogger才做出了一些更新。
2004年七月。Google收购IdeaLab,Picasa和Hello的开发者。首先我非常喜欢Hello这款产品,即时分享图片,是我认为的现在分享图片的最佳软件,Hello像一个FTP服务器,即时传输图片,在国内的连接情况跟Google的一些服务一样会经常挂掉,但它的思想却是创新性的,我觉得它跟最近推出的Picbus的原理是完全一样的,相信用过这两款软件的人会自然的分辨出它们谁更优越。但是在Hello进入Google之后却再也没被提起过,最后的版本是05年一月的。
2005年十一月。Google收购了网络分析软件,也就是现在的Google Analytics,并由收费变为免费提供服务,尽管Google Analytics的用户迅速增加,可是中间有一年的时间没有再对它进行改进。
2006年二月。Google从Adaptive Path得到了Measure Map,它是一个Blog统计包。当时我们以为Google或许会把它整合到Google analytics或者单独把它免费推出,最糟的也会把它整合到Blogger里。不幸的是,自从收购这家公司之后就再也没有Measure Map的消息了。
2006年三月。Google收购了Sketchup这款3D绘图软件,并把它整合到Google earth免费提供给用户。但是,它被收购之后就再也没有一个新功能被添加进去了。
via Amit