28 thg 12, 2012

Thiết kế giao diện cho blogger Step-by-step

Giao diện của blogger được lưu dưới dạng XML. Google Server sẽ biên dịch nội dung XML này thành nội dung mà ta nhìn thấy. Cấu trúc file XML này như sau:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
 <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
 <meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     onceclick
Designer: onceclick
URL:      innov.vn
----------------------------------------------- */
/* Variable definitions
  ====================
*/
/* CSS */
body{
background: black;
color: white;
}
----------------------------------------------- */

]]>
</b:skin>
</head>
<body>
<b:section class='TenBatKy' id='TenDuyNhatBatKy' showaddelement='no'>
<center>Nội dung bạn thấy ở đây</center>
</b:section>
</body>
</html>

Trong phần body phải có tối thiểu một section, và bạn có thể đặt bất kỳ nội dung HTML hoặc widget nào vào đấy.
Với mỗi blog bạn nên chú ý một số địa chỉ sau:

  • Link atom xml: http://tenblog.blogspot.com/feeds/posts/default hoặc http://www.blogger.com/feeds/SoIDCuaBlog/posts/default
  • Link rss xml: http://tenblog.blogspot.com/feeds/posts/default?alt=rss

Section được khai báo theo mẫu sau:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>
Trong đó id là tên duy nhất, class là tên định dạng css, maxwidgets là số widget tối đa. Mỗi section có thể chứa nhiều widget. Section không chứa section con và không chứa code khác (trừ HTML).
Widget được khai báo như sau:

<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”>
<b:includable id='main' var='thiswidget'>
[Nội dung của widget]
</b:includable>
</b:widget>
Trong đó id là tên duy nhất, type thuộc một trong các loại sau:


  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar







Không có nhận xét nào:

Đăng nhận xét

Vui lòng viết bằng tiếng Việt có dấu hoặc tiếng Anh. Các bình luận với mục đích spam, quảng cáo sẽ bị xóa mà không báo trước. Hệ thống tự động nhận diện link hình ảnh và các biểu tượng emotion.