Blogger反向链接

什么是反向链接？如何使用反向链接？打印 反向链接使您可以跟踪网络中链接到您帖子的其他网页。例如，假设 Alice 写了一个 Bob 感兴趣的 Blog 帖子。然后，Bob 到自己的 Blog 上写了一个关于它的帖子，并反向链接到 Alice 的原始帖子。Alice 的帖子就会自动显示 Bob 已与它建立链接，它将提供一小段 Bob 帖子的文字以及指向该帖子的链接。它所实现的是对评论功能的扩展，这样，对某个帖子的定期评论就可以与其他网站上的相关讨论汇集到一起。
在"设置
评论"标签下可以找到反向链接设置。通过一个简易的选项可以进行功能开关转换

用Google Appengine建立了新博客

前几天利用Google App Engine建立了一个新博客，访问速度较快，以后的更新将在那里继续了！新博客地址： http://blogyoume.appspot.com/ 或http://blog.wer.pp.ru/

利用del.icio.us来显示随机文章

首先强烈感谢暗夜独唱的wqbloodsky率先介绍这一方法，他的原文请查看这里。

当然也感谢外国原作者Mario Brhemenz。

这个hack的作用就是利用del.icio.us的书签功能来给blogspot添加一个显示随机文章的按钮，按了按钮js脚本就会随机在del.icio.us的书签里取得一篇博客文章并直接把当前博客页跳转到该随机文章。
但是一个极大的缺陷就是，你必须把你博客文章一篇一篇的输入到del.icio.us里，才能起到随机跳转的作用，如果你只输入一篇文章，那么就只跳转到那篇文章……

安装方法，

你首先下载这个 js脚本：http://ggpi.008.net/random.js 把里面的“ggpi”替换成你要使用的del.icio.us的用户名。然后把该脚本上传到某个空间。
接着紧跟<head>下面某个地方加上
<script src='http://ggpi.008.net/random.js' type='text/javascript'/>
当然你要把http://ggpi.008.net/random.js换成你的刚刚上传好js的空间网址。

最后在你的模板页面元素项目加上一个HTML/JavaScript页面元素內容如下:

<form id="azform" action="javascript:azar();" method="get"> <input id="azbotonn" value="随机日志" onclick="azar(); return false;" type="button"/> </form>
<div style="display:none">
<script src="http://del.icio.us/feeds/js/tags/<span style=">你的del.icio.us 用户名</span>?
totals;flow=list;size=15-25;color=000099-000000;"
type="text/javascript"><script>
</div>

在不改变修改过模板下增加打星评分功能

首先切换到 布局 的 修改HTML 项目，找到这行代码：

<div class='post-footer-line post-footer-line-1'>



在后面添加如下代码：

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



<span class='star-ratings'>


<b:if cond='data:top.showStars'>

<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>

</b:if>

</span>



</b:if>

接着往下面找到下列代码：




<!-- navigation -->

<b:include name='nextprev'/>



<!-- feed links -->

<b:include name='feedLinks'/>

最后跟在下面添加下列代码：




<b:if cond='data:top.showStars'>

<script src='http://www.google.com/jsapi' type='text/javascript'/>

<script type='text/javascript'>

google.load("annotations", "1");

function initialize() {

google.annotations.createAll();

google.annotations.fetch();

}

google.setOnLoadCallback(initialize);


</script>

</b:if>



就完工了！另外你注意到<script src='http://www.google.com/jsapi' type='text/javascript'/>这一行代码了吗？如果你已经加了<script src='http://www.google.com/jsapi' type='text/javascript'/>这行代码在博客开头的位置，那么可以把这行代码去掉，因为已经不需要了！

给blogspot博客提供文章和评论总计功能

这个扩展hack就是可以给出你的Blogger博客的所有文章和评论总和。如图：



安装非常简单，只需要新建一个HTML/JavaScript，将如下代码复制进去就好了！



<div style="float: left;"><img style="width: 48px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwI22p_fTZTCvdlzyXY8YhHpmbPEXAr-DMIXOhY84ZbuQzf9t0dgB8u0U2FQSpb__I13B2OGSStJUPWww9rIkv1t2q5w2sB7_vBFnqURft8b1ioqdoM4RD3QjPze5JXYDn610IwvYrf4nt/s0/stats.png"/></div>


