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


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

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

Related Posts Plugin for WordPress, Blogger...