Thiết kế template blogspot từng bước (Phần 1)

Thiết kế template blogspot từng bước (Phần 1)

on 2 comments
Đây là bài viết đầu tiên của Series Thiết kế Blogspot (Blogger). Bài này chúng ta sẽ đi tìm hiểu sơ lược thành phần của 1 Template. Sau khi hoàn tất Series này bạn có thể tự thiết kế hoặc tùy biến giao diện Template theo cách riêng của bạn.


Đầu tiên mình giới thiệu sơ lược cấu trúc 1 Template ?

Yêu cầu: 
  • Kiến thức: cần nắm cơ bản Html, Css, nâng cao hơn thì thêm javascript. 
  • Phần mềm: Notepad++ hoặc Sublime Text ...

Dưới đây là phần khung của 1 Template.

<?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>
<b:skin>
<![CDATA[/*
Nơi đặt CSS giao diện
]]></b:skin>
<b:template-skin><![CDATA[
Nơi đặt CSS cho "Layout" (Không Quan Trọng)
]]></b:template-skin>
</head>
<body expr:class='data:blog.pageType'>
Nơi đặt code nội dung trang Blog
</body>
</html>


Sau khi nắm được cấu trúc của 1 Template thì bạn sẽ thiết kế giống như 1 website bình thường nhưng giữ nguyên Code bên dưới:

<b:section class='main' id='main' maxwidgets='1' name='Main Posts' showaddelement='yes'>
     <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
       <b:widget-settings>
       .....
       Đây là phần lấy dữ liệu bài viết "Post" 
       .....
    </b:widget>
</b:section>  

Để làm được như vậy chúng ta cần tạo ra 1 Container chứa đoạn Code trên.

Container blog1
Container Blog1


Tạm kết thúc ở đây, bài viết sau mình sẽ hướng dẫn tạo chi tiết.



Đang cập nhật...


Lê Nguyễn

2 comments