教學 | HTML + CSS 加入浮動式自訂連結區塊

 01

這次教學是利用痞客邦開放的自訂區塊,撰寫HTML與CSS來達到目的

這技巧很實用喔!學會了就可以來點綴你的部落格,讓部落格跟別人與眾不同 😀

先用圖片讓大家瞭解一下這次要學的東西,除了這些還可以做出很多變化,剩下就靠大家的創意了!

02




(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) 多個自訂連結區塊

以上的範例只有一個連結區塊,如果要放置多個獨立的連結區塊,像範例圖片那樣該如何修改呢?

02

其實就是複製多個(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;定義位置,放在橫幅的地方

另外可以看一下本部落格的”這裡&我”,也是利用這技巧達成的 (不過請不要抄襲)

05

 

♥ 部落格樣式 – 實用教學: https://www.dribs-drabs.com/blog/category/1358731