Thiết kế phần header cho blogspot

GroupMMO tháng 10 28, 2017

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 blogvuicuoilen này nhé.

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

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 100x100 px hoặc xem bài viết này để tự tạo một cái logo siêu đơn giản 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

<div id="searchbox">
<form id="searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="" onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPpG6sJd7vsoAgMUa87XtRct_W0E-jFXtEVEnoTWmRonxGWLUnraQ1-P60XF0pgFPIxaw6MzJADDzf67mTzBryvQJuVo4wIQQKqNYla6vZMxafvKDUMAYDuezcrovtEOjGDsLEs4MCe6I/s1600/searchbox1-namkna-blogspot-com.png" id="sbutton" />
</form>
</div>

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 blogvuicuoilen 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. Không demo nữa nhé, nhìn vào giao diện blogvuicuoilen thấy liền.
Đã xong phần thiết kế header cho Blogspot, ai có thắc mắc hay không làm được để lại comment mình giải đáp cho nhá.