Templates blogspot trắng cho người học thiết kế blogspot

Khi bạn muốn tìm hiểu về thiết kế blogspot hay rip một templates blogpsot thì bạn cần tìm tòi về những cái cơ bản như cấu trúc của một giao diện căn bản, thành phần gồm những gì từ đó sẽ giúp bạn đi sau hơn.

Cấu trúc một templates blogspot căn bản

Đi vào một templates blogspot cơ bản hay nói chung là một website thì gồm những thành phần chính sau

<html>
<head>
<b:skin>
nơi chỉ chứa css, đoạn code màu xanh các bạn thường thấy trong giao diện.
</b:skin>
Phần này chứa các thẻ meta, code <style> css </style> và <script> javascript </script>, nhưng ở đây nên hạn chế js giúp blog của bạn load nhanh hơn.
</head>
<body>
Ở đây chứa toàn bộ nội dung của website và ở bên dưới thông thường chứa thêm những javascript giúp việc seo của bạn trở nên dễ dàng hơn.
</body>
</html>

Đó là những thành phần chính bạn cần nhớ mới học thiết kế blogspot thì hơi khó hiểu nhưng để ý một tý thì nó sẽ trở nên dễ hiểu hơn.

Templates blogspot trắng đầy đủ thành phần

Sau khi đã tìm hiểu về thành phần một templates blogspot để tiện cho việc thiết kế thì bay giờ chúng ta bắt đầu áp dụng nó với một templates blogpsot trắng với thành phần đầy đủ bạn có thể hiểu hơn.

<?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ây giờ chắc các bạn đã hiểu hơn rồi đúng không nào hãy xem kỹ đi cũng đơn giản thôi mà, có gì thắc mắc khiến bạn khó hiểu có thể để lại comments bên dưới nhé.

Xem thêm >>seo onpage blogspot<<

Tìm kiếm Blog này

Blog Hồng - Thủ Thuật Blogspot- Facebook - Marketing