Dribs & Drabs
台灣旅遊 Taiwan
設計 Design
其他 Others
這次教學是利用痞客邦開放的自訂區塊,撰寫HTML與CSS來達到目的
這技巧很實用喔!學會了就可以來點綴你的部落格,讓部落格跟別人與眾不同 😀
先用圖片讓大家瞭解一下這次要學的東西,除了這些還可以做出很多變化,剩下就靠大家的創意了!
(0) 先前提要
本篇教學給有一點HTML基礎與CSS基礎的人參考
有些人套用後連結出現的位置不太對,這跟你套用的版面語法有關,需要重新檢視上層CSS語法是否有衝突
(1) 痞客邦 – 使用者自訂語法
目前有四個地方可以讓使用者自行發揮,側欄元件、公告區塊、頁尾描述、部落格描述
前三個都在”後台 > 側邊欄位設定”,第四個在”後台 > 基本/進階設定”
這四個地方皆可放入HTML與JavaScript語法
但套用本站樣式的朋友,不建議把語法放至側欄元件中,因為之後還要清空側欄定義的屬性,會較麻煩
所以以下的教學比較建議放至公告區塊、頁尾描述、部落格描述
放至公告區塊、頁尾描述的要記得把它開啟喔!
(2) 自訂連結區塊 – HTML
這部分的語法放至(1)所說的地方
首先用div定義一個區塊,裡面放置想要的內容,語法如下,範例為一個簡單的超連結
<div id=”MyBlog”>
<span id=”title”>部落格</span>
<a target=”_blank” href=”https://www.dribs-drabs.com/blog”>Dribs & Drabs</a>
</div>
重要的是id=”MyBlog”,之後利用CSS定義它的位置與外觀,MyBlog不要與痞客邦現有的標籤名稱重複
接下來存檔後至部落格重新整理,會在所放置的地方看到”部落格Dribs & Drabs”的字樣
(3) 自訂連結區塊 – CSS
接下來就是關鍵了,這部分語法放至”後台>自訂樣式>CSS原始碼編輯”裡
#MyBlog{
position: fixed; /*固定在網頁上不隨卷軸移動,若要隨卷軸移動用absolute*/
top: 50%; /*設置垂直位置*/
right: -100px; /*設置水平位置,依所放的內容多寡需要自行手動調整*/
background: #ffffff; /*背景顏色*/
padding: 10px 20px;
border-radius: 10px; /*圓角*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#MyBlog:hover{ /*當滑鼠移至此區塊時,伸縮區塊*/
right: -10px;
}
#MyBlog #title{
padding-right: 5px; /*讓標題與連結中間有空隙*/
}
其他的就自行美化囉!概念大致上就是這樣,應該算簡單吧!
(4) 多個自訂連結區塊
以上的範例只有一個連結區塊,如果要放置多個獨立的連結區塊,像範例圖片那樣該如何修改呢?
其實就是複製多個(2-3)的語法,但是每一個連結區塊的id要不同,例如
<div id=”MyBlog_1″>…</div>
<div id=”MyBlog_2″>…</div>
<div id=”MyBlog_3″>…</div>
CSS的話也要跟著修改,並且要多定義一個margin-top這個屬性,例如
#MyBlog_1{margin-top: -50px;}
#MyBlog_2{margin-top: 0px;}
#MyBlog_3{margin-top: 50px;}
連結區塊就會照順序由上而下排列,不懂的人可以google一下margin的用法
Murmur…
感覺就是在寫網頁一樣,寫簡單的HTML加上用CSS美化
如果不習慣用語法寫HTML的可以去下載 Microsoft Office SharePoint Desinger 2007
此免費軟體可幫助使用者視覺化設計網頁,也可以寫較複雜的HTML
許多知名部落格上方有許多額外的連結,如FB、MAIL、PLURK、INSTRAM等也都可以用這方法喔
簡單說一下方法,就是放置多個連結然後用position: absolute;定義位置,放在橫幅的地方
另外可以看一下本部落格的”這裡&我”,也是利用這技巧達成的 (不過請不要抄襲)
♥ 部落格樣式 – 實用教學: https://www.dribs-drabs.com/blog/category/1358731