2013年10月10日星期四

Blogspot標題圖片「置中」或其他位置


大家把標題圖片放上Blogspot以後,它只會自動設定為靠左,所以如果想把圖片放在中間,或者其他位置,得下一點工夫(真的就只「一點」^^)~





首先,確保大家都知道如何上載標題圖片:「版面配置」>「標頭」「編輯」


可以選擇要不要標題和說明及它們的位置。


現在,豆丁要教大家加程式碼了~ 大家準備好了沒有?


請到「範本」,按「自訂」。


為了讓大家對自己的網誌多一點認識,豆丁建議先到「調整寬度」那裏看看自己的網誌內容有多寬(下圖就是說,網誌內容的寬度是1000px了~):


知道自己網誌的頁寬,就可以到「進階」>「新增CSS」:


請大家複製下面的程式碼,貼到右面的空白「新增自訂CSS」,然後再按下面的教學設定程式碼中的數值:



大家不用擔心!可以即時看預覽的~ 如下面的截圖~


margin-top 是「標題圖片與頁頂的距離」~
下面左邊的圖是margin-top「0」的,右面是「50px」。


margin-left 是「標題圖片與網誌內容左側的距離」

這是margin-left「0」:


這是margin-left「350px」的,大概是中間的位置吧~ 大家的中間數值都不同,因為大家圖片的大小是不同的啊~



這是margin-left「700px」的,差不多是文章的最右邊了(數值再大一點,預覽中會看到圖片的右邊會消失^^)~ 剛才讓大家了解自己網誌的寬度,就是讓大家明白大概可以設定什麼數值。



希望大家喜歡這個教學~ 


喜歡的話,記得按「like」或「+1」支持啊^^~ 也可以分享給你的朋友呢~


>> 繼續閱讀《Blospot教學

>> 你可能會喜歡豆丁的其他文章:
        *《無聊的樹
        *《說好的___呢?
        *《都市的童話
        *《「龍蝦之都」之美食篇


28 則留言:

  1. *0* 豆丁教的東西越來越pro了!!

    回覆刪除
  2. 用左啦!!!! 勁呀豆丁!!!!
    多謝教學啊!!!!

    多點css教學更好啊!!!

    回覆刪除
  3. 試左, 不過標題圖片變左右邊直角左邊圓角, 豆丁知吾知點解?

    回覆刪除
    回覆
    1. 我猜是因為你的標題圖畫比網誌寬度闊,所以右邊被cut了一點~

      刪除
    2. 我轉左另一個範本就冇問題喇

      刪除
  4. 試咗啦. .唔多, margin-left:10px 哈哈哈 ^0^

    回覆刪除
  5. 謝謝豆丁用心的分享 ! ^^

    回覆刪除
  6. 我估呢個好多人都啱用.

    回覆刪除
  7. 豆丁:你好!又來煩你啦!想請問我blog內回應格內字體特別小,但一發佈後就變大,有辦法讓人家留言的時候字體可放大一點嗎?

    回覆刪除
    回覆
    1. 是可以的,你可以參考這個:
      http://www.bloggeristan.com/2012/06/how-to-customize-comment-box-and-change.html

      把"font:normal 12pt" 的12換成大一點~

      刪除
  8. 頭先我入去唔識的人睇BLOG, 只有獲邀請的先可以看
    "似乎您還未獲邀閱讀此網誌。如果您認為其中有誤,您可能需要與網誌作者聯絡,並要求對方提出邀請。"
    請問可以點整, 因為有D BLOG都唔想比D唔識嘅人睇

    回覆刪除
    回覆
    1. 一個網誌只可以設定成公開或私人,不能每篇文章設定。要把網誌設定成「私人」,去「設定」那邊按「私人」,然後加上朋友的email就可以了~

      刪除
  9. 我已跟你既指示做一次, 但如果我加入既相片要選擇"輸入標題和說明之後", 出來既效果同我之前話張相會同標題及說明既文字重疊..只有選擇"於圖片下方附上說明"才可以按你上面所寫既css改到置中位置, 但同時相片下方既說明亦會同時改為置中...

    回覆刪除
    回覆
    1. 你可以選擇取代說明文字,然後在標題下面加小工具寫文字。

      刪除
  10. Thanks. 想問如何在每個post上都有Facebook Like及send 的icon,及顯示多少人在Facebook Like了的資訊呢? Thanks:)

    回覆刪除
    回覆
    1. 你可以參考這個:http://www.digitalkonline.com/blog/how-to-add-social-media-buttons-to-blogger-posts/

      刪除
    2. 好奇之下,試了上面的網址提供的codes,但是在我兩個網誌都未能成功顯示數字(template preview)就可以。你也試試看吧,如果不成功的話,我就教大家用苯苯方法(但極work^^)~

      刪除
    3. 寫好了:《在每篇文章顯示like或+1》
      http://seeddauding.blogspot.com/2013/10/post-social-media-buttons.html

      刪除
  11. 好野!移了右一些,真係靚咗啲!多謝你呀!如果想幅標題圖可以延伸整個頂部(好像豆丁似的),請問有方法嗎?

    回覆刪除
    回覆
    1. 我沒有特別延伸,是圖片夠大罷了~ (圖片闊度=網誌頁寬)

      刪除

Related Posts Plugin for WordPress, Blogger...