2007年8月20日 星期一

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

blogger新手其實會有許多問題,而且很多問題都很小,網路上常不太容易找到解答,而且不懂css語法,或是不清楚整個blogger架構,剛開始會很辛苦,我寫下來的也是我曾經有過的問題,想想還是把他整理一下,所以有了想寫"Blogger新手基本技巧問答"的想法。


不想要有圖片外框
也是進入版面配置→範本→修改HTML
找到有關有 "img” 這個定義,大概有下列這些,看你要設哪一個:
a img { 或 .post img { ,這是文章內的圖片設定
.profile-img { 或 .profile-img a img {,個人簡介
#header a img { ,標頭
.sidebar a img { ,邊欄區
【每個模板大同小異,大概都是用這些來定義】
把 border: 0;
設成0即可,或是把這行敘述去除亦可。

想要調整某些元素的位置
通常會碰到的問題就是想調整各個元素與邊緣的距離位置,例如文章標題、日期、邊欄等等,找到你想要調整的元素區,然後找到以下的敘述,再調整距離大小即可。
也是進入版面配置→範本→修改HTML:
margin: a b c d;(上右下左,以框線為主,就是框線與外邊緣的距離)
padding: a b c d;(上右下左,以框線為主,就是框線與本文的距離)
不知這樣形容聽得懂嗎?就是一個對外,一個向內的分別。
如果只是想調整特定的元素距離,比如下面這個圖

標題區(#header-wrapper,藍色框)與上方的距離,可以設成
margin-top: 10px;
而標題(#header h1)與上方的距離,就要設成
padding-top:30px;
如果都一樣的距離,可以設 padding: 5px; 表示全部都是5px;

網頁元素---文章分類如何產生
標籤-就是你的文章分類
有的人喜歡用hacks,把文章分類以標籤雲方式顯示,其實我自己覺得如果你的標籤分類真的很多,是蠻適合用標籤雲方式呈現,但也有人喜歡傳統的方式,用條列式的呈現,只要新增網頁元素為"標籤"的即可,然後將標題設為文章分類。

當然以條列式的呈現,可以在前面加個項目符號,找到.sidebar ul { 這區塊,然後加上以下的敘述,任選一種
list-style-type:none; (不加任何符號)
list-style-type:disc; (實心圓形符號)
list-style-type:circle; (空心圓形符號)
list-style-type:square;(實心方形符號)
list-style-type:decimal; (阿拉伯數字)
list-style-type:lower-roman; (小寫羅馬數字)
list-style-type:upper-roman; (大寫羅馬數字)
list-style-type:lower-alpha;(小寫英文字母)
list-style-type:upper-alpha; (大寫英文字母)
list-style-image:url(“圖片網址”) no-repeat;(圖片符號)

以下的圖,是後台常見的網頁元素說明。


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

18 則留言:

  1. 本文對剛建立blog的人很有幫助喔,謝謝分享

    回覆刪除
  2. 我想請教一些問題
    爲什麼的comment與下方的home old new 那三個文字標簽有很大的間距?

    不知道如何修改~~~
    (我是初學CSS的 希望能提供協助~)

    我的CSS
    http://sky.geocities.jp/ilyusha_kocmoc/blogyt.rtf

    回覆刪除
  3. http://ilyusha-kosmosa.blogspot.com/2009/10/blog-post.html 忘了貼我的練習blogger

    回覆刪除
  4. 你是否修改嵌入留言的height='410',這語法好像沒有成功,改回原來的275,看看是否會好一些,還有#blog-pager-newer-link {和#blog-pager-older-link {
    #blog-pager {裡面的margin-top: 10px;
    可以拿掉,也是可以靠上面一些的。

    回覆刪除
  5. margin-top: 10px; 我刪掉了 感覺沒什么改變也許是因為只有10px的高度

    而你說的『嵌入留言的height='410』
    我不知道這是什麼耶,我在我的CSS里面沒這段,怎麼修改成275呢?

    回覆刪除
  6. 我測試過了,是你挑選的模板的問題,預設是410,"展開小裝置範本",按下ctrl+F,會跳出搜尋框,輸入410,會找到我說的那個東西,把他改成275即可,如果看不懂,就參考http://01mistery.blogspot.com/2009/04/embed-comment-box.html這篇的說明,大概會比較了解。

    回覆刪除
  7. 感謝你~~~ 我了解了呢~

    回覆刪除
  8. 我想要把我的header h1放向右边一点,或者把header取消。因为它当住我的headerbackground了>< 要怎样?

    回覆刪除
  9. To H♥NAbaby,可參考這篇http://01mistery.blogspot.com/2008/08/blogger-template-css.html

    回覆刪除
  10. 綸大您好,我想請問您..
    我參考這篇將側欄的條列式都加上小圓點圖示..
    但因為有的側欄它前面就有圖片了(如我的交換連結),此時就會同時出現二個圖片
    要如何只把這個交換連結的小圓點圖示隱藏呢?
    麻煩您了,我的連結如下~
    http://www.ever4ever.tw

    回覆刪除
    回覆
    1. 你可能已經改好了,我沒看到有同時出現兩個圖片的。

      刪除
    2. 抱歉,還沒改好~
      因為首頁不會出現,要點進去任何一篇文章就能看到
      例如~
      http://www.ever4ever.tw/2013/06/blog-post_21.html

      右側欄最下面的FRIEND LINK(交換連結)
      會同時有綠點和網誌縮圖..
      我知道設定網誌清單,可以把圖示取消..這樣就只有綠點..
      但~不知道可不可以仍保存縮圖,而只在這個欄位取消綠點...
      麻煩你了~

      刪除
  11. 你在後台css處新增一個定義,類似以下
    #BlogList1 li {
    display: none;
    }
    或是類似
    #BlogList1 .widget-content ul {
    display: none;
    }
    你可能是要自己試看看
    ul 或是 li

    回覆刪除
    回覆
    1. 非常感謝..
      這對我就有點難度了..

      呵呵~
      還是謝謝您的熱心回覆

      刪除
  12. 綸大~真的很抱歉,還是要麻煩同樣的這問題..

    側欄-我的網誌清單裏,縮圖和綠點同時存在,
    我想要僅在這個欄位裏隱藏綠點該如何做呢?

    照您上面試了一下都沒成功
    可以幫忙看一下該怎麼做嗎? 網誌連結如下~
    http://www.evershoot.com/2013/12/blog-post_27.html

    回覆刪除
    回覆
    1. 我只想得出上面的方法,不過你的網誌清單已經變成 #BlogList2,改成2看看。

      刪除
  13. 謝謝您如此快速回覆,還是不行,
    不知是不是哪個地方多了一個定義,使得這個定義就無效了?

    還是這個定義應該放在什麼位置也有關係?

    回覆刪除
    回覆
    1. 不然就是找到類似
      '<li><span class="item-title">' authorname ': <a href="' link '">' title '</a> - ' timestamp '</span></li>'
      把前後的<li>及</li>去掉

      刪除

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