Loading post navigation ...
 
 

Pro page

10
Nhận xét

Remove Header và thay thế bằng Ảnh

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Có nhiều cách khác nhau để trang trí, chỉnh sửa Header của blog, và đây là một trong những cách đó. Thủ thuật này rất cơ bản và đơn giản, thích hợp cho những bạn mới bắt đầu làm quen với việc chỉnh sửa giao diện của blogspot.




Hình ảnh minh họa:

trước khi thực hiện thủ thuật


sau khi thực hiện thủ thuật


Với thủ thuật này, ta sẽ có 2 bước thực hiện : bước 1 là làm ẩn header, bước 2 thay thế vùng header đã bị ẩn bằng 1 ảnh (banner)

☼ Bước 1: Ẩn header
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn mở rộng mẫu tiện (expand widget template)
5. Tìm đọan code CSS của header như bên dưới (hoặc code tương tự)

#header-wrapper {
width:700px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

6. Thêm dòng code màu đỏ như bên dưới:

#header-wrapper {
width:700px;
margin:0 auto 10px;
border:1px solid $bordercolor;
display:none;
}

7. Khoan save template lại, tiếp tục thực hiện sang bước 2

☼ Bước 2: Thay thế header đã bị ẩn bằng 1 ảnh (banner)
1. Tiếp tục bước 1, xuống phía dưới, tìm đọan code sau:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header' locked='true' title='Blog FD | Tips For Blogger' type='Header'/>
</b:section>
</div>

2. Thêm vào sau đọan code vừa tìm được đọan code bên dưới:

<a href="URL_OF_YOUR_BLOG"><img src="URL_OF_IMAGE(BANNER)" alt="Home" /></a>

3. Save template.

Chúc các bạn thành công.


Enter your mail address:

10

Jeffy

PD ơi ! Mình làm y như vậy nhưng nó cứ báo như bên dưới . Mình thích cái này lắm , giúp mình với , mình không biết gì về code hết , chĩ làm theo thôi . Cảm ơn PD .

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The value of attribute "title" associated with an element type "null" must not contain the '<' character.

Jeffy

Đọc dòng đó thì mình hiểu nhưng code <> đặt chỗ nào mình không làm dc .

fandung

bạn nên coi kĩ lại xem có sai sót ở đâu không, nếu làm như trên thì sẽ không bị lỗi như vậy.

Lỗi trên báo là trong phần title có chứa kí tự không cho phép, là kí tự '&lt'

- bạn xem lại thử

Jeffy

Tức quá , mình làm hoài không dc , mình sẽ cố gắng làm được , không dược nữa thì sao ta ? :)Cảm ơn bạn .

Jeffy

#header-wrapper {
width:1058px;
margin:0 auto 0px;
background: url(http://i541.photobucket.com/albums/gg399/doimat_2008/logo-3.gif) repeat-x top;
padding:0;
height:130px;
overflow:hidden;

Cái phần này của mình nó không giống bạn nhưng nó vẫn được đúng không ?

fandung

@Jeffy : uh đúng rồi bạn, thêm đoạn code display:none; vào rồi thực hiện các bước tiếp theo.

Jeffy

Nhưng mà cũng không dc luôn đó FanDung , buồn quá .., hix !

Hieuacoustic

#header-wrapper {
width:700px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

:( Hix Fandung ơi giúp mình với, mình thậm chí còn chẳng tìm được đoạn code này của bạn ở đâu trong template của mình nữa cơ.

Mình muốn thay ảnh vào header lắm

Cám ơn bạn nhiều nhé

Hieuacoustic.com

Phan Dũng

@Hieuacoustic : mỗi template sẽ có các code khác nhau, và code mình đưa chỉ là để ví dụ, có thể nó sẽ giống hoàn toàn hoặc tương tự.
Mình đưa code đó là để cho bạn tìm đến đoạn code CSS của header, rồi bạn chỉ sửa.

Khi bạn tìm thấy code CSS của header thì thêm đoạn code màu đỏ vào thôi, rồi tiếp tục thực hiện các bước tiếp theo

Unknown

Anh ơi sao em tìm mãi ko có phần #header-wrapper {
để làm thủ thuật này nhỉ blogspot em chưa có ảnh! có gì giúp em với
gửi qua mail em nhé: byelove890@gmail.com



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home