<div style=" float: left; text-align: left;">

<script style="text/javascript">

function showpostcount(json) {

document.write(parseInt(json.feed.openSearch$totalResults.$t,10));

}</script>

<script src="http://ggq.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> 篇文章


<br/>

<script src="http://xuexiji.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> 个评论</div>

<div style="clear: both;"></div>



当然注意要把红色的http://xuexiji.blogspot.com 改成你的博客地址了！




注意绿色的https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwI22p_fTZTCvdlzyXY8YhHpmbPEXAr-DMIXOhY84ZbuQzf9t0dgB8u0U2FQSpb__I13B2OGSStJUPWww9rIkv1t2q5w2sB7_vBFnqURft8b1ioqdoM4RD3QjPze5JXYDn610IwvYrf4nt/s0/stats.png部分网址是此统计的图片效果，你也可以改成你想要显示的图片。

给Blogger添加相关文章功能

本Hack是根据标签来判断文章相关性的，注意标签中不能包含像？/之类的字符，对文章的标签数量也没有限制。在咖啡鱼的教材中，是将相关文章放在 "页面元素"中，需要添加一个HTML/Javascript模块。本例有点改动，将相关文章放在文章后面，自己比较喜欢这种形式。

1、把下面代码放在<head></head>中。其中的"i < 12"是控制文章数量的，建议数值不要太大，以免影响浏览速递。

<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 < 12) {
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>与</b:loop>之间，插入如下红色的代码。注意："max-results=12"是控制相关文章的显示数值。

<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&amp;callback=related_results_labels&amp;max-results=12"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

3、找到自己想要显示相关文章的位置，将下面红色代码放进去，保存就OK那了。本例就放在评论前，如下面黑色代码。

<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript"> removeRelatedDuplicates(); printRelatedLabels(); </script> </b:if>

<div id='comments'>
<a name='comments'/>
<h4>
<b:if cond='data: post.numComments == 1'>
1 条评论:
<b:else/>
<data:post.numComments/> 条评论:
</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 />

4、完成，看看效果吧！

一分钟修改页首图片

对于像鱼一样的Slacker来说，修改模板是一件很痛苦的事.懒人就应该有懒办法，不用面对CSS/Html，只需要简单的复制/粘贴就能做到
1.切换到Layout设置
2.在Layout底部 Add Page Element——>HTML/JavaScript
3.添加并根据实际情况修改代码

<div style="position:absolute; left:0; top:57px; text-align:center; width:100%">
<a href="博客地址" />
<img src="图片地址" />
</a>
</div>

4.这个设置适于minima这个模板，修改top的值以适应不同的模板。

添加标签云

相信这是很多人期待的功能吧。以前用Delicious为Blogger添加标签云，现在我们的方法更简单。
请于修改之前备份你的模板。
Step1:我们知道，Blogger beta的代码分为三部分：样式表、布局、Widget。第一步我们不需要展开代码，添加CSS代码。找到 ]]＞＜/b:skin＞ ，并将CSS添加在其之前。

