Lawrence 家庭部落: 部落格應用

顯示具有 部落格應用 標籤的文章。顯示所有文章

2010年10月23日星期六

[+/-] : 2007.4.20 如何將你的 Label (分類文章) 做成 Tabs (標籤)

細心的網友們一定發現到筆者的 blog 在背景標題下方多了一長列的 Tabs,每個 Tab 都代表了 blog 裡的一個分類文章或是快速連結。原來是小弟又從《 Josh's Note 》此blog裡挖到寶,發現了這篇《-- 如何將你的Label做成Tabs --》和《髮染頭蝨治療手冊》此blog裡的這篇《-- 用CSS製作分頁 --》,發覺到還蠻有意思的,所以做個整理 post 上來。

有以下的步驟：
1.先在範本 -> 修改HTML（點選“展開小裝置範本”）找到這一行:

b:section class='header' id='header' maxwidgets='1' showaddelement='no'

其中"maxwidgets"代表這個"section"能放多少個 "widget"，而 "showaddelement" 表示是否要在此 "section" 中顯示 [新增網頁元素]的連結。所以將 maxwidgets 至少改為2，showaddelement 改為yes,如下:

b:section class='header' id='header' maxwidgets='2' showaddelement='yes'

2.準備好CSS程式碼:
樣本可以在《 Free CSS Navigation Menu 》找到，有11種樣式，「按右鍵、檢視原始檔」來挑選，筆者以TabsJ 為例：

/*- Menu Tabs J--------------------------- */

    #tabsJ {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
   border-bottom:1px solid #24618E;
      }
    #tabsJ ul {
   margin:0;
   padding:10px 10px 0 50px;
   list-style:none;
      }
    #tabsJ li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsJ a {
      float:left;
      background:url("http://exploding-boy.com/images/cssmenus/tableftJ.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsJ a span {
      float:left;
      display:block;
      background:url("http://exploding-boy.com/images/cssmenus/tabrightJ.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsJ a span {float:none;}
    /* End IE5-Mac hack */
    #tabsJ a:hover span {
      color:#FFF;
      }
    #tabsJ a:hover {
      background-position:0% -42px;
      }
    #tabsJ a:hover span {
      background-position:100% -42px;
      }

請注意"紫色字"是背景圖片的位址，可自行下載並變更路徑或不變。

3.把步驟2 CSS這段程式碼貼到HTML裡下面這段程式碼結束的後面:

#header .description {
  display: block;
  margin: 0 14px;
  padding: 0 0 40px;
  line-height: 1.4em;
  font-size: 50%;
}

4.在HTML裡找到對應於步驟1那一行的結尾語法,也就是以下的:

/b:section>

5.將以下的程式碼貼在步驟4找到的那一行下面:

Tab網址,描述,名稱等部分可依需求自行修改把想要的 Label 或是 Link 做成 Tabs。

6.儲存好新的HTML,搞定收工 !! :) 如果朋友們有需要也可以直接檢視我的原始碼。或是留言討論喔 :-*

加入網路書籤:

文章連結:
《新增部落格互動聊天室》
《如何將你的 Label (分類文章) 做成 Tabs (標籤) 》
《部落格穿新衣囉》
《將發表的文章設置為預覽(Preview)或全文瀏覽(Full Post)模式》
《免費的相片月曆製作》
《製作宇倫的GIF合成動畫檔》
《製作單篇文章瀏覽計數器 part II 》
《製作單篇文章瀏覽計數器》
《免費計數器申請》
《製作Blog線上人數計數器》
《如何在此建立 Blogger~Step by Step 》

...
詳全文 read more

2007年4月17日星期二

[+/-] : 2007.4.17 部落格穿新衣囉

張貼者： Lawrence 於晚上8:18 0 請按一下發表留言

最近逛了很多網路上部落格達人的網站,對 blogspot 兩欄式的 layout 不是很滿意,因為所有的網頁元素都只能排在左邊,漏漏長的不好看,左找右找終於在《羊男實驗の咖啡館》此 blog 裡發現了由國人開發的《三欄式範本 BlackCat 2.0 FinalTune 》,只要將範本下載後,照著以下的步驟便立刻成功囉~~~ 8-)

套用方式說明：
1.記得先將自己原有的 HTML/JAVA widgets 備份在 Notepad,譬如說天氣預報、
參觀人數等等。
2.下載檔案後進入 Blogger 控制台，於「範本」編輯頁面當中進入「編輯 HTML」
頁面，選擇檔案上傳，即可套用完成。
3.如果上傳失敗，請用記事本 Notepad 直接開啟 XML 檔，全選、複製後貼入編輯
HTML 的頁面即可，之後按儲存即可。
4.如遇到系統要求確認刪除部分 widgets 請按確認即可。
5.將備份好的 widgets 語法重新加入新的三欄式blog,自由選擇要放左邊或右邊的
欄位。
6.搞定。

接著又發現某些達人的 blog 裡漏漏長的自建連結清單和文章分類竟也可以選擇延展/收合,相當實用的功能,於是乎在《 Josh's Note 》此blog裡發現了《「繼續閱讀懶人加強版」無腦安裝完成》這篇文章提供了一個 tool 讓 user 決定是否要在 blogspot 裡加入以下功能.這真是太神奇了 8-) ,因為其中的功能3. 表情符號和功能5. Sidebar 側邊網頁元素（折收/展開）就是小第一直在找的,沒想到不但有還多了這麼多的其他功能,看來真的還得再花些時間一個個玩看看囉.

功能如下:
1. 隱藏 Blogger NavBar（選擇浮動或完全隱藏）
2. 隱藏 widget
3. 表情符號
4. 繼續閱讀功能（阿土版和懶人版二選一）
5. Sidebar 側邊網頁元素（折收/展開）功能
6. 作者的回應高亮度顯示
7. 標籤雲 Label Cloud 功能
8. Sidebar 側邊網頁元素 Icon 圖示功能
9. 社群書籤功能（黑米預選，其餘自行選取）

以上兩位達人的 blog 推薦給各位,可以多去逛逛吸收新知識喔 ~~~ :p