Loading...









 

那些旅行中美好的、歡樂的,都隨時間流逝逐漸淡忘,唯有照片與文字的交織才能讓美麗的回憶不朽,也是部落格取名為"Dribs & Drabs 點點滴滴"的涵義。你可以稱呼我 Wei/薇,一個喜愛旅行、攝影的女子。

 

FACEBOOKINSTAGRAM MAIL ABOUT US

01

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

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

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




02





(0) 先前提要

本篇教學給有一點HTML基礎與CSS基礎的人參考

有些人套用後連結出現的位置不太對,這跟你套用的版面語法有關,需要重新檢視上層CSS語法是否有衝突


(1) 痞客邦 – 使用者自訂語法

目前有四個地方可以讓使用者自行發揮,側欄元件、公告區塊、頁尾描述、部落格描述

前三個都在”後台 > 側邊欄位設定”,第四個在”後台 > 基本/進階設定”

這四個地方皆可放入HTML與JavaScript語法

但套用本站樣式的朋友,不建議把語法放至側欄元件中,因為之後還要清空側欄定義的屬性,會較麻煩

所以以下的教學比較建議放至公告區塊、頁尾描述、部落格描述

放至公告區塊、頁尾描述的要記得把它開啟喔!


(2) 自訂連結區塊 – HTML

這部分的語法放至(1)所說的地方

首先用div定義一個區塊,裡面放置想要的內容,語法如下,範例為一個簡單的超連結



部落格

Dribs & Drabs



重要的是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要不同,例如







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

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



 

那些旅行中美好的、歡樂的,都隨時間流逝逐漸淡忘,唯有照片與文字的交織才能讓美麗的回憶不朽,也是部落格取名為"Dribs & Drabs 點點滴滴"的涵義。你可以稱呼我 Wei/薇,一個喜愛旅行、攝影的女子。






 
ShareBody資訊站