Tutorial: Navigation Button/Link

很久没有分享Tutorial了！
其中一个原因是真的很麻烦，要print screen又要做一些归类和edit.... =.=!!
还有其实有很多方法网络上面都有简易的教程，而我只不过是充当翻译和简化步骤而已！

上一回要post那个bar to insert sticker code的tutorial.
当我花了很长一段时间做好后，却显示不出来。html码的问题，post上来后完全看不到code. 懊恼！
所以之后，我就有点意兴阑珊了...... 气！！！

OK! 言归正传！
这次是关于Navigation Button的Tutorial, 何谓Navigation Button呢？就是这个啦~
你可以自行放有关你自己讯息的link，这样子你的部落格看起来就比较像是个人网站。
（这里教的是简单的Navigation Button, 花俏的我还不会！XD)

这里有个重点，
就是你必须先在Edit Template里加入一个新的code, 然后才在Layout加上一个HTML/JavaScript的Gadget.
次序决不能颠倒！！！

1. Layout - Edit html - Edit Template

在<b:skin> 和 </b:skin> 之间加入以下的code.
（可用ctrl+F寻找<b:skin> 的所在！）

a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #5d5d54;
text-decoration: none;
}


其中，颜色码的分配:
这里有个Color Calculator用以截取你想要的颜色。


2. 好了之后，记得要Save你的Template.


3. 在你的Layout add一个HTML/JavaScript的box. 放在Header之下！

Paste入以下的html code:

<a class="navigation" href="http://your-link-url.blogspot.com">Your link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your second link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your third link</a>


在上面的网址里替换你要的link address, 在Your Link里替换你想要显示的link text.

如果你有超过4，5个Navigation Button, 那就依上述的code继续追加，与此类推......

参考网站：http://www.bloggerbuster.com/2007/10/create-navigation-buttons-for-your-blog.html

OK! 大致如此了！希望有兴趣的朋友们能够顺利取得你想要的效果喔！:)