Trong quá trình thiết kế web hay blog chắc hẳn không ít bạn từng nghĩ đến việc chia header ra làm 2 3 phần gì đó hay chèn flash chèn nhạc vvv... vào header. Trong bài viết này mình sẽ đề cập đến cách thức làm việc của header blogger như thế nào và tùy biến header ra sao. Hy vọng sẽ giúp ích được cho các bạn
Những câu hỏi thường gặp với widget header.1. Làm sao chia header ra làm 2 - 3 phần?
2. Làm sao chèn nhạc, flash vào header?
3. Làm sao gắng tiện ích khác (quảng cáo chẳng hạn) lên header?
4. Làm sao xóa header vì thấy nó thừa thải quá...
Giải đáp cho các câu hỏi đó của các bạn tại đây.Phần 1: Nói về widget header của blogger.
Khi vào template của bạn , bạn sẽ thấy có 1 đoạn code tương tự như thế này.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Viettin24h-Tin tức,Giải trí,Thủ thuật tổng hợp (Tiêu đề)' type='Header'/>
</b:section>
Dòng chữ mình tô đỏ sẽ khác nhau tùy blog. Đoạn code trên là đoạn code của widget header. Bài viết này chúng ta sẽ làm việc với nó đây. Mình tạm gọi nó là đoạn code A nha.
Khuyến cáo các bạn nếu muốn tìm hiểu thì nên tạo 1 trang blog mới. Xóa toàn bộ template và chỉ để lại cấu trúc cơ bản và widget header để tiện tìm hiểu.
Nếu lười thì tạo blog mới rồi copy toàn bộ đoạn code bên dưới về paste vào template ngồi tìm hiểu.
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[
#box{background:red; margin:0 auto; text-align:center; }
]]></b:skin>
</head>
<body>
<div id='box'>
<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Viettin24h-Tin tức,Giải trí,Thủ thuật tổng hợp (Tiêu đề)' type='Header'/>
</b:section>
</div>
<b:section class='sbar1' id='sbar1' showaddelement='yes'/>
</body>
</html>
Cấu trúc bên trên sẽ rất đơn giản. Bây giờ bạn vào chỉnh sửa mẫu bạn sẽ thấy đoạn code A trên sẽ xuất hiện rất nhiều code nhỏ trong đó. Nó sẽ có dạng giống giống như sau:
<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Võ Quốc An Blog (Tiêu đề)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
Trong đoạn code trên mình đã đánh dấu 1 số code màu đỏ. Nhìn đoạn code trên thì khá lằng nhằng cũng không cần hiểu nhiều làm gì. Mình xin giải thích đoạn code đó ngắn gọn dể hiểu là:
Nếu header có sử dụng ảnh làm nền thì set background-img của header là liên kết ảnh vừa ải lên. Xuất tên blog và mô tả blog ra header. Ngược lại nếu header không sử dụng ảnh thì xuất tên blog và mô tả blog ra header.
Mình chỉ dịch đại khái những dòng lệnh trên cho mọi người dể hiểu chứ không dịch sát nghĩa từng đoạn code nên đừng bắt lỗi chổ này làm gì nha.
Ý nghĩa của mấy đoạn code màu đỏ mình đã đánh dấu.
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
Tương đương với
<div style='background-image:url(link_ảnh); background-position:...; background-repeat:no-repeat;' id='header-inner'>
<data:title/>: Xuất ra tên blog.
<data:description/>: Xuất ra dòng mô tả blog.
data:blog.homepageUrl: Xuất ra địa chỉ trang chủ.
Cơ bản header chỉ làm nhiêu đó việc thôi. Bây giờ đã nắm được cách làm việc của header rồi thì mình khuyến khích các bạn nên viết code header bằng tay mà không cần sử dụng đếnđoạn code A nữa. Và để làm được điều đó thì mình cần xác định là header của mình cần những gì.
Ví dụ: bạn muốn header của mình chỉ có tên blog và mô tả blog thì thay đoạn code A thành
<div id='blogheader'>
<div class='titlewrapper'>
Tên Blog Của Bạn.</div>
<div class='descriptionwrapper'>
Mô Tả (Slowgun) của blog. </div>
</div>
Xong chỉ việc cài thuộc tính css cho 2 class titlewrapper và descriptionwrapper và chèn trước thẻ ]]></b:skin> là xong.
Nếu muốn background của header có ảnh thì chỉ việc cài đặt css background:url(link_ảnh)cho id Blogheader là xong.
Nếu chưa biết về css thì bạn xem qua bài viết css căn bản.
Ưu nhược điểm của 2 cách làm trên. Về mức độ tiện dụng thì hiển nhiên là dùng widget có sẵn của blogger là tiện hơn rồi. Không cần phải hiểu nhiều gì về code.
Còn về thời gian load thì dễ thấy rằng với cách code bằng tay khi load chỉ cần xuất ra 1 dòng chữ thay vì phải load 1 widget rồi phải xuất data từ widget đó ra. Mỗi widget tiết kiệm 1 chút thời gian thì blog của bạn sẽ nhanh hơn đáng kể đó.
Phần 2: Tùy biến header của blogger.
Như ban đầu mình đã đề cập. Làm sao để chia header ra 2 - 3 phần hoặc làm sao chèn flash, nhạc vào header sẽ được giải quyết trong phần 2 này.
Ví dụ: Mình muốn chia header ra 2 phần. Phần bên trái chứa tên blog, slowgun của blog. Phần bên phải chứa 1 bài nhạc. Cách làm như sau:
Tìm đến đoạn code A như mình đã nếu ở phần 1. Thêm vào trước vào sau đoạn code A theo mẫu sau:
<div class='header'>
<div class='header1'>
Đoạn code A
</div>
<div class='header2'>
Code của bài hát hoặc flash hoặc bất kỳ 1 đoạn code gì đó.
</div>
<div style='clear:both'/>
</div>
Mục đích của việc làm trên là tạo ra các module chứa các thành phần mình muốn thêm vào. Ví dụ ở trên là mình tạo ra module header chứa 2 module con là header1 và header2.
Tiếp theo là cài đặt css qui định chiều rộng chiều cao của các header trên và chèn trước thẻ]]></b:skin>. Đoạn css bên dưới là 1 ví dụ.
.header{
width:550px;
height:60px;
text-align:center;
box-shadow:1px 1px 3px 3px #666;}
.header1{
width:330px;
height:40px;
float:left;
padding:10px;
color:#333;}
.header2{
width:200px;
height:60px;
float:right;}
Cơ bản chỉ bao nhiêu đó thôi.
Lưu ý: trong demo bên dưới các class chứa css mình để bên trong thẻ <style type='text/css'>...</style> Khi đưa vào template thì bạn để các class phía trên thẻ ]]></b:skin> là được.
Chúc các bạn thành công .
