Home » Thuthuatcoban
Thứ Tư, 21 tháng 12, 2011
Header Tip : Hình ảnh bên trái và tiêu đề bên phải
Khi vào phần chỉnh sửa tiêu đề của blog, ta sẽ thấy có 2 phần. Phần tiêu đề (gồm tiêu đề blog và mô tả blog), phần thứ 2 là logo (banner). Và xuống dưới nữa là lựa chọn ảnh logo nằm sau tiêu đề hay thay thế tiêu đề. Để có thể hiển thị được ảnh sang phía bên trái và tiêu đề sang phải, trước tiên ta phải có 1 tấm hình có kích thước nhỏ hơn chiều rộng của Header.
Với thủ thuật này ta chỉ chỉnh sửa bên CSS mà thôi.
Ví dụ ta có đọan CSS của template Minima như bên dưới:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
- Ở đây chiều rộng là 660px, vậy ta sẽ chọn 1 tấm hình có kích thước khỏang 300px hoặc hỏ hơn. Và tải nó lên blog (trong phần tiêu đề blog), và chọn vị trí là nằm sau "Tiêu đề + Mô tả".
Bấy giờ ta bắt đầu chỉnh sửa CSS. (ở đây ta chỉ chú ý đến 3 class(id) là Header, header h1 và header .description)
1. Tìm đọan CSS sau:(hoặc tương tự)
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
sửa lại là:
#header-inner {
background-position: left;
width:650px;
}
2. Tìm đến CSS của header h1:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
và sửa lại thành:
#header h1 {
margin:0 5px 5px 300px;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
3. Tìm đến CSS của header.description
#header .description {
margin:0 5px 5px;
.........
}
và cũng thay đổi tương tự như của header h1
#header .description {
margin:0 5px 5px 500px;
.........
}
4. Save template lại.
Xem ảnh minh họa bên dưới:
Trước khi chỉnh sửa
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy9_kVkQ9gss5s-3CFlMfoPfPUk5NGoviaC2trMBIrZC1XsUbxw_YeO78Nh63dyJhyeo4ySKxkqkrlRCNVaV4C6OlfWLuxWKw2Kd4iWVynn1Zao_V_RySx2ewq8RgpOWXLjvHtBtixepsV/s400/Centered+Image.jpg)
Sau khi chỉnh sửa
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj80uk9_wbDmoi4A6d-yJICuKhdhKoFOmLiRt6ThErzqD0afsccEw1bJeQ6Bk9TfDFld5WPK1dauUeIR_M0z5jpLgfWajaFJHFi4xW54c77uVU8U3_0uNyZh3r4Zfhcmy-K-KzZZUwul_b9/s400/Custom+Header.jpg)
You may also...
Hot
-
Bài 2 hướng dẫn sử dụng phần mềm Simatic S7.200 để viết chương trình điều khiển cho PLC. Ngoài ra, cũng hướng dẫn sử dụng phần mềm Simulator...
-
Có khá nhiều bạn thắc mắc, gửi yêu cầu cho tôi về cách cài đặt phần mềm cho PLC của Mitsubishi. Tuy nhiên, vì quá bận nên tới nay mới hướng ...
-
Babylon là phần mềm từ điển và dịch thuật hàng đầu thế giới, cung cấp cho bạn công cụ trực quan nhất cho mọi nhu cầu dịch thuật của mìn...
-
(Traidatmui.com) – Hiện nay có rất nhiều trang website cung cấp cho bạn host miễn phí tuy nhiên không phải hosting nào cũng tốt, cũng đảm...
-
1 CÁC LỆNH VÀO / RA OUTPUT: Sao chép nội dung của bit đầu tiên trong ngăn xếp vào bit được chỉ định trong lệnh. Nội dung của ngăn xếp không ...
-
Bài 1 trình bày tổng quan về PLC S7.200, cấu trúc phần cứng, phương thức hoạt động của PLC S7.200. Đồng thời nêu những ưu điểm khi các nhà...
-
Phần mềm tiện lợi trong việc vẽ các sơ đồ mạch điện công nghiệp, được hỗ trợ đầy đủ các kí hiệu của các thiết bị dùng trong công nghiệp như...
-
Bản Ver1 do các link nhạc nằm trên host free và host này đã die, nay mình post Ver2 của nhacf. Bạn viết cũng rất chi tiết rồi nên mình ...
-
(Traidatmui.com) - Tiếp theo thủ thuật tạo bài viết liên quan cho bài viết trên blogspot , mình xin giới thiệu đến các bạn cách tạo "B...
-
http://www.mediafire.com/?ge9udq8hwhgegvu
Comments[ 0 ]
Đăng nhận xét