2007/05/24

新增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加入,就大功告成了.

相關文章 :

42 comments:

Catherine/織田裕希 提到...

請問網頁元素是否有上限,我有15個網頁元素,結果之後就再也無法新增了,而且無法移動既有的順序。有方法可解嗎?

續上,如果side bar上沒有「加入網頁元素」的按鈕,是否也可以按你新增header的方式應用?

謝謝你!

Skyvee 提到...

我剛測過, 網頁元素加到20個都沒問題耶, 所以我不知道您會是什麼因素呢? 測不出你的問題...如果side bar沒有加入網頁元素, 而目前你的版面是有side bar的部分, 應該是可以應用的. 還是你方便給我 blog url? 因為您有3個, 我看一下原始碼.

星子 提到...

我的template裡沒有header-wrapper...:(

Skyvee 提到...

星子你好, 你找一下這行 b:section class='header' id='header' ,看是否加入 maxwidgets='3' showaddelement='yes'之後, 可以出現網頁元素?

星子 提到...

試過了!
還是沒有

Skyvee 提到...

星子你好, 我用另一個blog, 套用你選用的template, 發現原來maxwidgets='3' 不夠用了, 因為你選的template, header 的網頁元素已超過3了, 請你把 maxwidgets='3' 的數字, 改大一點, 5以上試看看.

星子 提到...

成功了!
謝謝您提供解法...orz

Skyvee 提到...

星子, 不用客氣. :)

blogger 提到...

请问在post内加入adsense,是用什么方法,是改模板?还是手动在文章里加入代码呢?

Skyvee 提到...

你好,是改模板哦! 我會整理一下資訊, 再跟大家分享. :)

feeling 提到...

我跟著你教的步驟做了,可是當我按save,就來到HTTP 404 Not Found
為甚麼會這樣?到底是那裡出了問題呢?

Skyvee 提到...

feeling你好, 會出現 404 這個錯誤訊息, 有可能是跟blogger之間的連線中斷, 或是這之中你曾經開了別視窗登出過google的帳號等..導致剛剛在改程式碼的網址失效了.. 也許再試看看?

cola 提到...

您好,

為什麼我的廣告一直都是公益廣告,無論是用加入網頁元素直接加adsens或是加入網頁元素以HTML/JavaScript的方式將adsens code加入都是同樣結果,已經是到投快爆炸了,還是一樣.

您可以幫我看看問題出在哪裡嗎?

感激不盡!

cola

網頁:http://onlycola.blogspot.com/

Skyvee 提到...

已回覆您的問題, 在這篇文章囉!

tzuche 提到...

這幾天應該網頁改爛了,自己試了兩天,竟然忘了來你這邊挖寶,在你這邊看了不到十分鐘就解決了~~:(

下次一定要直接來你這邊看!!:)

漢斯

Skyvee 提到...

漢斯,

很高興知道你已解決了問題, 其實不見得每一篇文章都適用所有情況呢! 我也還在學習中, 一起加油吧! :)

阿啦 提到...

請問....我沒有下列此行
<div id='main-wrapper'><b:section class='main' id='main' showaddelement='yes'>


那...怎麼辦呢?麻煩您解惑了Orz..

Skyvee 提到...

阿啦, 你的情況應該是 div id='main-wrap1' :)

阿啦 提到...

呵~真的耶!感謝您的熱心回應喔,
我是門外漢,邊做邊學、邊學邊看,
感激您的不吝指教XD

Skyvee 提到...

不用客氣, 改版型久了之後,可是會上癮的哦! :)

紀大乃(aria chi) 提到...

你好~
有個問題困擾我很久了
請問一下blogger的標頭該怎摩去更改及制定他的長寬

紀大乃(aria chi) 提到...

抱歉
補充一點
我是指如果放圖片上去的話
要怎麼才能讓圖片的寬變滿版

Skyvee 提到...

你可以加入圖片網址及長寬度設定,如900 x470的圖片, #header {
background: #73a0c5 url(http://圖片網址) no-repeat 0px 0px;
height:470px;width:900px;}

