Header hay còn gọi là phần đầu trang là một phần rất quan trọng. Các bạn có thể để logo của mình trên đó, có thể để banner hay tranh thủ để quảng cáo cũng rất Ok, vấn đề là làm sao để tạo được một header vừa để được logo lại vừa để được banner. Trong bài này mình sẽ hướng dẫn các bạn thiết kế phần header cho Blogspot theo dạng 2 cột như trang AYDzaa này nhé.


Mục lục seri các bài viết hướng dẫn tự thiết kế blogspot:

  1. Tự thiết kế giao diện cho blogspot (dành cho người không biết code)
  2. Sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout
  3. Thiết kế phần header cho blogspot (phần đầu trang)
  4. Thiết kế menu cho blogspot
  5. Tùy chỉnh phần hiển thị nội dung của blogspot
  6. Tùy chỉnh sidebar cho blogspot
  7. Tùy chỉnh footer cho blogspot
  8. Tối ưu giao diện để blogspot chuẩn SEO

Tạo header theo kiểu chia ra 2 phần. Một phần bên trái là logo, bên phải là gì tùy thích 
(banner, khung seach ...). Trong trang blogvuicuoilen mình đã để bên trái là logo còn bên 
phải là khung seach, nếu các bạn không thích khung seach thì có thể để một ảnh banner nhé.

Thêm Logo và đầu trang:

Đầu tiên, các bạn Bố cục --> Logo --> Thêm tiện ích --> Tiêu đề trang



Giờ các bạn chọn Tải lên một cái logo để làm logo cho blog này nhé. Nếu không biết tạo 
logo thế nào thì lấy tạm một cái ảnh nhỏ nhỏ kích thước 150x99 px hoặc bạn tự thiết kế nhé



Tiêu đề và mô tả blog các bạn điền cũng được mà không điền cũng không sao.
Vị trí: các bạn chọn mục Thay cho tiêu đề và mô tả
Nhấn nút Lưu để lưu lại logo của mình.


Vậy là tạm xong phần Logo.

Phần đầu trang bên phải (đầu trang phải):
Phần này mình sẽ không dùng banner mà sẽ tạo một khung seach nhé.
Vào Bố cục --> Layout Đầu trang phải --> Thêm tiện ích --> HTML/Javascript



Tiêu đề:  bỏ trống nhé
Nội dung: paste đoạn code sau vào

<style>

#searchbox {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMVVIP02Q2iQwgZpXK2r4ZZpnhNZLrFzyABLjMHcW4lqN7z79BKmmIzlDnXaI73NRy8wOoGitt3OS1Pa5Y21b2HkqkF4No4imfjzwko_m1QxR0PTpKGpdahjGmPWKtu73GZYYnv2MtO9cH/s1600/search-box.png) no-repeat;

    height: 27px;

    width: 202px;

}

 

input:focus::-webkit-input-placeholder {

    color: transparent;

}

 

input:focus:-moz-placeholder {

    color: transparent;

}

 

input:focus::-moz-placeholder {

    color: transparent;

}

 

#searchbox input {

    outline: none;

}

 

#searchbox input[type="text"] {

    background: transparent;

    margin: 0px 0px 0px 12px;

    padding: 5px 0px 5px 0px;

    border-width: 0px;

    font-family: "Arial Narrow", Arial, sans-serif;

    font-size: 12px;

    font-style: italic;

    width: 77%;

    color: #828282;

    display: inline-table;

    vertical-align: top;

}

 

#button-submit {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi52aRjuXyI7F2M1utxAnmnQWIIvEr98RG9SlEH2mq1prrs5wxINp2-YvA9ktiECjmCKaN5nXJT_lFfst8h0ALPm1I14KFJ9GoRrl4X9qcgTqEEdbP1V5KHBQtj5j7zBP0zjgwp5eUttZL6/s1600/search-button.png) no-repeat;

    border-width: 0px;

    cursor: pointer;

    width: 30px;

    height: 25px;

}

 

#button-submit:hover {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2p4HQOHFaeqOui90N3q9gGRrA2ncNsvUdL9Xmv2JREJNtasebE12twicpr4XI7kPHF1YgvkqCzNZs9DvJOoN2M-rCmlfw9GS30DHG-s1Ibd_Ld5L2wgcL4iwyM9v0WwrxXHOelPPvwS6E/s1600/search-button-hover.png) no-repeat;

}

 

#button-submit::-moz-focus-inner {

    border: 0;

}

</style>

 

<form id="searchbox" method="get" action="/search" autocomplete="off">

<input name="q" type="text" size="15" placeholder="search..." />

<input id="button-submit" type="submit" value="" />

</form>

Nhấn Lưu

Ok, giờ các bạn kiểm tra lại sẽ thấy nó đã hiện logo và khung seach nhưng nhìn không có 
đẹp. Vậy nên cần thêm CSS để cho nó vào đúng vị trí mong muốn.

Thêm CSS cho Logo:

.logo-dau-trang {
padding-left:50%
}

Tuy nhiên, trong HTML ta chưa gán class logo-dau-trang cho phần logo nên giờ vào 
Chỉnh sửa HTML. Tìm <div class='logo'> ngay dưới đó các bạn sẽ thấy đoạn code dạng 
như sau:

<b:section id='Logo' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Vui cười lên (Tiêu đề)' type='Header' version='1'>...</b:widget>
</b:section>

Dòng chữ màu đỏ là dòng chúng ta thêm vào để thẻ <div class='logo'> có thêm tính năng 
Thêm tiện ích. Nếu các bạn đã đặt class cho nó rồi thì sửa CSS theo class đó nhé, còn nếu 
chưa thì sửa dòng màu đỏ đó thành như này:

<b:section class='logo-dau-trang' id='Logo' showaddelement='yes'>

Phần CSS này sẽ đẩy logo vào giữa khoảng div Logo
CSS cho khung Seach:

#searchbox {
float:right;
padding-right: 25%;
margin-top: 20px;
}
form#searchform{padding: 10px 10px;}
form#searchform #s{padding:14px;width:450px;font-size:14px;vertical-align:top;border:1px solid gray;border-radius: 4px;background:white;}
form#searchform #sbutton {margin:0;padding:0;height:45px;width:49px;vertical-align:  top;} 

Với đoạn CSS này khung seach sẽ cách phía bên phải 25% chiều dài của khung Đầu trang 
phải, cách mép trên 20px . Khung seach sẽ có chiểu cao là 28px và dài 450px.
Giờ các bạn bỏ phần background của logo và Đầu trang phải đi sẽ được như trang AYDzaa 
hiện tại. Để bỏ background các bạn seach trong Chỉnh sửa HTML code khi trước các bạn đã 
paste vào hoặc seach theo ID class: .logo { hoặc #dau-trang-phai sẽ ra đoạn css sau:

.logo {
width: 35%;
min-height: 100px;
background: orange;
float:left;
}
#dau-trang-phai {
width: 65%;
min-height: 100px;
background: #42c8fa;
float:right;
}

Các bạn xóa 2 dòng background mà mình bôi đỏ đi rồi Lưu mẫu là xong, ra web xem lại nhé



Đã xong phần thiết kế header cho Blogspot.

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