誠如大家所見，我小修了一下我的部落格版型，以前的模樣實在是讓我覺得有點擁擠、紛亂，所以動了一下邊欄的位置，改了一下整體的色調。說實話CSS有時是很煩人工程，想說趁此機會分享一些小心得或收穫給廣大bloggers，大家不用像我一樣研究到腦筋打結、眼睛脫窗的地步。
話說在好久好久以前，我就肖想在邊欄有個像這樣的Tab View分類欄。
本想偷懶找個教學，卻遍尋不著......只能參考國外的文章，大部分居然都要扯到jQuery；我只不過是想加個有Tab讓我點來點去自爽的欄位啊！於是乎，是的。為了研究它，本身現在似乎有點鬥雞眼的症狀，畢竟哀家唸的是法律，程式語言不是我的母語(javascript、jQuery一類的語言)，年紀又有一小把了學習能力衰退得緊，學得來真可謂孝感動天了。 結果就在我的側欄，歡迎大家參觀；為了方便大家取用，少傷點腦細胞，把它整理成這段原始碼。只要按照以下步驟就可將它放進blogger部落格里囉!
<style type="text/css">
div.TabTampil div.TTs {height: 24px; overflow: hidden; } div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active { background-color: #669933; } div.TabTampil div.katedajay { clear: both; border: 1px solid #7a5; overflow: hidden; background-color: #ffffff;} div.TabTampil div.katedajay div.dajay { height: 100%; padding: 0px; overflow: hidden; } div.TabTampil div.katedajay div.dajay div.gaigai { padding: 3px 5px; } div.TabTampil div.TTs a { border-left:1px solid #669933; border-right:1px solid #669933; border-top:1px solid #669933; border-bottom:0px solid #669933; float: left; display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #fff; } </style> <form action="tabtampil.html" method="get"> <div id="TabTampil" class="TabTampil"> <div style="width: 350px;" class="TTs"> <a>我是Tab</a> <a>我也是Tab</a> <a>我還是Tab</a></div> <div style="width: 330px; height: 300px;" class="katedajay"> <div class="dajay"> <div class="gaigai"> 這裡填[我是Tab]要顯示的內容 </div> </div> <div class="dajay"> <div class="gaigai"> 這裡填[我也是Tab]要顯示的內容 </div> </div> <div class="dajay"> <div class="gaigai"> 這裡填[我還是Tab]要顯示的內容 </div> </div> </div> </div></form> <script style="text/javascript" src="http://katejane12.googlepages.com/katejscriptab.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
夠簡單吧! 其他的文字應填入區等等細項，都標明在原始碼裡囉!方便大家直接編輯，當然也可以修改成符合自己版型的配色。 最後，容我發個小牢騷，本部落格歡迎各種不同想法的言論；因為本人以為，真理會越辯越明。但是，嚴禁匿名攻訐，光明點、磊落點，好嗎?
話說在好久好久以前，我就肖想在邊欄有個像這樣的Tab View分類欄。
本想偷懶找個教學，卻遍尋不著......只能參考國外的文章，大部分居然都要扯到jQuery；我只不過是想加個有Tab讓我點來點去
1.到Blogger的控制頁面(後台)
2.選擇「版面配置」->「網頁元素」
3.點選「新增小工具」，會跳出可選用的小工具清單
4.點選「 HTML/JavaScript」，按下滑鼠左鍵，進入設定畫面
5.複製以下程式碼貼入
<style type="text/css">
div.TabTampil div.TTs {height: 24px; overflow: hidden; } div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active { background-color: #669933; } div.TabTampil div.katedajay { clear: both; border: 1px solid #7a5; overflow: hidden; background-color: #ffffff;} div.TabTampil div.katedajay div.dajay { height: 100%; padding: 0px; overflow: hidden; } div.TabTampil div.katedajay div.dajay div.gaigai { padding: 3px 5px; } div.TabTampil div.TTs a { border-left:1px solid #669933; border-right:1px solid #669933; border-top:1px solid #669933; border-bottom:0px solid #669933; float: left; display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #fff; } </style> <form action="tabtampil.html" method="get"> <div id="TabTampil" class="TabTampil"> <div style="width: 350px;" class="TTs"> <a>我是Tab</a> <a>我也是Tab</a> <a>我還是Tab</a></div> <div style="width: 330px; height: 300px;" class="katedajay"> <div class="dajay"> <div class="gaigai"> 這裡填[我是Tab]要顯示的內容 </div> </div> <div class="dajay"> <div class="gaigai"> 這裡填[我也是Tab]要顯示的內容 </div> </div> <div class="dajay"> <div class="gaigai"> 這裡填[我還是Tab]要顯示的內容 </div> </div> </div> </div></form> <script style="text/javascript" src="http://katejane12.googlepages.com/katejscriptab.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
夠簡單吧! 其他的文字應填入區等等細項，都標明在原始碼裡囉!方便大家直接編輯，當然也可以修改成符合自己版型的配色。 最後，容我發個小牢騷，本部落格歡迎各種不同想法的言論；因為本人以為，真理會越辯越明。但是，嚴禁匿名攻訐，光明點、磊落點，好嗎?
全站熱搜
留言列表
