Screen_01

為慶祝粉絲團人數破千,分享一款新的樣式。首頁部落格採三欄式,一、二欄為文章內容,第三欄為側欄元件,採用格子狀來呈現,很喜歡這樣的設計風格,簡單耐看!不限定圖文集部落格使用,純文字部落格也可以使用。另一個側欄採用下拉式選單,可節省版面空間並簡化版面,可搭下拉式文章分類做使用。另此版面提供另一款特別款,在部落格標題背景處置入橫幅,可自行更換照片。

 

 

Screen_02

 

使用規定 <<<<<< 必看

  • 幫本站兩個粉絲團按讚,Dribs & Drabs / Dribs & Drabs Designs
  • 禁止刪除或修改版型的版權宣告。
  • 禁止複製部分語法,套用至非本站分享的版面。
  • 本站分享的部落格樣式,可自行修改美化,勿再次發佈與替其他部落格修改。
  • 套用發生問題請先看過版面設定Q&A
  • 勿當伸手牌,版主沒有時間處理這類的問題。
  • 此版型不再維護,若想要更專業的版型請參考半客製化服務內容

 

▎CSS語法

對著文字框按右鍵可以全選,複製貼上至管理後台"自訂樣式"->"CSS原始碼編輯"

這個版本另外有個特別版,特別版的部落格標題的背景有橫幅,可自行替換照片,如下↓

9.jpg

 

▎版面設定

1 - 側欄1的元件會放置在部落格的右側,側欄2的元件會放置在部落格標題下方的下拉選單裡。

2 - 純文字部落格也可以套用。

3 - 每頁顯示文章數量請改成偶數,後台>基本/進階設定>文章顯示相關設定>每頁顯示文章數。

4 - 建議關閉公告版位

5 - 文章內圖片最佳寬度為800px,可滿版

 

▎Q&A

1 - 特別版的橫幅照片該如何替換?

修改#header裡的background屬性,橫幅照片預設為1300x350像素。

*   如果上述沒有你的問題,可參考另一篇 Q&A問答集

 

▎更新

2018/08/02 刪除上方快捷功能bar、替換橫幅照片、加入自適應功能讓版面依照瀏覽器視窗大小縮放

 

♥ 更多部落格版面分享: http://www.dribs-drabs.com/blog/post/434454491

♥ 部落格CSS語法教學: http://www.dribs-drabs.com/blog/post/437150992

    文章標籤

    樣式 版面 免費 分享

    全站熱搜

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