Chèn Banner hình ảnh cho blogger

(Thêm Banner hình ảnh cho blogger)

- Banner là một thành phần rất quan trọng đối với 1 Website, Blog, ứng dụng Web… Banner thể hiện được mục tiêu và hướng đi của trang Web và nó thu hút, lôi cuốn sự chú ý của người xem. Khi người xem truy cập vào 1 địa chỉ Web nào đó, 2 thành phần mà người xem thường quan tâm đầu tiên đó là Logo và Banner. 

Đối với các Website hay Blog, thường có 2 cách để đặt Banner, đó là sử dụng thuộc tính background-image:url trong CSS hoặc thiết lập trên giao diện Web của người quản trị.

Hôm nay, Kênh phần mềm sẽ giới thiệu với các bạn 2 cách để đưa Banner quảng cáo hoặc hình ảnh vào Header của blog.

1. SỬ DỤNG CSS
- B1: Đăng nhập vào blogger,
- B2: Chọn Trình bày > Mẫu > Chỉnh sửa HTML
- B3: Các bạn kiếm dòng dưới đây

Đoạn mã 1:

#header-wrapper {
width:940px;
margin:0 auto 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}

- B4: Thêm đường dẫn ảnh Banner
Thêm dòng này

background-image:url('địa chỉ');

vào sau dòng

margin:0 auto 10px;

Như vậy đoạn mã 1 của bạn sẽ là:

#header-wrapper {
width:940px;
margin:0 auto 10px;
background-image:url('địa chỉ');
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}

Trong đó địa chỉ bạn điền đường dẫn đầy đủ của banner. VD bạn có 1 banner tại địa chỉ: http://1.bp.blogspot.com/-oHe-C9BE524/UorCTf6r-HI/AAAAAAAAAww/JdaQxtxRFuM/s1600/Banner_CustomSoftware.png thì đoạn mã sẽ là:

#header-wrapper {
width:940px;
margin:0 auto 10px;
background-image:url('http://1.bp.blogspot.com/-oHe-C9BE524/UorCTf6r-HI/AAAAAAAAAww/JdaQxtxRFuM/s1600/Banner_CustomSoftware.png');
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}

- B5: Lưu lại các thay đổi.

2. SỬ DỤNG GIAO DIỆN QUẢN TRỊ ADMIN

- B1: Đăng nhập vào Blogger

- B2: Kích chọn Menu Bố cục (Layout), kích nút Edit tại mục Header

- B3: Hộp thoại xuất hiện

- Lựa chọn hình ảnh từ máy tính hoặc từ 1 địa chỉ Internet

- Lựa chọn Thay cho tiêu đề và mô tả (Instead of title and description) tại mục Vị trí 

- B4: Kích nút Lưu

Ấn F5 để tải lại Blog, bạn sẽ nhìn thấy Banner đã được chèn vào Blog.

Tin học văn phòng