Tự tay thiết kế giao diện Blogger đầy đủ nhất
Thứ Bảy, 19 tháng 4, 2014
Thật ra tự tay thiết kế cho chính mình một giao diện blogger, hay còn gọi là một template không hề khó, chỉ cần chịu khó đọc một số thủ thuật blogger ở một số blog thủ thuật khác nhau kết hợp với bài viết này là bạn đã có một template ưng ý.
Các điều cần chú ý khi bắt đầu thiết kế template:
- Không nên thiết kế trên chính blog của mình, hãy lập một trang mới
- Nên tìm hiểu về css, js, html
- Trước khi code hãy vẽ phác thảo bố cục của trang weblog của mình ra giấy, còn nếu bạn có cái đầu siêu phàm thì thôi vậy
- Hãy viết khoảng chục bài viết trong blog demo để tiện theo dõi
- Nên tải các template có trên mạng xuống để nghiên cứu cách mà họ làm
Bắt đầu code thôi:
CẤU TRÚC CƠ BẢN TEMPLATE
<?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:skin><![CDATA[
]]></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>
</body>
</html>
Đầu tiên copy đoạn code trên dán vào phần chỉnh sửa HTML, bấm xem thử blog kết quả trang của bạn sẽ trắng xóa.
THÊM THẺ META VÀ TITLE CHO BLOG
<b:if cond='data:blog.pageTitle == data:blog.title'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex, nofollow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords'/>
<meta content='index, follow' name='robots'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords'/>
<meta content='index, follow' name='robots'/>
</b:if>
</b:if>
</b:if>
Copy đoạn code trên đặt giữa hai thẻ <head> và <b:skin><
