Khi bạn đã có đủ sự yêu thích và mày mò, muốn tạo cho mình một cái gì đó mới mẻ, mang dấu ấn cá nhân nhiều và Blogger cũng không phải ngoại lệ. Mình đã tìm hiều về Blogger và rất mong một ngày nào đó có thể tạo riêng cho mình một Template ưng ý nhất. Nhưng trước hết chúng hãy tìm hiểu xem cấu trúc để hình thành nên mẫu đó như thế nào nhé !Mình đã tìm hiểu và có thể khái quát rằng Blogger gồm 5 thành phần chính như sau:
1. Khai báo Ngôn ngữ XML
2. HEAD, TITLE và các thẻ META
3. Variable Definitions
4. Phần CSS (Cascading Style Sheet)
5. Phần thân - BODY
Dưới đây là 1 mẫu ví dụ:
1. Khai báo ngôn ngữ XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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'>
2. HEAD, TITLE và các thẻ META
3. Khai báo giá trị các biến dùng cho CSS - Variable Definitions
4. Phần CSS (Cascading Style Sheet)
5. Phần thân - Body
<head>
<title>Latest Tips for Bloggers|Blogger Tips And Tricks</title>
<b:include data='blog' name='all-head-content'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='Latest Tips for Bloggers for easy blogging and Making Money.blogger,blogspot tips and tricks.A dummies guide,templates,layouts,widgets, JavaScript,HTML codes,SEO,Google AdSense,gadgets,How to monetize Blogger or blogspot blogs.' name='description'/>
<meta content='blogger tricks,blogspot tweaks,how to blog,blogger tips,blogging tricks,widgets,links,google,adsense,latest,Page Rank,free blog,Yahoo,MSN,FeedBurner,Comments,new bloggers,sitemaps,make money,online,Blogging tips,Sitemaps,Meta Tag,YouTube Tweaks' name='keywords'/>
<meta content='Lasantha' name='author'/>
<meta content='all,follow' name='robots'/>
<meta content='General' name='Rating'/>
<meta content='never' name='Expires'/>
<meta content='english' name='Language'/>
<meta content='Global' name='Distribution'/>
<meta content='INDEX,FOLLOW' name='Robots'/>
<meta content='4 Days' name='Revisit-after'/>
<meta content='lasanthaset4@gmail.com' name='Email'/>
<meta content='Karunarathna' name='Publisher'/>
<meta content='Keerthi' name='Copyright'/>
<META content='04a82ed1e8901452' name='y_key'></META>
<meta content='9BC9210680' name='blogcatalog'/>
<meta content='uhl6s4fkZiCGiK8tOzdJdlKTP7V4anqblyHBjk8PA0g=' name='verify-v1'/>
3. Khai báo giá trị các biến dùng cho CSS - Variable Definitions
<b:skin><![CDATA[/*
*/
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#dd9" value="#CAF99B">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#684" value="#0066CC">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#874" value="#000000">
.............................
4. Phần CSS (Cascading Style Sheet)
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
...............
/* Footer
----------------------------------------------- */
#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>
</head>
5. Phần thân - Body
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger Tips And Tricks (Header)' type='Header'/>
<b:widget id='HTML17' locked='false' title='' type='HTML'/>
<b:widget id='HTML19' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='content-wrapper'>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML6' locked='false' title='Subscribe to Blogger Tips' type='HTML'/>
<b:widget id='LinkList2' locked='false' title='Blogger Tips - General' type='LinkList'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Blog Directries' type='HTML'/>
<b:widget id='HTML5' locked='false' title='Social Bookmarks' type='HTML'/>
<b:widget id='HTML11' locked='false' title='Useful Free Services' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='Link' type='LinkList'/>
</b:section>
<p><a href='http://bloggertipandtrick.blogspot.com/'>Blogger Tips and Trick</a> for <a href='http://bloggertipandtrick.blogspot.com/'>Bloggers</a></p></div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='' type='HTML'/>
<b:widget id='HTML20' locked='false' title='Search Blogger Tips And Tricks' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='LinkList3' locked='false' title='Blogger Tips - Useful Articles' type='LinkList'/>
<b:widget id='LinkList4' locked='false' title='Blogger Tips - Change Appearance' type='LinkList'/>
<b:widget id='LinkList5' locked='false' title='Blogger Tips -Gadget,Widget,Elements,Tools' type='LinkList'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML13' locked='false' title='Privacy Policy' type='HTML'/>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Get Email Updates' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='HTML3' locked='false' title='Get Latest Updates' type='HTML'/>
<b:widget id='HTML10' locked='false' title='' type='HTML'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='HTML8' locked='false' title='Link to This Site' type='HTML'/>
<b:widget id='HTML9' locked='false' title='Support me !!!' type='HTML'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='HTML4' locked='false' title='Flag Counter' type='HTML'/>
<b:widget id='HTML15' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
<b:widget id='HTML12' locked='false' title='Feed Directories' type='HTML'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "http://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-8271964-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Đây mới chỉ là khái quát chung để mình có thể nắm được bố cục và định hướng được cách tạo ra Template.
Còn chúng ta phải tìm hiểu kỹ hơn nữa mới có thể tùy biến được.
Còn chúng ta phải tìm hiểu kỹ hơn nữa mới có thể tùy biến được.
Phân loại như vậy giúp bạn chỉnh sửa Template dễ dàng hơn, nhanh chóng hơn. Chúc các bạn có được mẫu ưng ý nhất !
0 nhận xét trong bài "Cấu trúc tổng quan của một Template Blogger"
Đăng nhận xét