Blogger側邊欄開關小工具

4月 06, 2009 作品 , Blogger 12 Comments Edit Copy Download

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

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

程式碼下載

jQuery：你可以在官方網站找到最新版本，或著下載布丁的備份(1.2.6)。
puliBloggerSidebarControl.js：側邊欄開關小工具。

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

安裝方法

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

Step.2 新增「HTML/JavaScript」

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

Step.3 在內容新增程式碼

程式碼的內文如下：

<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 >」應該已經出來囉！