Header được biểu diễn ở 2 khu vực trong mã template của bạn.
1) Khu vực thứ nhất có chức năng mô tả những đặc tính vật lý của Header. Dưới đây là ví dụ :
/* Blog Header---------------------- */
#header-wrapper {
background:$titleBgColor url("http://www.photobucket.com/crazyboy_89.gif") no-repeat
left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.photobucket.com/crazyboy_2509.gif") no-repeat left bottom;
xxxxxxxxxxx
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}
Bạn có thể thấy tất cả các đặc tính vật lí của Header như: background, margin, padding, textcolor..đều được miêu tả ở đây.Tiêu đề (title) của bạn được biểu diễn ở #header h1 , còn phần mô tả tiêu đề (description) được biểu diễn ở #header .description. Các đường link đến tiêu đề được biểu diễn ở #header a,#header a:visited.
Để tùy biến những đặc tính vật lí của header, bạn phải thay đổi những đoạn mã trên. Ví dụ : khi muốn tăng chiều rông cho header lên 750px (px là đơn vị độ dài), bạn phải thêm đoạn mã Width:"750px"; vào dòng xxxxxxxxxxx ở trên. Nếu bạn muốn tăng chiều cao, chỉ cần thêm vào đoạn mã Height:"750px"; vào vị trí tương tự như trên. Có các đặc tính mà bạn co thể thay đổi được như:
padding:0 015px 8px;
background-color:#003333;
border:solid thick ;
height:125px;
width:725px;
margin:10px 0 0 0;
Để có thể tìm hiểu thêm về margin và padding bạn có thể đọc bài viết của tôi :Tìm hiểu Margin và Padding.
Bạn có thể thấy đoạn code đầu tiên có những biến : $titleTextColor, $pageTitleFont, $descriptionFont. Chúng là những biến quy định mầu sắc, font chữ, giúp bạn có thể điều chỉnh dễ dàng tại Font and Color trong Templte.
2) Khu vực thứ 2 của Header là nơi thể hiện phần các phần tử của Header được biểu diễn trên blog.
Một mẫu code Header sẽ được được đưa ra phía dưới.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3'showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name="'quickedit'/">
</b:includable>
</b:widget>
</b:section>
</div>
Mã maxwidgets='3' thể hiện số phần tử tối đa có thể tạo được trên Header. Các template thông thường không có chức năng tạo các phần tử ở Header.Bạn có thể tham khảo cách tạo thêm các phần tử trong các bài viết của tôi.
Tiếp đến là mã showaddelement='yes', mã này cho phép Add a Page Element có xuất hiện trên Header hay không.
Bây giờ bạn đã có thể thay đổi Header của mình rồi đó. Hãy làm thử và bạn sẽ thấy việc này không quá phức tạp đâu. Chúc bạn thành công.
Cám ơn các bạn đã theo dõi bài viết. Mong sẽ nhận được nhiều ý kiến đóng góp từ các bạn để giúp hoàn thiện nội dung bài viết hơn..
Chúc các bạn có 1 ngày vui vẻ!
2 comments:
[B]NZBsRus.com[/B]
Escape Sluggish Downloads With NZB Downloads You Can Hastily Find Movies, PC Games, MP3 Albums, Software and Download Them at Electric Speeds
[URL=http://www.nzbsrus.com][B]NZB Search[/B][/URL]
Devoutness casinos? scrutinization this advanced [url=http://www.realcazinoz.com]casino[/url] confidante and kidnap up online casino games like slots, blackjack, roulette, baccarat and more at www.realcazinoz.com .
you can also discontinuation our up to rendezvous [url=http://freecasinogames2010.webs.com]casino[/url] manage at http://freecasinogames2010.webs.com and enlargement the attempt the odds proprietress folding transmute !
another swaggerer [url=http://www.ttittancasino.com]casino spiele[/url] locale is www.ttittancasino.com , during german gamblers, pressurize not employed online casino bonus.
Post a Comment