不想用blogger制式的格式,雖然他的排版還算簡單乾淨,但總想擁有一個屬於自已的呈現方式,蓋個blog的窩就像佈置自己的房間,縱使沒有什麼美術方面的天份,顏色配置的概念也不懂,只是想讓自己看得順眼,如果連自己都不想看的部落格,還有誰會進來?
更改方式,進入範本,更改修改HTML的內容,
用I.E者按Ctrl+F出現 尋找 的對話框,然後找到 /*Header這個區塊,應該是第一個,在#header-wrapper {這個敘述裡加上或是後將預設的圖片網址設成自己的就可以了,
background:url(“圖片網址”) no-repeat;
我的版面預設值是800*600,而我的圖是長條型的大概長度是760,所以不想重複顯示會加上no-repeat,如果有的人是1024*768,沒有加上no-repeat,看到的就會重複圖片,變得很醜,但如果本來templet預設就沒有圖片,就自己加上這個敘述即可。
然後配合你的Banner,再調整標題位置就完成了。
Blogger預設的有的是沒有Banner圖,而是用框框將標題框住的語法類似這樣 "回"
border: 1px solid $bordercolor;要記得將這行敘述刪除再加上background的敘述即可。
如果想在每篇文章標題前加個圖示,則是找到 /* Posts這個區塊
在 .post h3 { 裡,加上 background:url("圖片網址") no-repeat; 語法,不過圖片格式要小,大概20*20就可以了。
有的人可能是 .post-title {,每種樣版的語法都不盡相同。
如果只是想讓標題底色不同來區別,則是加上 background:#色碼; (背景色)
color:#色碼;(文字色) 自己再調整即可。
想要什麼顏色,可以到這裡去找
原色大辭典
P.S. 其實每個templet預設的語法都不相同,記得更改前要先將自己原先的css語法備份,版面不是自己所要時才可以再回復原先的格式。
請問您訂閱前的圖示也是用這種方式加上的嗎?
回覆刪除在.feed-links {
回覆刪除加上background: url敘述
大概是我在技巧(三)提到類似的觀念。
謝謝你,也希望這些tips你也能用到。
你的banner的圖片是放在哪裡?我之前放在Picasa都可以現在怎麼都不行了?而且還不能用格主的方法,只能用LVCHEN的方法
回覆刪除我是用草稿來存我blog上的照片,這樣照片就會歸檔到這個blog的內部存檔區,imrg src再指向這個位置即可,我自己用是沒有問題的,這個網站我沒有用banner,我另一個網站有用,可參考原始碼,東京封印。
回覆刪除抱歉,有錯字,img src="圖片網址",草稿就是存blog版面的圖案。
回覆刪除我在标题前加图片为什么变成标题的背景,不能再标题前显示
回覆刪除我看你的網站,應該是已經調整好了,圖要小,再調整padding或是margin即可。
回覆刪除您好,這個blog很不錯!
回覆刪除讓我這初學著有個開始的地方。
我有個問題...
我是套用他處的模板的,想要改標頭的圖片。我找到:
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: left;
}
找不到background:url(“圖片網址”) no-repeat;
想說直接增加一行,結果是完全沒變化...
請問我要怎麼做呢??
因為你有兩個網站,一個是從後台直接插入標頭圖片,另一個沒看到你新增的語法,方便給我正確的網址,我再幫你看看。
回覆刪除嗯,謝謝,這是我的blog:
回覆刪除http://jialin-note.blogspot.com/
你的圖片網址前後的引號""變成亂碼,你要用半形的""或是把引號刪除看看
回覆刪除還是不行..OTZ...
回覆刪除background:url(http://static.zooomr.com/images/6816233_dc4125a030_b.jpg) no-repeat
回覆刪除你後面no-repeat少了;
不然你用
background:url("http://static.zooomr.com/images/6816233_dc4125a030_b.jpg") no-repeat;
這句貼上看看。
sorry..
回覆刪除結果一樣ˊˋ..
有出現啊,只是被你的背景顏色給擋住,把#header-wrapper {和#header {裡的background-color: #000000;
回覆刪除的定義都給去除,應該就看得到了。
嗯,謝謝囉...^^
回覆刪除圖出現了,剩下我自己慢慢改
感謝
如果想要全圖出現,記得設高度與寬度,慢慢改,改多次後就會知道問題出在哪了,加油。
回覆刪除謝啦,我會努力的
回覆刪除你好~我又要來麻煩你了^^"
回覆刪除文章標題前加上圖示,我找不到.posth3或.post-title呢~
可否撥空幫我看一下~謝謝你^^
http://giant-dogs.blogspot.com/
你的名稱是.postarea {
回覆刪除background: #FFFFFF url(http://s310.photobucket.com/albums/kk426/magznetwork/revolutionlifestyle/homepagetop.gif) top no-repeat;
裡面已經有設標題背景圖了,把它換掉就行了,因為你的模板沒有獨立設標題的定義,只有整篇文章的定義區塊,所以最簡單就是改背景了。
版主你好,初次使用部落格,這裡很多讓我學的~^^
回覆刪除請問我已經試著把標題換背景了,使用的的底圖是網路上的~被分割3塊,如果把圖合併後,有辦法把部落格的背景圖是像一般網頁一樣單一背景嗎?現在用的標題和內文變成有一條空白段落,頁尾用同樣方法設可是出不來?
麻煩了謝謝~
你如果要把三張圖合併成一張圖,可以在#content-wrapper { 設這張新圖的底圖,但是圖片大小要調整好,目前你的寬度是940px,設好圖後,你可以用fixed定底圖的方式,不然通常首頁會一直延伸下去,你的圖會重複,如果你可以接受這樣的效果也是可以的,因為我真的看不出來原圖長怎樣,另外所有例如main-wrapper、sidebar-wrapper等等這些background-color: #ffffff;的敘述都要拿掉,才不會檔到你的底圖。
回覆刪除TO 小黑豪:
回覆刪除我想你說的標題和內文間有一條空白段落的問題,應該是出在
#content-wrapper {
padding: 0 0 15px;
將他改成:
#content-wrapper {
padding: 0 0 0px;
就會正常了!
至於頁尾,你將原本寫在#footer .widget 的
width: 940px;
height:171px;
background:url("http://www.jp.playstation.com/scej/title/locoroco2/extra/img/bp_03.gif") center no-repeat;
移到#footer {圖就會顯示出來了,不過,中間會有空白段落出現@@,剛剛試著改了很多地方,但這部分的空白段落還是無法解決,照理說不該會這樣@@
再補充一下,最好把
回覆刪除#header-wrapper {
margin:0;
改成
#header-wrapper {
margin:0 auto;
要不然用火狐觀看時,橫幅會整個偏到左邊去~
剩下的,就跟綸太郎說的一樣囉
作者已經移除這則留言。
回覆刪除謝謝版主和南野紗羅~
回覆刪除改了之後可以看的到圖,因為中間會有空白段落出現,所以我也把圖合併上傳,整張圖設在#content-wrapper那頁首頁尾background都要拿掉囉?會再接再厲的~請多指教!!謝謝
謝謝你的教學~
回覆刪除我有照你的方法想在文章標題前加圖示~
但是圖片跟文字是重疊的~
請文我該調整哪個地方~
.post h3 { 裡面加入padding語法,調整看看。
回覆刪除小弟不才~
回覆刪除我試著加了padding語法進去~
但移動的跟我要的不太結果一樣~
還是我的問題問錯了~
應該是圖片已經變成文章標題的背景圖片了~
而不是放在標題前面~兩個重疊了~
感謝~
你沒有提供你的部落格網址,只好以我的為樣本了,我的
回覆刪除.post h3 {
padding:0 0 2px 30px;
background:url(http://4.bp.blogspot.com/_c2aOyhdt6yA/S2FdveirM9I/AAAAAAAAHwA/psRN9MA0g4s/s400/earthtitle.jpg) no-repeat;
我的圖片是30*30大小的圖,地球小圖
所以padding跟左邊的距離是30px。
圖片不重複顯示,因為我也不知道你用多大的圖。
謝謝你~
回覆刪除照你的樣本搞定了~
請問站長,我找不到這段 #header-wrapper
回覆刪除我的網站,請幫我看看,因為我目前還是用網頁元素放首頁圖,想之後用CSS去修改,謝謝您之後的指導。
我的網站:http://gingerbreadman-studio.blogspot.com/
這已經是四年多前的舊文了,blogger都已經換新版的,很多定義都不一樣,除非你用舊版的才能找到吧。新版的可能是.header-outer {這個元素吧,你自己再試看看。
回覆刪除http://amnos0915.blogspot.tw/
回覆刪除請問~最上方雪花的動態圖怎麼移除><?
我找不到哪裡可以刪掉它...
先謝謝指導=)!!
後台版面配置→標頭那個小工具,將裡面的圖片選項,移除圖片即可。
刪除弄成功了!!大感謝!!終於移除掉了謝謝你=)
刪除