班門弄府

標題下的很聳動 實際上各位看官卻看不懂
以pixnet為例 我們隨機套用各種"樣式"會發現

所有應該在側邊的欄位都乖乖待在側邊
然後按照在管理後台所設定的順序
一項接著一項往下面排(廢話 不然要怎麼排)
聽起來很有道理 也很直觀

可是側邊欄位太多了
有些還是兩行就要佔一格感覺很礙眼
但是移除又感覺不對勁

這時候提供大家一個方法

以我的blog為例
參觀人氣跟文章搜尋這兩個欄位
被我移到blog右上方的圖片上面了 (驚!?)

嚇到了吧! 好像大多數的blog樣式表都沒有這樣改的

想學就繼續往下看

在pixnet中的HTML是被寫死的
能做的部分頂多是改改欄位的順序
但是所有側邊欄位都具有自己個別的識別元
也就是每個側邊欄位都有自己的名字 (廢話)

這名字當然不是你們看到在上方的中文名字
而是放在網頁裡面的樣式表
識別元的特色是在整份HTML文件中只能使用一次
在樣式表中則用#開頭作為區分

來到管理後台的樣式設計精靈
打開原始碼編輯

找到#search 與 #counter

首先先將上面的標題欄位去除 (不想去除的可以留著)
加上這一段

#search h4{
    display:none;
    }

再將整的側邊欄位移到定位

#search{
    position:absolute;
    top:230px;
    right:10px;
    z-index:5009;
    }

其中position:absolute是將此欄位脫離側邊欄位的重要設定
而top:230px及right:10px則分別是指靠上方230px及靠右方10px
當然也可以將寫成left:10px或是bottom:230px
z-index則是指他所在的層次 如果發現找不到 也可以設定為10000

這樣就會發現
側邊欄位都不側邊欄位了
當然 若是位置看起來不爽
請自行修改位置即可

人氣的部分也依樣畫葫蘆

#counter h4{
    display:none;
    }
#counter{
    position:absolute;
    top:195px;
    right:10px;
    z-index:5010;
    }

Good 全部都移到正上方了耶~

要移動其他的東西 若不知道代碼 請參考架構圖

P.S. 在管理後台的側邊欄位設定中的位置就不重要 不管放在哪裡都會移到那裏