/* 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}

Step2：添加布局部分代码。我们仍然要先找到 ]]＞＜/b:skin＞　，但这一次我们要在它之后、Head之前添加以下代码：
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

修改YOURBLOG为你的名字，其中关于颜色，文字大小等值可以自定义，以跟你的Blog色调打配。
简单介绍一下，maxFontsize表示字体最大值，minFontSize表示字体最小值，minColor表示颜色最浅值，maxColor表示颜色最深值。

Step3:最后要修改的是Widget本身了。继续往下看就会找到Label的Widget
类似这一句：<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
如果你没有展开代码，只需要用以下代码替换这一行;相反，你要替换整个Widget。

<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 -----------------

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 ta=0

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])


}


}

tz = labelCount.length-1;

lc2 = document.getElementById('labelCloud');

ul = document.createElement('ul');

ul.className = 'label-cloud';

for(var t in ts){


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 = lcBlogURL+'/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>

Step4：Game Over ^-^

改变/隐藏Feed订阅地址

在Blogger beta中默认的Feed地址是在最下方的，我们可以把它变成一个Widget放在侧边栏或者你想要的地方。复制下面的代码，把它放在你想要的地方吧。

<b:widget id='FeedsWidget' locked='false' title='Feeds' type='Blog'>
<b:includable id='main'>
<h2 class='sidebar-title'>Syndication</h2>
<b:if cond='data:feedLinks'>
<ul class='xoxo'>
<b:loop values='data:feedLinks' var='f'>
<li><img src='http://photos1.blogger.com/blogger/6537/1341/1600/feed-icon-12x12.jpg' alt='' /> <a expr:href='data:f.url + "?alt=rss"' rel='alternate'><data:f.name/> Feed</a></li>
</b:loop>
</ul>
</b:if>
</b:includable>
</b:widget>

但我觉得，好像大多数人都用Feedburner或Feedsky烧制了RSS，那么我们可以把它隐藏起来。在CSS中加入这一句

.feed-link { display: none }

Favicon(已更新)

如果你用Firefox或IE7(IE里面显示的是静态的)，在地址栏或标签上会看到本站的那个黑色的小花，而且是会动的。它是怎么做的呢？
发现了一个非常Cool的网站但那个图标是静态的。在这个网站上你可以生成一个动态的图标，而且可以任意选择本地文件上传，自定义滚动的文字（好像不支持中文），动心了吗？
生成之后下载它提供的一个压缩文件，里面包含了一个.ico文件，一个 .gif文件。把它们上传到如Google pages（ICO文件必须更改名称，只要不是Favicon即可，比如鱼用的Sunricon.ico）得到地址。然后在Head之间添加下面代码：
1.如果是静态的Favicon（只需上传ICO文件）

<link rel="shortcut icon" href="favicon.ico文件地址" />

2.如果是动态的Gif（上传两个文件）

<link rel="shortcut icon" href="favicon.ico文件地址" / >
<link rel="icon" href="animated_favicon1.gif文件地址" type="image/gif" />

随机显示页首图片（Banner）

此Hack在每次刷新页面时随机显示页首的Banner，是不是很酷呢？这是Wordpress里一个默认的插件，现在我们也可以在Blogger beta里体验它了。

1.首先要备份你的模板，这是很重要的。另外你要为你的Blogger制作几张适合你的Blog的图片，并上传到一些图片服务器上。下面的以“Rounder4”这个模板为示例，不同的模板可能不同，因为有一些模板并没有Banner，或者位置不同，请做相应的修改。

2.先来看一下在CSS里定义Header背景的部分。这一部分不同的模板可能不同。

#header {
background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

3.我们要做的就是用脚本重写background url，把下面的代码<body>之后。

<script type="text/javascript">
var banner= new Array()

banner[0]="图片地址1"
banner[1]="图片地址2"
banner[2]="图片地址3"
banner[3]="图片地址4"
banner[4]=“图片地址5”

var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

4.自定义部分。注意用红色标出的数字，如果你有N张图片，那么红色数字应该为N-1。比如这儿有5张图片，那么值为4。

5.一些补充。Blogger beta中头部CSS中以Header-wrapper来定义其样式，默认它有一个角，所以鱼把Header-wrapper去掉了，这样更和谐一些，如果你的图片比较大，可以用Height属性来定义头部的高度。如鱼用的：

#header{
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif%22) no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
height:200px; }

最近好像Blogger服务器非常不稳定，经常不容易保存模板。

增加滚动条

<div style="overflow:auto; height:300px; width:400px">
<table cellpadding="0" cellspacing="0" style="width:250px;">
<tr>
<td> 文字部分</td>
</tr>
</table>
</div>

下拉菜单形式的标签

以前的Blogger中我们用标签的形式显示存档，现在我们要把标签变成下拉菜单。

找到以下代码：
<b:widget id='Label1' 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'>
<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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
将红色部分替换成下面的代码：
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

首字下沉

这个功能似乎不太常用，而且用起来也比较麻烦。看到有人也用到这个小小的修饰，所以也写在这里。

1.在CSS里定义首字的形式。可以自定义font-size(字体大小)，color（颜色）,line-height（行高）.

.dropcaps { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

2.用的时候把第一个字用<span>包围起来，如<span class="dropcaps">示例</span>