kayo-web 提到...

請問我的blogger如何才能像你這樣沒有導覽列呢

skyvee 提到...

kayo,請參考這篇文章幾秒鐘移除或自動隱藏 blogger頁首的導覽列(navbar) !

Taipei‧Taiwan 提到...

你好~~我也想在網誌標題下方加一排功能選單 也是要先新增一個網頁元素 可是我在修改html裡找不到你上面說的程式碼 header-wrapper只顯示#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
)
可以幫我看看嗎?
謝謝!!

Skyvee 提到...

你要先勾選 展開小裝置範本, 才可以找到哦!

Sama 提到...

hi blog 主你好,
我是blogger 新手, blog 主所說的header 是否你blog上的分類: Home, 部落格改板, 部落格小玩意 …, 我也想加上, 但我的html 內找不到你所寫的內容, 不知是否我是屬於新板? 另外想請問有無方法可以click一個button,轉換中文版及英文版? 因為中英文放在同一個版面太累贅.
thanks!
Sama

Skyvee 提到...

Sama 你好, 你先找到 div id='header-wrapper' , 然後在 b:section class='header' 裡,將maxwidgets='1' 裡的數字改多一點,我看到你有header-wrapper,應該也有b:section .... 這一段程式碼,如果你還是找不到,請將header-wrapper之後的程式碼貼上來.

cat_tea_coffee 提到...

非常謝謝你提供的方法。

Lonyice,小龍 提到...

你好..
有個問題想請教..

這是我的部落格 http://lonyice.blogspot.com/

我套用的版模裡面,標題旁邊有個空白
那裏可以自行增加一些東西

我嘗試增加了這網頁寫的語法
http://www.likk.com/blog/post/455.html
或者
直接套用flickr官網秀圖片的語法
都出現錯誤的情況 (不知道原因,正常是可以使用的..)

所以我打算用新增網頁元素的方法來加入語法
可是不知道怎麼在這裡啟用網頁元素的功能

要加入甚麼語法呢?


順便想請教大大一個問題
就是我套用的那個版模上面

可以自行增加連結
在我加入了有javascript屬性的連結
卻無法開啟 (在其他版模可以用)

ex :
a href="javascript://" onclick="window.open...
跟 加到我的最愛 的語法

是哪邊出了問題呢..?

skyvee 提到...

你好,
如果要加入你附的網頁那段flickr語法及javascirpt,新增的小工具,必須是 HTML/JavaScript 這類型喔!

Lonyice,小龍 提到...

那請問如何在沒有新增小工具的空白框框那裡
出現新增小工具的按鈕呢?

skyvee 提到...

主要是 showaddelement='no' 這段, 要改成 'yes',然後設新增小工具數,如設成3,就是 maxwidgets='3'

Lonyice,小龍 提到...

感謝~ 我改好囉!

skyvee 提到...

還好你瞭我的意思, XD

peter 提到...

嗨!求救~
我想把標題右邊放入網頁元素
header-wrapper裡面還包含了navigation-center及navigation-wrapper
摸不著頭緒,不知道怎改,可麻煩你幫忙嗎,謝啦

http://weimemo.blogspot.com/

Skyvee 提到...

Peter,
sorry 晚回信了.
你可能要新增一個區塊,如 navigation-right,而#navigation-center的寬度+#navigation-right的寬度就等於原先的寬度(如950px).存檔後,到網頁元素的頁面看看,是否新增成功.如果可以的話,再參考步驟1開始的設定,加入showaddelement='yes',及設定最多可新增的數目.

shiuans 提到...

感謝你的分享讓我可以弄出置頂文章~大感謝!!

Skyvee 提到...

Shiuans,

不客氣,也謝謝您的留言.:)

酷比世界 QBeefly 提到...

好棒的文章,文章中的blogger 好像是舊版的。請問如果我的已是新版的Blogger 後台,要如何做這些變更呢?麻煩一下,謝謝。

skyvee 提到...

您好, 目前這個介面移到"版面配置", 您可以找看看喔! ^^

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.