DONATE VÀ ĐẶT CÂU HỎI

Mỗi Donate của bạn là động lực để tôi phát triển Blog

Số Vietcombank: 0721 0006 096 05

Họ Tên: Huynh Hai Phung

Ngân hàng VCB Bình Thạnh TPHCM

Thông tin chuyển khoản: Mời cafe bạn Huỳnh Phụng Blogger


Số ACB: 214 081 769

Họ Tên: Huynh Hai Phung

Ngân hàng ACB Tân Bình (Ngân hàng Á Châu Tân Bình)

[tintuc]

Xin chào các bạn, các bạn vừa trãi qua Serie Học Blogger Cơ Bản và đây là bài viết thứ #11 và Title bài viết hôm nay cực kì hot là Tìm hiểu cấu trúc của một Template blogger hoạt động như thế nào, cũng như các thành phần trong blogger

Cấu trúc của 1 website cơ bản như sau

<html>
<head>
<body>
<b:skin>
Giữa cặp thẻ Skin sẽ lưu trữ Code CSS
</b:skin>
</head>
Giữa cặp thẻ <body>...</body> sẽ chứa 2 cặp thẻ <skin>...<b:skin> và <head>...</head>. Nơi đây chứa Code Javacript
</body>
</html>

Cấu trúc của Blogger Template cơ bản như sau

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<b:skin><![CDATA[

]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' showaddelement='no'>
</b:section>
</body>
</html>

Đoạn code này chứa đầy đủ thành phần của cấu trúc web HTML. OK bây giờ chúng ta đã hiểu rõ các mà Template Blogger làm việc.

Tiếp theo chúng ta thêm các thành phần vào trong các cặp thẻ <skin>...<b:skin> và <head>...</head>
và sẽ được như sau, bạn dán tất cả vào và sẽ được Layout đơn giản như sau:




<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả về blog của bạn' name='description'/>
<meta content='Các từ khóa trên blog của bạn' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot; - Mô tả về blog của bạn&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Các từ khóa trên blog của bạn&quot;' name='keywords'/>
</b:if>
<b:skin><![CDATA[
body{
background: #cccccc;
font: 16px georgia;
}
#box{
Background:#3399bb;
Width: 990px;
Margin:0 auto;
}
#header{
Background:#4499bb;
thuộc tính 1;
thuộc tính 2;
...;
}
#main-outer{
Background:#113366;
}
#footer{
Background:#6600ee;
}
#sidebar1{
Background:#884400;
width:200px;
float:left;
}
#main{
Background:#646853;
width:590px;
float:left;
}
#sidebar2{
Background:#518643;
width:200px;
float:right;
}
#navbar-iframe {height:0px;visibility:hidden;display:none}
h2 {padding:0; margin:0}
]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Thanh điều hướng' type='Navbar'/>
</b:section>
<div id='box'>
 Nội Dung Blog
 <div id='header'>
  Nội Dung header
  <b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='(Tiêu đề)' type='Header'/>
  </b:section>
 </div>
 <div id='main-outer'>
  <div id='sidebar1'>
         Nội Dung sidebar1
   <b:section class='sbar1' id='sbar1' showaddelement='yes'/>
  </div>
  <div id='main'>
   Nội Dung Bài Viết
   <b:section class='mainpost' id='mainpost' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
   </b:section>
  </div>
  <div id='sidebar2'>
   Nội Dung sidebar2
   <b:section class='sbar2' id='sbar2' showaddelement='yes'/>
  </div>
 <div style='clear:both'/>
 </div>
 <div id='footer'>
  Nội Dung Footer
 </div>
</div>
</body>
</html>

Hẹn gặp bạn ở bài viết chuyên sau tiếp theo để giải mã bí mật của Blogger.
[/tintuc]
Chia sẻ