Photo


I'm Wei

Traveler / Photographer / Designer

旅行除了美麗的風景,最重要的是途中發生的點點滴滴,唯有照片與文字的交織,才能讓美麗的回憶不朽。這本部落格是份珍貴的禮物,獻給多年後的自己,有那麼一天,曬著午後慵懶的日光,溫習當年青春的味道。部落格取名為 Dribs & Dribs,為 "點點滴滴" 之意。

 

▸ Facebook:Dribs & Drabs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

 01

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

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

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

 

 

02

 

(0) 先前提要

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

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

 

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

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

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

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

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

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

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

 

(2) 自訂連結區塊 - HTML

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

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

<div id="MyBlog">

<span id="title">部落格</span>

<a target="_blank" href="http://weilife.pixnet.net/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

 

♥ 部落格樣式 - 實用教學: http://weilife.pixnet.net/blog/category/1358731

, , , ,
創作者介紹

Dribs & Drabs 點點 滴滴

Dribs & Drabs 發表在 痞客邦 PIXNET 留言(57) 人氣()


留言列表 (57)

發表留言
  • 蛋拔
  • 太好了,真是實用的東西,有空來研究看看吧^^

    感謝美女大師的無私分享喔^^

    (小聲的說,我真的有研究,沒有直接套用原始碼喔)
  • ヾ(*´∀`*)ノ不客氣

    Dribs & Drabs 於 2014/07/03 09:19 回覆

  • 安
  • 謝謝教學 以後想調語法就找你的格^^
  • ヾ(*´∀`*)ノ

    Dribs & Drabs 於 2014/07/05 08:40 回覆

  • 汀尼扣
  • 請問當滑鼠移至此區塊時,伸縮區塊的伸縮速度是不是可以調整呢?
    因為我看您的動的好優雅,基本的動作速度太急促了HAHA
  • 哈,這邊教學是設定直接彈出來
    如果要漸進式移動的話,再#MyBlog裡的屬性加入這四行就可以了
    transition: right 0.5s ease-out;
    -webkit-transition: right 0.5s ease-out;
    -moz-transition: right 0.5s ease-out;
    -o-transition: right 0.5s ease-out;

    Dribs & Drabs 於 2014/07/10 15:41 回覆

  • man3pic
  • 你的版型我都好喜歡喔~謝謝你的分享^^
    我有試著做浮動式自訂連結區塊,可是我的不會動ㄟ而且變成直式的,請問是我那邊設定錯嗎??
    http://man3pic.pixnet.net/blog
  • 你的問題應該是文章分類吧,不是浮動是連結區塊@@?
    請參考這篇教學第三步驟,#category .inner-box的width是不是沒有設定
    http://weilife.pixnet.net/blog/post/356355326

    Dribs & Drabs 於 2014/07/24 15:32 回覆

  • Jane
  • 你好~版主你寫的真的很實用^^
    不過我有個問題想問
    就是你的FB那塊,是怎麼處理成,只有在箭頭移過去時,才顯露FB的名片?
    因為我是放圖片做連結,結果箭頭還沒移過去時,按鈕沒有顯現原先設定的高度,反而因為圖片的高度而整個變高了
    再請板主幫個忙了謝謝^^
  • 在 #MyBlog{...} 設定他的高度 height
    在 #MyBlog #title{...} 加入 vertical-align: top;
    應該就可以了 :)

    Dribs & Drabs 於 2014/08/09 22:19 回覆

  • 訪客
  • 感謝版主^^我成功做好了~
  • 不客氣 :D

    Dribs & Drabs 於 2014/08/12 20:10 回覆

  • 阿喵影與蠢嘎逼、
  • 老師我有問題/
    是直接在css語法那放最底嗎? :33
  • 第二步驟有四個地方可以放,請參考第一步驟的說明
    第三步驟是放在"後台>自訂樣式>CSS原始碼編輯"裡

    Dribs & Drabs 於 2014/08/14 15:56 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 振羽

  • 感謝 ^_^ 祝福~
     
  • :D

    Dribs & Drabs 於 2014/09/03 16:24 回覆

  • 振羽
  • 我弄出來的是 口 的形狀,請問怎麼做成 凸 的形狀呢? (我指的是區塊 往左倒 的形狀)

    請問是不是一個小的區塊,後面連著一個大的區塊,才有 凸 的形狀呢?

    不知您是否能教一下該怎麼做呢?

    如果這太複雜,您講解起來會很耗功夫,那就不麻煩您啦!

    感謝您:)祝福~
     
  • 哈,你的形容很妙~
    不確定有沒有抓到你的意思
    如果不是矩形的話的話要兩個以上的div才辦的到喔
    可以用position來定義div的位置

    Dribs & Drabs 於 2014/09/04 08:19 回覆

  • 振羽
  • 本來想來刪除的,結果沒有可以刪除的選項 XD 哈哈

    我指的是我上一篇的留言。(這篇和上一篇,您可以刪掉的,不太想給您添麻煩 ^_^

    還是再自已多加嚐試後,再看看情況~
     
  • 不會啦,有甚麼問題都可以問阿 :)

    Dribs & Drabs 於 2014/09/04 08:19 回覆

  • 振羽
  • 請問,怎麼做出 5樓 那位訪客、他的blog、的浮動區塊的效果呢?

    感謝您!我實在是弄不好 QAQ~~
  • 那個效果不就是本篇的教學嘛...
    我看你的部落格左上方有這個效果耶

    Dribs & Drabs 於 2014/09/18 16:25 回覆

  • 悄悄話
  • 振羽

  • ^_^ 感謝~ 祝福!
     
  • :D

    Dribs & Drabs 於 2014/09/18 19:05 回覆

  • 伊娃媽咪
  • 你的分享超實用的耶
    不過我好喜歡你左右箭頭的點選上下篇文章
    請問有這個教學的分享嗎>"<
  • 謝謝你的稱讚 :D
    那個左右箭頭是痞客邦的APP,到應用市集安裝就有了

    Dribs & Drabs 於 2014/10/01 21:50 回覆

  • 伊娃媽咪
  • 我剛剛才看到你的留言~~謝謝你唷^^
  • :D

    Dribs & Drabs 於 2014/10/01 21:51 回覆

  • Ariel.Chen
  • 請問,如果要在1個浮動側邊裡面有兩個連結 那該怎麼設定呢? 謝謝~
  • 我看你的問題都已解決,之前的留言就不回覆囉

    Dribs & Drabs 於 2015/01/10 23:09 回覆

  • Ariel.Chen
  • 您好~ 我已經研究出來了~ 哈哈 但出現了第二個問題~ 就是請問ㄧ個浮動側邊有兩個連結 中間想要分隔線 或另外改變字的顏色要怎麼處理呢?

    不好意思一直麻煩您~謝謝!
  • 我看你的問題都已解決,之前的留言就不回覆囉

    Dribs & Drabs 於 2015/01/10 23:09 回覆

  • Ariel.Chen
  • 哈哈哈 自己研究了一下亂點誤打誤撞就成功了 哈哈 謝謝!
  • 恭喜,CSS很有趣的 :D

    Dribs & Drabs 於 2015/01/11 19:55 回覆

  • 悄悄話
  • Yo-祐
  • 您好!請問要怎麼修改部落格的顏色?
    就是從桃紅色和淺粉轉成全白色? 這個→主要色碼: (桃紅)、(淺粉)
  • 可以用cell+h取代原有色碼,白色的色碼是#ffffff

    Dribs & Drabs 於 2015/05/27 18:50 回覆

  • 悄悄話
  • 布仔
  • 很謝謝你的教學,用了好久終於做出我想要的感覺了!^_^
  • 不客氣,很開心有幫到你 :D

    Dribs & Drabs 於 2015/06/25 23:53 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • guli86400
  • Hi 你好~
    看你對HTML 和 CSS 語法這麼熟悉
    為什麼不會想要自己架站呢?
    還是其實正在進行中XD
  • 用痞客邦不錯啊,搜尋率很高!

    Dribs & Drabs 於 2015/09/11 11:32 回覆

  • 9M
  • 老師您好,上述<br/>的問題已經解決
    但是已經在#MyBlog #title{...}加入vertical-align: top;
    卻沒有起作用…標題一直在下方~"~
    請問有可能是什麼問題呢?

    不好意思麻煩您了>"<
  • 在#MyBlog_2 #title裡加入 display: inline-block; 就可以了 :)

    Dribs & Drabs 於 2015/09/12 19:42 回覆

  • 9M
  • 已經成功了~~~
    這個語法可以做好多變化,從您這裡學到超多
    真是太感謝老師了^^
  • 不客氣,很高興有幫到你 :)

    Dribs & Drabs 於 2015/09/14 19:47 回覆

  • 悄悄話
  • 奇香・つばさ
  • 成功了!! 覺得版主好強大
    CSS跟HTML組起來就變成這樣!!
    要跟版主多學學了> <"
    請問一下,這些東西是從哪邊學到的呢?
    是有讀過相關的書籍嗎?
  • 我都是從網路上學的較多喔,網路上教學非常豐富,可以多多利用 :)

    Dribs & Drabs 於 2015/11/12 17:58 回覆

  • 潔米小姐
  • 謝謝您~第一個有成功!!!
    但之後覅放第二三個都顯示不出來~~~
  • 會不會是重疊了,margin-top的值要改,可以參考第四部分的範例

    Dribs & Drabs 於 2015/11/26 10:13 回覆

  • 悄悄話
  • 兩津哥
  • 我又碰到瓶頸了
    我把標籤的部分拿掉改插入圖片 以下的
    結果會連帶出現 網頁宣告作者那兩行的東西
    該怎麼去改 QQ

    <img src="images/G-FASE4.GIF" align=absmiddle>
  • 我猜應該是align沒有" ",你可以試試看
    建議留下錯誤的畫面我會較容易偵錯

    Dribs & Drabs 於 2016/02/14 21:00 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 夜小咲
  • 您好~ 非常感謝您的幫忙!!
    終於弄成功了!! 實在太謝謝您了^^
  • 不客氣唷 :D

    Dribs & Drabs 於 2016/03/30 13:01 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 感謝~
  • position: fixed;
    正是這語法!
  • :D

    Dribs & Drabs 於 2016/06/13 17:50 回覆

  • tania
  • 你好 想請問一下,"這裡&我"的做法跟上面的教學是一樣的嗎?
  • 這篇教學是描述動畫那邊的效果,跟照片上"這裡&我"是不一樣的地方

    Dribs & Drabs 於 2016/07/12 21:27 回覆

  • tania
  • 那可以詢問一下,"這裡&我"的做法嗎?謝謝
  • 你是指單獨一個連結嗎?還是下拉選單??
    單獨一個連結的話,寫HTML就可以達到了
    下拉選單我分享的版面語法裡面都有喔

    Dribs & Drabs 於 2016/07/13 20:29 回覆

  • tania
  • 謝謝你哦!不好意麻煩妳這麼多
  • 不會啦~希望有幫到你 :D

    Dribs & Drabs 於 2016/07/14 09:32 回覆

  • HoneyAlice
  • 我想請問一下,我用您這個語法做了一個top
    可是凸出來的部分沒有顯示字,請問我是哪裡有設定錯嗎?

    <div id="MyBlog">
    <span id="title">TOP</span>
    <a target=a href="#top">TOP</a">
    </div>

    (CSS的部分我只有動垂直跟水平而已)
    這個TOP在同樣頁面只能回到頂端一次,按第二次就沒反應了
    我試過很多語法都不行,想請問您要怎麼修改才好?
  • 我要看到錯誤畫面才能偵錯喔!!
    你的語法裡target= 這個有問題,只寫了一半
    之前試過#top這樣的語法都能夠重新回到網頁上方,即使按了兩三次

    Dribs & Drabs 於 2016/12/13 22:51 回覆

  • HoneyAlice
  • 您好我想請問一下,我設定了兩組連結
    一組是top >>可是title沒有顯示出來
    一組是連網站 >> 可是前面簡體的部分變成了TOP紐,後面的連結可以用
    http://apple860706.pixnet.net/album/photo/81904872

    CSS的部分我也有分開定義,#MyBlog #MyBlog_1
    請問是哪裡出問題了?
  • 現在的title文字顏色是白色喔
    應該是被上層CSS所定義了,要在這層重新定義一次

    Dribs & Drabs 於 2016/12/15 21:35 回覆

  • HoneyAlice
  • 不好意思!一直打擾!
    我找了很多語法,可是都被蓋掉了QQ
    想請問您是用哪一種語法呢?
  • 你要在這裡定義顏色 #MyBlog #title{...}

    Dribs & Drabs 於 2016/12/17 12:09 回覆

  • HoneyAlice
  • 很感謝您,終於成功了!
  • 不客氣 :)

    Dribs & Drabs 於 2016/12/17 19:17 回覆

  • 悄悄話
  • 悄悄話