Whenever I say...

Remember to give me a LIKE @ my FaceBook Page, TQ!

~ ♫ ~

:: 我喜欢。雨天。23/04/12

:: 我的第一本插画电子书 ~《星星不见了》, 已经出街了,APPLE APP 形式下载。
LIKE我设在FB的专页!
谢谢你们!:) 12/11/12

:: Apple App download 星星不見了




4.6.09

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! 大致如此了!希望有兴趣的朋友们能够顺利取得你想要的效果喔!:)

9 comments:

green apple said...

hahaha~暂时是没有把它换成这个样子~
不过下次又这个念头的时候就可以来这里参考咯=P

你的教程都很容易懂^^

~harry~ said...

雖然還是有點不懂~
但比起每次看的..
也比較容易懂~

我會慢慢琢磨的~

Le-1502 said...

hahaha! 真棒~!我找这类说明找了很久了!但最头疼的竟然是我不晓得这个称为Navigation Button,所以找来找去都是徒然=.=~

幸好你有分享了!谢谢你哦,妮妮!有时间我得好好弄弄我的部落格,感觉我好像荒废那里很久了,没时间~:(

索拉 said...

鼓勵鼓勵

是我的話直接用 flash 算了,貪他省工 XD

妮妮 ♫ said...

peiqi,
我一直怕我啰嗦,越解释越复杂难懂!
哈哈!
看来还OK呢!
谢谢!
有需要才用,慢慢来吧!:)

Harry,
当你想弄的时候,
就会懂了!XD

Le,
哈哈!是吗?
那真好,帮到你了!:)
你在忙着当老板娘嘛!XD
生意怎样了?:)

Sora,
哦哦~
原来可以用flash的?
其实很多人都像我一样不太会Flash,
所以这种比较简单的html比较适合我们咯!
:)

Le-1502 said...

老板娘就不敢当,刚刚开始,都是朋友支持,创业不容易啊,尤其还要自创品牌~新的设计在进行中:P

我看我得学学如何制作flash,才可以在部落格上宣传~

祈颖 said...

谢谢教学!!!~

妮妮 ♫ said...

Le,
哈哈!
我也想当老板娘!
T.T

祈颖,
不客气!:)
也谢谢你留言说谢谢!啊哈!

Jess said...

wah...很 chim ler..对我这种电脑白痴,真的是一点都看不明白。。