:::

Blogger側邊欄開關小工具

4月 06, 2009 , 12 Comments Edit Copy Download

image

看來的確有人注意到我的Blogger右上角有個「Sidebar」控制的功能,這可以控制右邊側邊欄的大小,搭配jQuery的動畫效果,呈現的效果其實還蠻有趣的。(只是在IE6中動畫效果並不明顯)

由於網友Gooda的詢問,我特別把這功能獨立出來並改寫成較容易操作的方式,分享給各位Blogger的玩家使用。

程式碼下載

下面的快速安裝當中是使用了我架在Google Page Creator的程式,如果你需要的話,歡迎大家自行下載、修改並使用。


安裝方法

Step.1 進入Blogger管理介面的「版面配置」,點選下方的「新增小工具」

image 

Step.2 新增「HTML/JavaScript」

image

按下右上角的「+」就可以進入編輯畫面。

Step.3 在內容新增程式碼

image

程式碼的內文如下:

<script src="http://puddingchen.35.googlepages.com/jquery.js" type="text/javascript"> </script>
<script type="text/javascript">
jQuery.getScript("http://puddingchen.35.googlepages.com/puliBloggerSidebarControl.js", function () {
	pBS = puliBloggerSidebar();
	pBS.styleController = "cursor:default;float:right;font-size: 10pt;font-weight:normal;margin-right:1em;margin-top:15px;";	//定義控制按鈕的格式
	pBS.styleA = "font-weight:blog;";	//定義左右按鈕的格式
	pBS.textLeft = " &lt; Side";	//定義左文字的內容
	pBS.textCenter = "";	//定義中間文字的內容
	pBS.textRight = "bar &gt; ";	//定義右文字的內容
	pBS.setup();
});
</script>

如果你之前已經引用了jQuery,那麼你可以省略掉第一行的「<script src="http://puddingchen.35.googlepages.com/jquery.js" type="text/javascript"> </script> 」部份。

注意到裡面有些屬性設定,包括CSS與內文的部份。如果你對於呈現出來的導覽列控制按鈕的樣式不太滿意,稍後你可以回來修改這邊屬性的內容。

標題留空無所謂,完成之後按下右下角的「儲存」。

Step.4 看看你的網誌,「< Sidebar >」應該已經出來囉!

image

點點看能不能順利運作吧!

總共12 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 哇~布丁大大~我的名字在上面耶!
    哈哈哈~感謝你的說明唷!

    幫助非常大!
    感謝感謝~

    回覆刪除
  2. 哇哈哈,如果覺得害羞的話我可以幫你遮起來喔~XD

    回覆刪除
  3. 很棒的功能,感謝分享

    回覆刪除
  4. 請問進入文章時可以預設成sidebar是顯示狀態

    回覆刪除
  5. 我指的是右側工具列可預設成顯示按了才會隱藏

    回覆刪除
  6. re: kimihu

    要修改程式內文!
    因為最近比較忙,等我有空的時候再來作這個版本吧。

    回覆刪除
  7. sider bar怎麼好像有兩個部份?
    點左邊的部份兩次..連內容都不見了 XD

    回覆刪除
  8. > 阿達猴

    你沒看錯,的確有兩個部份,功能是中界線的左移跟右移。
    導覽列可以有三種寬度:隱藏(中界線最右邊)、普通(中界線再中間偏右)、全開(中界線移至最左邊)。

    當有人導覽列放太多東西時,可以利用導覽列全開的模式來瀏覽。

    這個不是Bug喔XD

    回覆刪除
  9. 新的官方版面不能用嗎?
    試了一下 沒有反應

    回覆刪除
  10. 啊,如果是三欄版面的話,我就不確定能不能用了orz

    回覆刪除