Monday, July 2, 2007

Hình nền cho blog

Đăng ký dịch vụ lưu trữ đám mây: Dropbox, Mediafire, OneDrive. Sau khi đăng ký xong, cài đặt phần mềm cho Windows hoặc ứng dụng điện thoại - máy tính bảng để đồng bộ dữ liệu.

Nhiều bạn hỏi tôi chèn hình nền như thế nào? Cách dưới đây tôi hướng dẫn bạn chèn hình nền vào blog. Trước tiên bạn phải có hình nền sẳn. Nếu bạn là dân chuyên về đồ họa, có thể design cho mình một cái tùy thích. Thông thường bạn có thể chọn hình nền có kích thước nhỏ lặp lại hay một hình đầy đủ toàn màn hình. Theo thống kê, kích thước màn hình 1024x728 được dùng nhiều nhất. Bạn có thể download gói wallpaper 3D chứa nhều ảnh rất đẹp với kích thước này, sau đó đưa GooglePages hay các trang chia sẻ ảnh để lấy liên kết.


NỀN MÀU

Bạn có thể đổi màu nền cho blog bằng cách vào Template | Fonts and Color. Trong khung nhỏ phía bên trái, bạn chọn Page Background Color và chọn màu mình muốn.

Bạn có thể sửa lại màu nền trong đây nếu bạn biết mã màu.
background-color:#E31122;


HÌNH NỀN CHO HEADER
(Xem chi tiết).

HÌNH NỀN CHO SIDEBAR

Để chèn hình nền cho sidebar bạn vào Template | Edit HTML, kéo thanh trượt xuống phía dưới tìm cho được đoạn mã và chèn bên như bên dưới:

#sidebar-wrapper {
background-image: url(LIÊN KẾT ĐẾN HÌNH ẢNH);


Trong đó LIÊN KẾT ĐẾN HÌNH ẢNH phải là liên kết đến hình ảnh. Có dạng như: http://www.vidu.com/hinh.jpg

Click SAVE CHANGES để lưu lại. Nếu blog bạn có nhiều sidebar-wrapper, bạn cũng làm tương tự.

HÌNH NỀN CHO MAIN


Tương tự như vậy bạn có thể chèn hình nền cho main-wrapper phía dưới dòng.
#main-wrapper {


HÌNH NỀN CHO TOÀN BỘ TRANG

