Admin
-
tháng 5 22, 2014 ngày Thứ Năm, 22 tháng 5, 2014
-
0 bình luận
-
lượt xem
http://hotrokythuatit.blogspot.com/2014/05/chen-banner-hinh-anh-cho-blogger.html
( 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...
(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:
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;}
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òngmargin: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;}
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;}
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


Một số lưu ý khi bình luận
Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)
Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời
Để bình luận một đoạn code, hãy mã hóa code trước nhé