2007年9月6日 星期四

Blogger 新手基本技巧問答(三)

想在日期、回應欄增添些變化,加上小圖示或背景? 怎麼做。



最近都在忙其他網站的改版,所以順便也增添些圖案讓自己的blog更活潑,首先是日期的部分前面加上圖案,如下圖(這是我另一個網站的設定),用藍色框起來的圖案,找到
h2.date-header {
background:url("圖片網址") no-repeat;
}


Blogger回應的地方有兩區,一區是文章下方的post by" 0 意見",另一區就是在展開文章後的"張貼意見"。

可以為回應區加上背景,或是在回應者前方加上圖示都可以, 針對回應區部分,先找到 /* ----- COMMENT ----- */ 這區,
是對整個回應區塊的設定,若要增添背景,可利用這行敘述
#comments {
background: url("圖片網址") no-repeat bottom right;
}
no-repeat:不重複顯示
bottom:在下方
right:在右邊

另外如下圖

綠色框起來的部分,明顯標出意見欄的圖示
/* comment-header */
#comments h4 {
background: url("圖片網址") no-repeat;
}

紅色圈起來的,放在發言者前方的圖案
.comment-author {
background:url("圖片網址") no-repeat left bottom;
}

還有每篇文章下方的資訊欄,如下圖,

找到 /* ----- POST-FOOTER ----- */
.post-footer .post-comment-link a {
background:url("圖片網址") no-repeat right;
}
記得一定要加上 right,這樣圖片在會在”意見”這兩個字的右邊。

另外這些小圖片,儘量控制在16*16的大小,#comments h4 {,這個例外,可以大一些,因為他原先一般設定的字型就比較大,如果圖片沒有完全顯示,只有顯示部分的話,就是你設定的padding太小,可以自己慢慢調,調整到完全顯示出來,或是利用line-height:1.6em; 來設定高度。

如果想改些回應區的文字敘述,例如"0意見",改成"0 留下意見",則可到後台,
範本→修改HTML→勾選"展開小裝置範本", 找到"<data:top.commentlabelplural/> ”,把他置換成你想要的文字,
例如 " 留下意見",記得前面要空一格,才能跟前面的數字0有一點距離, 會比較好看些。

系列文章:
Blogger 新手基本技巧問答(一)
Blogger 新手基本技巧問答(二)
Blogger 新手基本技巧問答(四)

21 則留言:

  1. 回應小圖示我是加入成功了,可是都會剛好擋到文字耶.這要怎麼辦呢??加入Padding?

    回覆刪除
  2. 在你圖片background前面調整位置,加上
    padding-left: 25px; 或是
    padding: 0 0 0 25px;都可以

    回覆刪除
  3. 你好,請問一下,我是用Blogger 測試區那種意見整頁模式。
    能夠設定意見填寫欄的背景嗎?

    另外,我想讓引用區有框線,如何設定?

    回覆刪除
  4. 應該是可以設背景,只是我不會,引用區應該是blockquote這個css定義,加上border的敘述即可。

    回覆刪除
  5. 想再次請教你
    我的模板是從挑選新範本的第一個白色那個改的
    可是這模板在一開始我要修改張貼頁面選項的排列項目
    我想把作者移動到標題下方
    雖然在修改的頁面有移動
    但是回到blog卻還是在文章的底部
    請問這要去哪邊修改呢?
    謝謝!

    回覆刪除
  6. 我使用你說的方式修改,是有移動到標題下方,沒有的話,你可能模板動太多地方,或是有換過其他的模板,影響了原始的排列,建議可以在"修改 HTML"下方有個"將迷你組件範本回復為預設值",按下後,再嘗試看看,應該就能移動正確了,記得原先的模板都要備份,弄壞了再裝回去。

    回覆刪除
  7. 可以移動了
    謝謝你
    改這麼多次居然還沒發現下面這有個選項@_@"

    不過回去預設值後有個問題
    就是我將作者調整到標題下方後
    作者這兩字的字體顏色設定跟他在文章下方時不一樣了
    真怪..@_@"

    回覆刪除
  8. 我找到post-footer下面的


    span class='fn'>/span

    作者標籤
    在移動後他的確會到header-line-1
    但是到文章標題下後卻沒辦法定義他的font
    請問有解嗎@_@?
    感謝


    (發文不能發span@@)

    回覆刪除
  9. 當然你移到那一區,就以那一區的定義為主了,想要改變定義,你就加上一個
    .post-author{
    color: 自訂;
    font-size: 自訂;
    }
    的定義即可。

    回覆刪除
  10. 成功了 多謝幫忙
    不過這裡的定義似乎無法置中
    我使用了
    text-align: center;
    ext-align: center;
    都沒有反應

    回覆刪除
  11. 作者已經移除這則留言。

    回覆刪除
  12. 你哪個單元要置中,有時前後的定義也會影響,要看他的位置在哪,後定義的會蓋過前定義,還有儘量不要在html區塊裡作置中的語法。

    回覆刪除
  13. 倒是沒有想過後定義
    多謝囉
    我在試試看

    回覆刪除
  14. 我試著用模版之後,發現意見區點張貼意見都沒反應,也沒有可以填意見的區塊,但回html看comments區又好好的,現在完全不知道該如何是好....請您給我ㄧ些意見好嗎?

    回覆刪除
  15. 你沒有部落格網址,也沒說套用哪個模版,很難回答你。

    回覆刪除
  16. 正常來說,要有以下語法
    <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
    </p>
    才會彈出留言視窗

    回覆刪除
  17. 真是抱歉,也謝謝您快速的回覆!先前忘了將個資公開,我套用的模版是blogger提供的Minima Dark(在挑選新範本頁面左上角的那一個),參考站上的教學改成三聯式的版面,看了您給的語法回頭找了之後,發現似乎也不太一樣...目前仍一頭霧水....

    回覆刪除
  18. To Kathy,模板備份後,按下:將迷你組件範本回復為預設值,看看是否有效",或者另外成立一個部落格(鄉銅模板),對照data:post.addCommentUrl(有兩段)前後相關的語法,不一樣就把它改回一樣的。

    回覆刪除
  19. 如果用內嵌的,看看這篇
    http://blog.kengao.tw/2008/06/blogger-in-draft-embedded-comment.html或許有幫助。

    回覆刪除
  20. 您是否有試過為部落格配上背景音樂,而且不能有侵權疑慮,這會不會很難

    回覆刪除
  21. 我個人不喜歡,只要沒有版權疑慮,是很簡單的。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能