v Blogger 新手基本技巧問答(三) >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...