怎么给站点加入上下卷轴的公布栏（文章）

怎么（如何）打造漂亮blogspot模板教学课程系列专辑

怎么给站点加入上下卷轴的公布栏（文章）

blogspot的博客一般都很简单，怎么能丰富内容呢？

推荐一个方法，给你的站点 做一个公布栏（原是使文章有上下卷轴）例如下图：



打开布局 选页面设置，添加小工具，选html后添加以下代码：

<div style="border:2px solid #1AC300;background-color:#ffffcc;padding:5px;height:160px; width:95%; overflow:auto;">
填写你的链接文字及图片
</div>


注意文章中也可以

一用法:
(替換語法時，注意style=""中的內容，每一部分用"分號 ;"隔開，接著空一格。)

1.當"內容區域"大於"顯示區域"時，可利用捲軸讓看見超出範圍的內容。利用滑

鼠游標調整"顯示區域"，滑鼠游標點選捲軸，會變成可調整大小的狀態，可隨

心所欲的調整大小，語法中的width和height也會隨著變。

PS:去除width:10px的元素，寬會自動擴展到最大。


2.語法( OVERFLOW: scroll )為顯示右方和下方捲軸。整個還可以分別替換成

★( OVERFLOW: auto ) : "內容區域"大於"顯示區域"會自動顯示捲軸，建議使用。

★( OVERFLOW: scroll; OVERFLOW-X: hidden ): 刪除水平→捲軸。

★( OVERFLOW: scroll; OVERFLOW-Y: hidden ): 刪除垂直↑捲軸。

★( OVERFLOW: hidden) : 不使用捲軸。



3.語法( background-color: #996600 )為框框內的背景顏色，#996600 部分為16進位顏

色碼(?)，可在查詢 4096 Color Wheel ，記得要加上"#"。

PS.整段刪除，背景變成透明狀態。




二.為捲軸加外框

基礎語法(見上面1.基本捲軸)中，在style="__"中，在__的地方加入( BORDER: #ff0000 5px dotted )，

加入後，切換編輯列上""(?點我)兩次後，在回到"模式"(?點我)中就會
見到，( BORDER: #ff0000 5px dotted )被拆成四部份分別BORDER-RIGHT(右邊框)，BORDER-TOP(上邊框)，BORDER-LEFT(左邊框)， BORDER-BOTTOM(底邊框)變成
(BORDER-RIGHT: #ff0000 5px dotted;
BORDER-TOP: #ff0000 5px dotted;
BORDER-LEFT: #ff0000 5px dotted;
BORDER-BOTTOM: #ff0000 5px dotted )。

用法:
(BORDER: #ff0000 5px dotted)或(BORDER-RIGHT: #ff0000 5px dotted; BORDER-TOP: #ff0000 5px dotted; BORDER-LEFT: #ff0000 5px dotted; BORDER-BOTTOM: #ff0000 5px dotted )都有共同結構，分析如下:

( BORDER: #ff0000 5px dotted )

★(#ff0000)框的顏色，#996600 部分為16進位顏色碼(?)，可在查詢
4096 Color Wheel ，記得要加上"#"，依框的屬性上下左右可調整不同顏色。
★(5px):框的大小,數字越大，框就越粗。0為無框。

★(dotted):框的類型，(dotted)為"點"的型態，可替換其他的有 實線:( solid )，

虛線:( dashed )，立體內凸框:(groove)，立體浮凸框: (ridge)，

雙實線: (double)，凹框: ( inset)，凸框: (outset)，依框的屬性可調整上下左

右使用不同屬性的框。


三.為捲軸調色:

■( SCROLLBAR-FACE-COLOR: )拖曳棒與按鈕表面顏色。

■( SCROLLBAR-HIGHLIGHT-COLOR: )捲軸與按鈕四周內邊框左上

立體亮面的顏色。

■( SCROLLBAR-SHADOW-COLOR: )捲軸與按鈕四周內邊框右下立

體暗面的顏色。

■( SCROLLBAR-3DLIGHT-COLOR: )捲軸與按鈕四周外邊邊框左上

立體亮面的顏色。
■( SCROLLBAR-ARROW-COLOR: )按鈕箭頭▲▼顏色。

■( SCROLLBAR-TRACK-COLOR: )捲軸軌道的顏色。

■( SCROLLBAR-DARKSHADOW-COLOR: )捲軸與按鈕四周外

邊框右下立體暗面的顏色。

■( SCROLLBAR-BASE-COLOR: )捲軸整體的顏色，單獨使用效果

比較明顯。


以上的語法後面加上(#777777)為16進位顏色碼(?)，可在查詢 4096 Color Wheel ，

記得要加上"#"


四.變化應用:
1.左側拖曳棒

<DIV style="OVERFLOW: scroll; DIRECTION: rtl; HEIGHT: 60px; BACKGROUND-COLOR: #996600">
<DIV style="DIRECTION: ltr" align=left>添加文字图片链接</DIV></DIV>

2.隱形的捲軸(只看的見按鈕箭頭▲▼)

<DIV style="SCROLLBAR-FACE-COLOR: #996600; SCROLLBAR-HIGHLIGHT-COLOR: #996600; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: #996600; SCROLLBAR-3DLIGHT-COLOR: #996600; SCROLLBAR-TRACK-COLOR: #996600; SCROLLBAR-DARKSHADOW-COLOR: #996600; HEIGHT: 60px; SCROLLBAR-ARROW-COLOR:#FF0000; BACKGROUND-COLOR: #996600">添加文字图片链接</DIV>

3.透明的捲軸

<DIV style="FILTER: Chroma(Color=green); HEIGHT: 1px">
<DIV style="SCROLLBAR-FACE-COLOR: green; SCROLLBAR-HIGHLIGHT-COLOR: red; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: green; SCROLLBAR-3DLIGHT-COLOR: green; SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-DARKSHADOW-COLOR: red; HEIGHT: 60px; BACKGROUND-COLOR: #996600">添加文字图片链接</DIV></DIV>

4.發光的捲軸

<DIV style="FILTER: Chroma(Color=green)glow(color:6666ff,Strength=6); HEIGHT: 1px">
<DIV style="SCROLLBAR-FACE-COLOR: green; SCROLLBAR-HIGHLIGHT-COLOR: red; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: green; SCROLLBAR-3DLIGHT-COLOR: green; SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-DARKSHADOW-COLOR: red; HEIGHT: 60px; BACKGROUND-COLOR: #996600">添加文字图片链接</DIV></DIV>

5.加上背景的捲軸

★背景不跟捲軸移動

<TABLE width="100%" background=背景圖片連結><TBODY><TR><TD vAlign=top align=left><DIV style="OVERFLOW: auto; HEIGHT: 60px">添加文字图片链接</DIV></TD></TR></TBODY></TABLE>

★背景跟卷軸移動

<DIV style="OVERFLOW: auto; HEIGHT: 60px"><TABLE width="100%" background=背景圖片連結><TBODY><TR><TD vAlign=top align=left>添加文字图片链接</TD></TR></TBODY></TABLE></DIV>

好了，快去添加吧

参考来源
http://lucky-super-man.spaces.live.com/Blog/cns!4805CDF99BC60F1E!129.entry