• Work Team


    奕捷創意(股)公司 EJ-Idea Inc.

    奕捷創意(股)公司 EJ-Idea Inc. 專精 iPhone, iPad , Android 行動平板應用程式開發,亦與多家出版社及 e-Learning 廠商與廣告公司合作,開發出許多手機與平板應用,互動式電子童書,平面電子型錄等等。2011 年開始結合 WordPress 平台創作出更多精采作品!
    了解更多……

  • 版權宣告


    網摘、引用、連結,不轉載

    Creative Commons License
    姓名標示您必須保留原作姓名標示
    非商業性您不得為商業使用本著作
    禁止改作您不得改變或改作本著作

  • 最新評論

  • 這裡│版面調整.新增Tab Pane效果

     這幾天有來這裡的朋友,如果細心的話應該會發現我一點一點的細修這裡的版型吧^_*

     截至目前為止做了最大的變化是增加了 Tab Pane 這個頁籤bar的效果,可以將整個版面變得更清爽,有許多小東西都可以收納起來,只在你有需要的時候再點選開來看。不知道大家對於這樣的改變有什麼感覺呢?喜歡、或不喜歡!?可以在此文留言回應喔^O^

     現在就將我做的調整一一記錄於下:

     Update→ 2007/09/05 am09:59 更換favicon.ico圖,大家可以看看網址列的小圖變囉^_*

    01. 撤換掉右上方的AdSense for Search,改成Google Ajax Search的WP插件,大家可以試著搜尋站內文章,就能知道搜尋結果以何種樣貌呈現喔!

     02. 將首頁的《關於我》改設為只在首頁和分頁顯示,其他頁面不顯示;《分頁》部份則改設為單篇頁面不顯示,其他頁面皆顯示。這兩部位原本是所有頁面都顯示的,但單篇頁面我想凸顯文章的各項資訊,於是就做了更動囉~

     03. 接著就是最大的改變─ ─ Tab Pane 的JS效果,相信大家一看就知道和原來的版面最大的不同在哪兒,所以這裡我就不贅言了。

     或許你會納悶,原本剛換Theme的時候不就已經很好看了,為甚麼還要多加這個JS效果呢?但其實是因為我想擺設的小東西太多,雖然版面是三欄的,可是如果擺上許多小玩意,那版面還是太過雜亂的,再加上我從很久以前在hhalloyy那裡看到他的介紹,就非常驚豔這種效果,所以就趁著這次機會一併加上囉:)

     好啦,雖然hhalloyy和ED都曾介紹過這個效果,但既然我提到了它,也就不能免俗的為大家做個簡介囉,現在就來告訴大家這個名為Tab Pane 的JS效果該如何加載於個人網頁或部落格吧,前提是你是自架網站或部落格的,一般BSP無法達成喔!

     我以下所講述的是專門給WP使用者看的,如果你是其他平台(MT、LT……)或個人網站使用者,就請你觀看原作者的使用說明囉!

     首先當然就是先下載這個JS元件啦~ 請按此下載,或是直接去原作者網頁自行下載。

     接著請你把下載回來的元件壓縮檔解壓、並以ftp上傳至你的主機空間或是個人網頁空間,請記得要放在WP安裝目錄的wp-content\themes裏喔,然後把你現在所使用的Theme的header.php檔找出來,在之前加上以下程式碼↓

     記得把「src」和「href」之後的部份換成你這兩個檔案實際的存放路徑(URL),雖然hhalloyy說為了怕你在更換主機商或是網頁空間之後出錯,還得回頭修改,所以他推薦把這兩個部位改成http://blogs.carrielis.com/-content//sop2

     不過我在用了這個方法之後,反而無法顯示效果,所以我還是以存放路徑的URL做替換,你們可以自己試試看~

     再來請你把以下程式碼放在你想添加 Tab Pane 的JS效果的地方,我是放在sidebar的地方。

    General


    This is text of tab 1. This is text of tab 1.
    This is text of tab 1. This is text of tab 1.

    Privacy


    This is text of tab 2. This is text of tab 2.
    This is text of tab 2. This is text of tab 2.

     這段程式碼你要修改的地方只有

    之間的部分,那裡填上你要使用的標題名稱。

     至於This is text of tab 2. This is text of tab 2.這段,則改成你想在 Tab Pane 顯示的內容,如果你想多加Tab,那就多加程式碼,不過要記得按次序加入喔!


     文by覺非/不斷的修改是為了越來越好啊~

    【歷史上的今天】
    相關文章外掛 for WordPress, Blogger...
    本文目前有 4 則回應
    1. 小史啊,寬度?這個版面會依據觀看者的螢幕寬度自動調整所視大小耶~
      (就是因為這樣,所以我當初才會選用這個新的Theme,呵呵,我是懶人啦:P)

      所以我不知道要修改哪裏,請問一下你的螢幕寬度多少?因為我的筆電也是寬螢幕的,並無橫向捲軸的情形產生呢!我的螢幕解析度為1280×768,你的是多少呢?

    2. 非也改版了耶,真好 :)
      不過寬度是不是要再修正一下…
      因為我用寬螢幕,看了還是有橫捲軸耶,
      如果是用百分比設定,那看文章區要不要再減小一點@@"

    3. 呵呵~我只是比較龜毛,想要把新的版面做到最符合自己的需求罷了,你的部落格版面比我還常換啊,怎會說荒廢呢^_*

    4. 真的很用心的經營,很棒喔。
      向我自己都荒廢很久喔,哈哈。