色彩斑斓

带有按钮效果的图片或链接

当你的鼠标移过本站的链接，尤其是图片的时候你会发现，链接（图片）会有少许的位移，就像按钮被按下的效果。我们知道CSS中有一个事件是a:hover，它用来定义鼠标经过链接时所发生的效果，我们定义当鼠标经过时，将链接向下、向右各移一个像素，那么当鼠标经过的时候的效果看起来就像按钮被按下了。
如果想单独让某一个链接出现这样的效果，我们可以用Span来设定某一个特定的链接
1.在CSS中添加以下定义，“pushbutton”是唯一的ID，可以自定义，只要不与模板中其它ID重复。
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}

2.在链接上添加Span，例如：＜span class="pushbutton"＞＜a href="url"＞＜img src="imagesource"/＞＜/a＞＜/span＞

如果我们要让整个模板中的链接都实现这样的效果，可以在模板中所有出现a:hover　的地方添加属性：position: relative; top: 1px; left: 1px;

Blogger V3.0：标签Widget

针对标签的Hack恐怕是Blogger中最多的了吧，如以前的将标签变为导航栏，以下拉菜单展示标签等。这一次我们要做一个Widget，读者可以选择自己喜欢的标签形式。一共有三种样式，Blogger默认、菜单、放大类型。

Step0:备份模板。
Step1:如果你已经添加了标签，请在Page Elements里将它先去除。然后Edit Html（无须展开Widget），找到Label区域，会看到类似代码：<b:section class='sidebar' id='sidebar' preferred='yes'>
将下面的代码复制/粘贴到上面的代码之后：

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<h2>Multi-style Labels</h2><br/>

<a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'>

<img src='http://sunrrr.googlepages.com/list.jpg'/></a>

<a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>

<img src='http://sunrrr.googlepages.com/menu.jpg'/></a>

<a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>

<img src='http://sunrrr.googlepages.com/zoom.jpg'/></a>

<b><a href=''></a></b><br/><br/>

obj = document.getElementById('LabelDisplay');

obj.innerHTML = display;

}

function menuStyle() {

var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";

<b:loop values='data:labels' var='label'>

display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";

</b:loop>

display = display + "</select>";

obj = document.getElementById('LabelDisplay');

obj.innerHTML = display;

}

function linkStyle() {

var display = "<ul>";

<b:loop values='data:labels' var='label'>

display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";

</b:loop>

display = display + "</ul>";

obj = document.getElementById('LabelDisplay');

obj.innerHTML = display;

}

// set default to zoom style

zoomStyle();

</script>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

另外你也可以单独添加Zoom类型的标签，需要以下代码：

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<h2>Labels</h2><br/>

<div class='widget-content'>

<script language='javascript' type='text/javascript'>

var max = 0;

var min = 10000;

<b:loop values='data:labels' var='label'>

if (<data:label.count/> > max)

max = <data:label.count/>;

if (<data:label.count/> < min)

min = <data:label.count/>;

</b:loop>

var display = "";

<b:loop values='data:labels' var='label'>

var delta = <data:label.count/> - min;

var size = 100 + (delta * 100) / (max - min);

document.write("<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>");

</b:loop>

obj = document.getElementById('LabelDisplay');

obj.innerHTML = display;

</script>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

其中用到的三张图片请自己下载保存，并修改代码中的地址
http://sunrrr.googlepages.com/list.jpg
http://sunrrr.googlepages.com/zoom.jpg
http://sunrrr.googlepages.com/menu.jpg

Blogger V3.0:添加标签云

相信这是很多人期待的功能吧。以前用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>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 = "<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])

}

}

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

Blogger V3.0：Angel Or Evil模板

Hans又把Angel Or Evil这个模板转换到Blogger beta中了。黑色跟白色的完美结合，看起来比较喜欢。昨晚上修改模板一直到四点多才睡，现在又要忍不住想换了，嘿嘿。用了几个小时的时间终于把Underwater整得有点Web 2.0的味道啦，你还喜欢吗？补充一下，这个模板已经添加了大多数Hack，省下修改代码了。

预览Angel or Evil（下载）

同样因为网站被封，你需要下载这个JS文件并上传以替换模板中的地址
http://sunrrr.googlepages.com/hackosphere.js

色彩斑斓

带有按钮效果的图片或链接

Blogger V3.0：标签Widget

Blogger V3.0:添加标签云

Blogger V3.0：Angel Or Evil模板

存档

链接