Tương tự nhưng bạn chèn phía dưới.
body {


HÌNH ẢNH LẶP


Theo mặc định, hình nền của bạn sẽ bị lặp lại tùy thuộc vào kích cở hình cũng như cách bố trí trang và ký tự có trên blog của bạn. Nếu hình ảnh bạn dùng có kích thước nhỏ, cần lặp lại để phủ đầy trang thì quả là tuyệt. Còn ảnh kích thước lớn, không muốn lặp lại thì sao? Bạn chỉ việc thêm đoạn mã này phía dưới dòng liên kết đến ảnh.
background-repeat: no-repeat;


VỊ TRÍ HÌNH NỀN

Nếu bạn cần điều chỉnh vị trí hình nền hãy sử dụng đoạn mã này bên dưới các đoạn mã trên.

background-position: Y X;

Hãy tưởng tượng hệ tọa độ OXY, trong đó:

Y: trục tung, canh dọc.
X: trục hoành, canh ngang.

Giá trị của nó là:

Y: top, center, bottom (đầu, giữa, cuối)
X: left, center, right (trái, giữa, phải)


Ví dụ:

Bạn muốn hình nền nằm phía dưới, góc trái: background-position: bottom left;
Bạn muốn hình nền canh giữa trên: background-position: center center;

CỐ ĐỊNH HÌNH NỀN

Để cố định hình nền bạn đặt dòng sau phía dưới đoạn mã liên kết đến ảnh.

background-attachment: fixed;


TẤT CẢ TRONG MỘT

body {
background-color: #E31122;
background-image: url(LIÊN KẾT ĐẾN HÌNH ẢNH);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;


Hãy xem blog của tôi như là kết quả hiển thị.

Tham gia Cộng đồng sử dụng Blogger Việt Nam trên Facebook, giải đáp thắc mắc, mẹo vặt, chia sẻ kinh nghiệm sử dụng Blogger (BlogSpot)...

46 comments:

  1. Hướng dẫn sao mà nói chung chung thế ! Có thể làm cụ thể và cho vídụ minh họa đc ko ạh ! Em ngốc lắm chẳng thể hiểu ngay những gì trong blog nói ! Cố tìm lắm những ko thể làm đc !

    ReplyDelete
  2. Huong dan rat cu the lam roi. Ban lam dung nhung gi huong dan la duoc.

    ReplyDelete
  3. bạn oi cho minh hoi: mình đã làm theo hướng dẫn của bạn, nhưng hình nền nó lại nằm ở phía dưới blog đè lên, ban lam on chỉ cụ thể cho mình với. Cám on nhiều

    ReplyDelete
  4. Đương nhiên hình nền thì phải nằm phía dưới. Đã gọi là nền rồi mà!

    ReplyDelete
  5. Ý mình muốn nói là hình nền ở blog của mình nó nằm ở dưới nhưng là ở dưới khung của blog, k phải dưới phần chữ viết. Thành ra bài viết vẫn nằm trên nền trắng, còn ảnh thì lại nằm dưới cái nền trắng đó, thành ra chả thấy hình nền mình đặt đâu, chỉ thấy rìa rìa ở quanh 4 cạnh của blog thôi mặc dù mình đã dặt đúng như thông số bạn hướng dẫn
    Bạn kiểm tra lại hộ xem mình dặt thế này có đúng k nhé

    body {
    background-colour: #E31122;
    background-image: url(http://i144.photobucket.com/albums/r169/tmhang1976/AP18023_summerwallcoo.com-1.jpg);
    background-repeat; no-repeat;
    background-position: center center;
    background-attachment: fixed;

    }

    blockquote {
    margin: 0;
    padding: 0 10px 0 10px;
    border-left: 6px solid #e8f4d3;
    border-right: 6px solid #e8f4d3;
    color: $postTitleColor;
    }

    code {
    color: $postTitleColor;
    }

    hr {
    display: none;
    }

    ReplyDelete
  6. Dear Minh Trí,
    Hình nền của bạn như link trên bao phủ tất cả trang. Nếu bạn muốn hình nền cho phần dưới ở đây có thể hiểu là hình nền cho footer của bạn. Hãy tìm vào Edit HTML (Chỉnh sửa HTML) tìm /* Footer
    ----------------------------------------------- */
    #footer <
    Paste vào đây

    >

    Dán cái này vào:
    background: url(liên kết đến hình làm footer) no-repeat center bottom;

    ReplyDelete
  7. Bạn nhớ chép đoạn mã y như vậy(có dấu ; cuối). Cách khác: Bạn chỉ cần một hình đúng kích thước hiển thị vào góc, không viết gì lên trên đây (Đối với hình nền, bạn có thể viết text lên trên nó), chỉ cần add widget HTML/Javascript và dùng code <img src="liên kết đến hình" />

    ReplyDelete
  8. cam on ban da huong dan nhe! Nhung ban lam on huong dan cu the 1 ty duoc k? Minh hoi bị "carot" vu nay. Lam mai ma chua duoc, nó van y nhu cu:

    #footer {
    background-colour: #E31122;
    background-image: url(http://i144.photobucket.com/albums/r169/tmhang1976/wallcoo_com_0w05_1024_2a.jpg);
    background-repeat; no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background: url (http://i144.photobucket.com/albums/r169/tmhang1976/wallcoo_com_0w05_1024_2a.jpg) no-repeat center bottom;
    }

    Minh van bi sai o cho nao nhi?

    ReplyDelete
  9. background:url(http://i144.photobucket.com/albums/r169/tmhang1976/wallcoo_com_0w05_1024_2a.jpg) no-repeat center bottom;

    Bạn chỉ cần chép đoạn mã trên vào footer thôi. Nhớ chép đúng. Đừng thay đổi gì. Trên footer sẽ có các thông tin khác. Bạn cứ chèn đoạn mã này vào và lưu lại.

    ReplyDelete
  10. oài, vẫn không được bạn ạ, minh vẫn bị sai o chỗ nào đó hay sao ý

    body {
    background-colour: #E31122;
    background-image: url(http://i144.photobucket.com/albums/r169/tmhang1976/wallcoo_com_0w05_1024_2a.jpg);
    background-repeat; no-repeat;
    background-position: center center;
    background-attachment: fixed;

    }

    blockquote {
    margin: 0;
    padding: 0 10px 0 10px;
    border-left: 6px solid #e8f4d3;
    border-right: 6px solid #e8f4d3;
    color: $postTitleColor;
    }

    code {
    color: $postTitleColor;
    }

    hr {
    display: none;
    }


    #footer {
    background: url (http://i144.photobucket.com/albums/r169/tmhang1976/wallcoo_com_0w05_1024_2a.jpg)no-repeat center bottom;
    text-align: center;
    min-height: 2em;
    }

    Bạn kiểm tra giúp mình với, cám ơn nhiều nhiều nhé!

    ReplyDelete
  11. Bạn làm đúng rồi, nhưng tấm hình bạn dùng chưa đúng. Lý do: Tấm hình bạn dùng kích thước lớn, nó sẽ chiếm hết diện tích nên bạn không thấy. Để dễ hiểu, bạn hãy xem blog này là ví dụ: http://www.1millionlovemessages.com.
    Hình nền header mà họ dùng:http://i157.photobucket.com/albums/t56/1millionlovemessages/74-toporedondo.jpg.
    Hình nền footer họ dùng: http://i157.photobucket.com/albums/t56/1millionlovemessages/74-footer.jpg
    Bạn cũng có thể xem một ví dụ khác : http://giangdaytructuyen.blogspot.com sử dụng một hình nền trên header. Trông chẳng khác một trang web bạn nhỉ?

    ReplyDelete
  12. Hãy kiểm tra kích thước footer của bạn. Dùng một chương trình để cắt một hình nền phù hợp với kích thước hoặc bạn có thể dùng một tấm ảnh nhỏ để bao phủ cả footer(nếu dùng theo hướng này bạn phải chèn thêm background-repeat: repeat-x; hoặc repeat-y; tùy theo ngay hay dọc của tấm ảnh)

    ReplyDelete
  13. cai cho template|fonts and color no nam od au vay...tim co thayd au...

    ReplyDelete
  14. vc chèn ảnh (background) body toàn blog hình như chỉ phục vụ cho tùy loại theme thôi thì phải các thành phần khác thì chèn ảnh tốt ,chỉ co loại theme 3 cột thì không thấy cho chèn ảnh background vào dc thì phải (nhìn thành phần code )

    body {
    background-color:#C6DEFF;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    mà chèn background bằng ảnh đôi lúc cũng không khoái lắm vì khi load trang sẽ chậm lên theo cách chỉnh sửa mã mầu thì tốt hơn
    dưới đây là bảng mã mầu mình siu tầm các bạn nhìn mã mầu để điều chỉnh tùy ý

    http://z3.invisionfree.com/nghenhacodecca/index.php?showtopic=1009

    ReplyDelete
  15. troj` oj, noj' chung la` muon' tao. 1 hjnh` nen` khac' cho blog chu' ko faj~ la` hjnh` nen` co' san~ trong change theme chu j`. de~ ot ah`, moj ng` dzo web 360themes.com. sau do' dang ki' thanh` vien .
    b1: dzo library themes , tjm` cho mjnh` 1 themes ma` mjnh` thjch' ruj` an' dzo 2 lan`. no' se~ hjen ra 1 trang khac' .
    b2: dzo download , no' se~ hjen ra cho minh` 1 doan code (tum` lum chu~ , ban ko the~ hieu~ la` j`) .
    b3: ban copy doan code do'
    b4: ban vao` blog cua ban , trang my page.
    b5 : ban paste doan code do' vao` o^ dja. chj~ my page (nghja~ la` o^ ban dung` de~ ghj dja. chj~ web do', copy doan code do' vao` cho~ o^ do')
    b5: enter va` doj.

    ReplyDelete
  16. Cảm ơn anh! Bài blog này rất hữu ích. Em đã giải đáp được thắc mắc của riêng mình trong mí cái đổi theme tưởng chừng như rắc rối này.

    Thanks much :x :x :x!!!

    ReplyDelete
  17. mình gà quá không tìm thấy Template ở chỗ nào hết.Bạn chỉ giúp mình với.

    ReplyDelete
  18. lam the nao de nay dc links cua hinh nen tui co san hinh neen ui`

    ReplyDelete
  19. Dung la minh doc may lan va tim mai ma khong thay "Template" o dau ban a?!
    Phien ban chi giup nhe!
    Thanks!(-_-)

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. hình nền cho blog này

    body {
    background-image:url(http://i196.photobucket.com/albums/aa61/quocphu67/untitled.jpg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-attachment: fixed;

    Demo: http://lop12a1qx4.blogspot.com/

    ReplyDelete
  22. thế tớ mún cài hình nền cho blog tiếng việt thì tớ phải làm thế nào hả bạn? Cái này tớ gà lém.chịu thoai. Giúp tớ với naz!

    ReplyDelete
  23. @jn_jn_baby, search trên mạng hoặc nhờ ai đó design lấy một cái!

    ReplyDelete
  24. mih` hok thia' chu*~ template +)a^u hit' mi' ban. giup' mih` zo*i'

    ReplyDelete
  25. cho minh` hoi? neu' hinh` nen` cua? minh` nho? ma` minh` muon' cho no' lon' len vừa bằng màn hình thì làm sao? mình da~ làm nhiều cánh rùi nhung ko duoc
    lam` on giup' minh`

    ReplyDelete
  26. ...Hix các anh chị cho e hoỉ tí ạ...Blog e cơ bản đã hoàn thành hết ruì ạ...nhưng cái khung để mọi ngừi comments ngoài bài viết (hay nằm bên góc trái fiá dứi maà hình í)thì e kím hoài hun thấy ạ.Trước đây e cũng hun để í...e đã vào setting mày mò đủ cả ruì nhưng vẫn ko seo cho ra dc caá khung đó.hix.Mong các anh chị chỉ bảo ạ..e cám ơn nhắm nhắm>_< ngày mới xinh tưi he!!!

    ReplyDelete
  27. Xin hướng dẫn cách tạo và upfile lên page.google.com.
    Thanks!
    email của em : dominh.lisa@gmail.com

    ReplyDelete
  28. anh( chị) ơi! có ai chỉ giúp em phần này với. Em copy code bên trên vào CSS nhưng hìng nền ko bao quát toàn trang mà vẫn bị lặp lai .anh (chị) xem giúp em với .thank anh ( chị ) nhiều nhiều.
    body {background-color:#ffffff;background-image:url(http://a367.yahoofs.com/lifestory/MeEVsAybExLiWNcPl6vZjw--_1/blog/20090308102526392.jpg.jpg?lb_____D6LyPVpwU);background-repeat:no-repeat;background-attachment:fixed;
    #blog_masshead .rc{background:transparent;}#blog_masshead .rc div{background:transparent;}#blog_masshead .rc_bd{background:transparent;}#blog_masshead .rc_bc{background:transparent;}#blog_masshead .rc_ft{background:transparent;}#blog_masshead .rc_ft div{background:transparent;}#blog_masshead .bd{background:transparent;}#blog_masshead{background:transparent;}
    {background:transparent;}#blog_title .bd{background:transparent;}
    #blast .rc_bc .bd{background:transparent;}

    #blast .rc_ft, #blast .rc_ft div{background:transparent no-repeat left top;}

    #blast .rc div {background:transparent;}

    #blast .rc {background:transparent;}

    #blast .rc_bd div.rc_bc {background:transparent;}

    #blast .rc_bd {background:transparent;}

    #blast .rc_ft {background:transparent;}

    #blast .rc_ft div {background:transparent;}


    color:transparent;}

    ReplyDelete
  29. em ch hieu j ve blog ca!em cung chang biet dua hinh nen va bolg duoc. Giup em voi

    ReplyDelete
  30. anh ơi cho em hỏi, mình copy code đo rồi past vào chổ nào vậy anh, có thể chỉ chi tiết dùm em với

    ReplyDelete
  31. hjc...hjc em muốn tạo theme từ nhữg hìh ảnh cua mình thj fãi làm sao hả anh...júp em với..........

    ReplyDelete
  32. mình không hiểu gì hết . mình muốn làm hình nền cho 360plus kìa nhưng không biết cách làm vả lại chèn hình làm sao?

    ReplyDelete
  33. anh ơi!!!em đã chèn nhìu lần vào phần "chỉnh sửa HTML" mà chèn xong nó có ra cái mô đâu.bực mình...do em mới làm blog nên hơi ngu tí,anh chỉ zùm em nha!!! blog của em là bloger.em cảm ơn anh trước

    ReplyDelete
  34. minh vao web 360 themes.com. chon hinh roi den luc download no noi phai sign in ,minh cung sign in ,dien thong tin ma sao no cu bao la co loi hoai , ko dc ,

    ReplyDelete
  35. anh gì ơi cho tôi hỏi làm thế nào để chèn hình ảnh vào blog vậy còn cả hình nền nữa khó quá trời

    ReplyDelete
  36. ngoi_sao_xanh966June 18, 2010 at 9:56 AM

    hok hju sao minh doc mai van hok hju nhj, minh nho pan lem jup minh caj hjh nen cho blog mjh nha . dia chj no la :http://vn.360plus.yahoo.com/ngoi_sao_xanh966/ mjh kam on nhju nha

    ReplyDelete
  37. em tạo một blog tren blogtiengviet
    ma man hinh cua no chang co cho nao co template ca. em muon cai mot hinh nen tu may tinh vao lieu co dc khong a?
    voi lai em muon bo danh sach blogger
    truc tuyen hien o phia trai man hinh dc khong a?
    a giup e voi
    nguyenhaiyen377@gmail.com
    that su thi em moi may mo tao blog thoi
    con chua biet j ve no ca

    ReplyDelete
  38. đoạn body của mình như vầy:
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }
    blog mình làm dựa trên theme có sẵn của blogspot, bây giờ mình muốn thêm hiệu ứng bông tuyết rơi trên toàn bộ trang blog nhưng ko làm mất cái theme thì phải làm sao hả bạn

    ReplyDelete
  39. @Anonymous, hiện ứng bông tuyết rơi bạn có thể sử dụng JavaScript. Xin đón đọc bài viết tiếp theo nhé!

    ReplyDelete
  40. p cho m hoi ko hjeu taj sao blog cua mjh bay gio ko vao dc nua la lam sao.

    ReplyDelete
  41. http://www.google.com.vn/imgres?imgurl=http://files.myopera.com/thanhhuy_pk/albums/342110/theme%2520audition%252019-8%2520lonely%2520girl.jpg&imgrefurl=http://my.opera.com/thanhhuy_pk/albums/showpic.dml%3Falbum%3D342110%26picture%3D8628268&usg=__qh8S9k5LngFsx-Lqyma3ZcKFv3M=&h=799&w=1024&sz=125&hl=vi&start=62&zoom=1&tbnid=qzGMOPlz6QU2fM:&tbnh=117&tbnw=150&ei=FT4nT_ahE4nPrQfi773JAQ&prev=/search%3Fq%3Dhinh%2Bnen%2Bblog%26start%3D42%26um%3D1%26hl%3Dvi%26sa%3DN%26gbv%3D2%26tbm%3Disch&um=1&itbs=1

    ReplyDelete
  42. Bạn cho mình hỏi mình muốn chỉnh hình ảnh của header vào giữa thì sao, nó nằm 1 bên nhìn khó coi wa'.
    Blog mình đây: http://chuonchuonot-group.blogspot.com/
    Bạn giúp mình nha

    ReplyDelete
  43. Thủ thuật Blog cho mọi người ở đây :
    www.kienmoccompany.co.cc
    Bạn có thể gửi câu hỏi qua email : kienmoco@gmail.com

    ReplyDelete
  44. Khi vào trang web http://www.kienmoccompany.co.cc
    Bạn vui lòng để lại lời nhắn và địa chỉ email ở góc phải .
    thanks all !

    ReplyDelete

Cám ơn đã đọc bài viết. Bạn có thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới. Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc hơn. Xin đừng spam!

Do gần đây nhận rất nhiều spam bán thuốc từ nước ngoài, tạm thời để bình luận bạn bắt buộc phải có tài khoản OpenID hoặc Google. Chức năng này sẽ được khôi phục khi trình trạng spam được cải thiện. Xin lỗi về sự bất tiện này.