2010年7月12日 星期一

在部落格使用串聯貼紙、部落格小工具分頁

之前我在Facebook有看到「串聯貼紙」這樣東東,就稍微試玩看看~覺得蠻蠻有趣!乍看之下只是把同一張圖片複製到自己的Facebook上,但卻又一種精神存在......不知道要怎麼形容......
不過串聯貼紙這個活動不只侷限在Facebook,也有一般貼在自己的部落格的串聯貼紙網站喔,還可以追蹤這個貼紙有多少人串聯喔!
串聯貼紙 包含分頁
不過我這次只有先使用別人做好的貼紙串聯,貼在自己的部落格上,不過因為我現在的右側工具已經塞太多東西了,如果再加上幾張貼紙就更亂,可是我又想貼兩個以上的貼紙,所以我還找了有關分頁的JavaScript來搭配貼紙使用!(如圖)
我是有找到實做網頁頁籤的CODE,在自己電腦裡測試時,網頁頁籤的確有正常執行,但拿到Blogger後,這個特效就失效了......一直只顯示第一個貼紙,沒辦法變換~後來我把已經貼在Blogger的CODE與原先在本機電腦理測試得CODE比對後發現:有些CODE貼在Blogger後,HTML的部分會自動把大寫轉成小寫,而JavaScript的部分不會轉,導致HTML使用的自訂函數與JavaScript不符而沒辦法連接到後面JavaScript那一段的部分(大小寫有差),就沒辦法執行,所以我的解決方法就是全部把函數名稱改為小寫就好了!
要使用串聯貼紙的話,到StickerAction這個網站→按下貼紙列表→尋找想貼上去的貼紙→點進去之後會得到CODE貼紙語法,把他複製起來→貼在自己的部落格想貼上去的位置就完成了!
如果有人和我一樣的困擾,想貼超過一張的貼紙,又不希望貼紙太多而把貼紙區塊拉的那麼長,那可以照著以下方法,粗體紅字的是要隨自己的需求而修改的粗體紫色字的是第一個要用display: block,其他都是display: none深綠色的是如果同一個網頁裡要擺第二組分頁的話,要把相對應的變數都要改變頁籤的特效當然不只是能用在貼紙喔!
(CODE提供:[Javascript] 利用Javascript實作網頁頁籤(Tab),以下提供的是我有因應Blogger會把大寫轉小寫的問題而修改過的CODE!)
<div id="webtab">
<a href='#' onmouseover='mouseovertab("0")'>1</a>
<a href='#' onmouseover='mouseovertab("1")'>2</a>
<a href='#' onmouseover='mouseovertab("2")'>3</a>
<div id='g2div0' style="display: block" class="tab">
★第一個貼紙語法放置處!!!
</div>
<div id='g2div1' style="display: none" class="tab">
★第二個貼紙語法放置處!!!
</div>
<div id='g2div2' style="display: none" class="tab">
★第三個貼紙語法放置處!!!
</div>
</div>
<script type="text/javascript">
function mouseovertab(Index)
{
var child = document.getElementById("webtab").getElementsByTagName("div");
for (var i=0;i<child.length;i++)
{
child[i].style.display="none";
}
document.getElementById("g2div"+Index).style.display="block";
}
</script>


2010/7/14補充:剛剛才發現我有個地方少標粗紅色字,已修正!如果發現我的網誌內容有問題的話,歡迎回應告知!
2012/8/7補充:已經在範例code的地方再標上更多顏色方便區分