新增Blogger Header及Post的網頁元素,可加入圖片或Adsense

Blogger 雖然提供的template 很少, 介面看起來簡單,但操作有些複雜, 加上一些名詞從字面上不太明白意思, 有時候常不知道從何下手.不過Blogger 有一個好處是彈性很大, 透過網路上的資源, 學習一下別人的經驗, 熟悉及懂了blogger之後, 其實修改CSS或版面還是可行的.

這陣子的版面在千修萬改之下, 有點心得, 整理自己用過的部分, 分享一下.

首先就是如果想在 Header 放圖片, 或是文章上方放adsense, 最容易的方式就是用網頁元素(page element), 直接選擇 "HTML/JavaScript", 把程式碼或圖片引入 就可以了. 但是預設的template, 其實這兩塊都是沒有新增網頁元素(page element).

所以我們可以自己新增一下.


如果google帳戶的語言設定,使用的是中文的話, 有些名詞真的蠻難意會的.

先介紹一下中文介面的修改步驟.

首先選擇 範本--> 修改 html 就會看到下面這個畫面. 要注意的是, 每次修改之前, 最好先備份一下模板.

按一下 "下載完整模版", 把目前的template 另存到電腦就行了.

附帶說明 "展開小裝置範本" , 其實就是 "展開widget template", 如果這個選項沒有勾取, 那麼目前所看到的html並非完整的, 一些widget的 html code 是被隱藏起來了... 有時候修改模板時, 會異動到widget內的程式碼, 這時候必須要勾取這個選項.

這次先不用.


先看一下原始的template, 只有在side bar 及 footer 處,可以新增網頁元素(page element).


1. 先改header的部分, 找到這段程式碼


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


把紅字部分改成以下.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>


2. 再修改post的部分, 找到以下程式碼.

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>


把紅字部分改成以下.

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='yes'>


儲存之後, 回到網頁元素, 應該可以看到以下的樣式了.


再自行新增網頁元素, 選"HTML/JavaScript", 把圖片或adsense加入,就大功告成了.

相關文章 :