(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
Comments[ 0 ]
Đăng nhận xét