Hiện tại có rất nhiều bạn muốn tự tay mình thiết kế ra một giao diện Blogger mới vì nhiều lý do khác nhau, nhưng đa phần tìm hiểu thì tại liệu lại quá ít.
Chính vì thế hôm nay mình xin cố gắng hướng dẫn một cách đơn giản nhất hết mức có thể để giúp bạn tự tay thiết kế được giao diện Blogger riêng của bạn. Do muốn nó thực sử đơn giản nên mình sẽ lược bỏ khá nhiều trong cấu trúc thực sự của nó.
Hướng dẫn thiết kế template Blogger cơ bản nhất
Các bước chuẩn bị để bắt đầu vào thiết kế giao diện blogger cho riêng mình
Để tự thiết kế một giao diện Blogger mới bạn cần phải nắm được những kiến thức cơ bản sau
- HTML (Bắt buộc)
- CSS (Bắt buộc)
- Thẻ lập trình của Blogger (Muốn tùy biến thì phải nắm được những cái này)
- Javascript, jQuery,... (Muốn đẹp và nhiều chức năng hơn thì phải học cái này)
Blogger là một trong những nền tảng dễ tùy chỉnh và thiết kế nhất trong các nền tảng về blog, đơn giản nó chỉ sử dụng html và css do đó, cấu trúc giao diện của nó hoàn toàn giống với việc bạn tạo ra một website bằng HTML, đây là template viết sẵn với cấu trúc đơn giản nhất như hình ở đầu bài mình sẽ giải thích từng phần ở dưới.
<?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 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: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 == "index"'>
<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 + " - Mô tả về blog của bạn"' name='description'/>
<meta expr:content='data:blog.pageName + ", Các từ khóa trên blog của bạn"' 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>
Bài viết được mình tham khảo từ "KslZone.Net"
Đăng nhận xét