幫自己的blogger換張banner/header

自從我由樂多蕃薯藤轉換到Google/blogger後,就一直疏於整理我的文章,而且對我來說,整理blog不是一件輕鬆的事,光是要把樂多時期的文章一股腦搬到blogger,就花了我不少功夫(雖然文章不多),接著為了找到適合自己版型,又花了好一段時間,終於,在羊男實驗の咖啡館中找到與樂多時期相仿的三欄式版型,於是又開始興起我整理blog的念頭....不過套用別人做好的版型雖然方便,卻又少了一點點自己的風格,於是我又開始動起腦筋,想要簡單的換個banner區分出自己blogger的特色,於是又努力在浩瀚無邊的網路上爬文,連續了兩天的努力,終於找到這個版型的更換banner法!!

在blogger中,語法的架構跟樂多好像有點不同,一開始,為了找到banner的的位置,我在css語法中翻了又找,找了又翻,就是遍尋不着,後來才在網路上發現,原來在blogger中,banner叫做header,難怪怎麼老是找不到

好的,找到header就好辦了,以羊男先生的三欄式版型來說,我先在blogger後台的html修改中,展開小裝置範本,並在header內search到這段語法:

#header {
  width: 920px;
  height:250px; 
  margin: 0 auto;   
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}

然後架設我想放一張900x250px的banner,於是我加入控制背景圖的語法,並把它改成以下,而紅色字的部分就是圖片網址,並且最後加上center top讓banner能夠在上方置中 #header {
  width: 920px;
  height:250px; 
  margin: 0 auto;   
  background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Vrm1MMmFbTytltRjkZO38nqOKZjRt-FUec0heWBoLT29AwKdA3_vk8ryW6PrHpmDcQbp0bgxwlLBEDJvOZq5kDwdcZjIKgULb4IxYfAs9B8YorOAx11owge3TtI93eqbFZW5c-j4nWDT/s1600/72ac5c5b.jpg") no-repeat center top;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}

 

修改的差不多了,儲存以後,檢視效果,果然有自己風格的banner就秀出來了,但是發現標題(blog名稱)位置不是很理想,所以得在修改一下:

 

首先找到header區塊內這兩項語法:

#header-wrapper { margin:0; padding: 0; text-align: center;----->改成right h1.title { padding-top: 55px;---->改成190px   margin: 0 14px .1em; line-height: 1.2em; font-size: 100%; }

這樣子就可以讓標題置於圖右,並且讓文字這在區域中離上方有190px的距離(可能聽不懂我再說什麼..),其實,再每次套用版型時,只要有存檔備份,都不必怕修改錯誤,即使不懂語法,多看看別人文章的教學,勇敢嘗試,還是可以try出自己喜歡的版面和風格!!