3. Tùy biến một số tính năng và làm quen một số công cụ
3.1.2. Tùy chỉnh template cho Blog của bạn
Nhìn chung Template của Blogger vẫn có cấu trúc cơ bản giống như cấu trúc của website và gồm có các thành phần sau:
- Body: là toàn bộ viền bao outer các khối mẫu blog của bạn (nói một cách đơn giản nó là toàn bộ những thứ mà bạn nhìn thấy hiển thị trên màn hình).
Blogger Toàn Tập A-Z Trang - 23 - Từ cơ bản đến nâng cao
- Outer-wrapper: nội dung này bao trùm toàn bộ mẫu blog (Body giống như là phần bên ngoài mẫu blog). Nói chung, bạn thiết kế một wrapper để chứa nhiều các block nhỏ trong đó. Các block chung hầu hết chứa trong Outer-wrapper là các Header, Content, và Footer.
- Header: block này là phần trên cùng của hầu hết các blog (cái tên header đã nói lên điều này một cách rõ ràng). Nhưng bên trong Header bạn có thành phần phụ khác đó là Header Title, Header Descripaion và các thành phần khác giống như banners quảng cáo, thanh trình đơn menu bar,,,. Do vậy, để chửa toàn bộ các blocks phụ nói trên trong đó thì Header nhất thiết phải được thiết kế đủ rộng để chứa chúng.
- Content: nằm dưới Header là Content-wrapper – đây là phần quan trọng hơn cả, chứa các thành phần quan trọng như Sidebar containers (1,2 hoặc nhiều sidebars) và phần nội dung chính (phần chứa các bài viết, nhận xét hoặc các quảng cáo).
- Footer: là phần nằm ở phía dưới cùng của hầu hết các mẫu. Giống như Header section, bạn cũng cần phải thiết kế Footer-wrapper để chứa các nội dung phụ trong Footer section.
- Main: Main-wrapper là thành phần chính nằm trong Content-wrapper. Bên trong Main-wrapper là phần bài viết, nhận xét, ngày tháng đăng bài và các tiện ích khác được tạo từ lựa chọn “Add Page Element”.
- Sidebar: là thành phần bao gồm các tiện ích - About Me, Labels, Archive, Text, HTML, Adsense. Trong mẫu cơ bản của Blogger template, bạn thường thấy các mẫu có 1 sidebar - hoặc 2-column (Main and Sidebar). Nhưng bạn cũng có thể dễ dàng thêm các cột Sidebar vào mẫu Blogger. Bạn cần phải hiểu rõ về chúng, trước hết là về cơ cấu tổ chức của các mẫu Blog để có thể quyết định thêm vào bên trái hay bên phải Main container các Sidebar để tạo thành mẫu 2 sidebars – hoặc mẫu 3-column.
- Blog Post: Đây là phần bài viết của bạn hiển thị bào gồm Tiêu đề bài viết, bài viết, tác giả, Labels, ...
* Một cách khác để hiểu rõ hơn về cấu trúc mẫu blog là xem biểu thị tree bắt đầu từ nội dung lớn cho tới các phần phụ nhìn giống như sau:
Blogger Toàn Tập A-Z Trang - 24 - Từ cơ bản đến nâng cao Body oOuter-wrapper Header-wrapper Blog Title Blog Description Other widgets Content-wrapper Sidebar-wrapper (1,2,3...) Main-wrapper Date Header Posts Post Title
Post Content (or called Post Body) Post Footer (Author, Labels, etc) Comments
Feed Link
Other widgets (mostly ad units) Footer-wrapper
Footer text (disclaimer, copyrights, etc) Other widgets
Đó là những thành phần cơ bản nhất có trong Template, bạn có thể dựa vào cấu trúc này để có thể biết được các thành phần của template, dựa vào đó để tùy biến chúng. Về mặc cấu trúc code trong template thì cơ bản có dạng như bên dưới:
Blogger Toàn Tập A-Z Trang - 25 - Từ cơ bản đến nâng cao <?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:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title> </b:if>
Giữa 2 thẻ <head> và </head> chứa Javascript, Jquery <b:skin><![CDATA[
Tất cả code CSS nằm ở đây (<b:skin><![CDATA[ ….]]></b:skin>) ]]></b:skin>
Giữa 2 thẻ <head> và </head> chứa Javascript, Jquery
</head>
<body>
<div id='outer-wrapper'>
<div id='header'> Tất cả nội dung ở thành phần HEADER hay đầu trang </div>
<div id='content-wrapper'>
<div id='sidebar-wrapper'>Tất cả nội dung ở cột phụ </div>
<div id='main- wrapper'> Tất cả nội dung ở cột chính (Main) </div> </div>
<div id='footer'> Tất cả nội dung ở chân blog (Footer) </div> </div>
</body>
</html>
Đó là những thành phần cơ bản, để có thể tự mình thiết kế được template Blogger bạn cần phải chịu khó tìm hiểu thêm rất nhiều. Ở đây mình không đi sâu vào phần thiết
Blogger Toàn Tập A-Z Trang - 26 - Từ cơ bản đến nâng cao
kế mà chỉ giới thiệu qua để bạn có thể nắm được. Trong Blogger thì đã có cung cấp cho bạn 1 công cụ cũng rất hay có thể giúp bạn tùy biến giao diện template một cách trực quan mà không cần đòi hỏi bạn phải hiểu biết nhiều về lập trình, chỉ thao tác bằng chuột của bạn, đó là dùng đến trình thiết kế của Blogger.
b. Tùy chỉnh giao diện với Trình thiết kế của Blogger
Cũng ở tại mục Mẫu (Template) bạn chọn Tùy chỉnh (Customize) để đi đến Trình thiết kế của Blogger
Tại đây bạn sẽ nhìn thấy được mẫu giao diện blog của mình thay đổi theo sự tùy chỉnh của bạn. Đối với những mẫu cơ bản mà Blogger cung cấp thì các thành phần bạn có thể thay đổi dễ dàng, tuy nhiên đối với một số mẫu bạn tải từ các trang cung cấp Template thì một số thành phần sẽ không được hỗ trợ nên cũng gây khó khăn khi dùng Trình thiết kế này. Tuy nhiên nếu bạn là một người mới tìm hiểu thì nó cũng có thể giúp ích được bạn rất nhiều đấy. Hãy tự mình khám phá nó nhé!
Blogger Toàn Tập A-Z Trang - 27 - Từ cơ bản đến nâng cao
Như vậy về mặt Template thì mình cũng đã có giới thiệu qua cho bạn nắm được những cái cơ bản, việc làm sao để có 1 template đẹp, chuyên nghiệp đòi hỏi bạn phải chịu khó mày mò them và xem các bài viết về thủ thuật Blogger để dần hoàn thiện hơn.