Để bắt đầu làm quen với Blogspot; Sau khi tạo một trang, đăng thử vài bài mẫu để làm quen với trang. Chúng ta dành phần lớn thời gian đi chọn Giao diện Blogger phù hợp. Chính vì như thế, nhu cầu muốn tự sửa hoặc xây dựng một giao diện riêng có đòi hỏi chúng ta phải bắt đầu từ con số "không" với một giao diện trắng - a blank template
Tìm một đoạn mã code html để bắt đầu thiết kế Blogger Templates rất dễ. Xin được chia sẻ mã code html phục vụ thiết kế giao diện Blogspot trắng: codepen.io
Phần giới thiệu dưới đây sẽ chia nhỏ ra để các bạn biết từng khúc nội dung. Các bạn có thể tự đọc hiểu một tí và cóp từng phần vào trang html của giao diện.
Khai báo XML
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' b:defaultwidgetversion='2' b:layoutsVersion='3' 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' xmlns:og='http://ogp.me/ns#'>
Phần <head>
<head>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]--><meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' name='viewport'/>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<b:include data='blog' name='all-head-content'/>
Phần <head> tối ưu cho thẻ Meta, SEO, Tag,...
<!-- Blogger Optimized Meta Tags -->
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>
<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
<!-- SEO Meta Tag -->
<meta charset='UTF-8'/>
<meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' name='viewport'/>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<meta content='blogger' name='generator'/>
<meta content='indonesian' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='indonesia' name='geo.placename'/>
<meta content='Author' name='author'/>
<meta content='index,follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='2 days' name='revisit'/>
<meta content='never' name='expires'/>
<meta content='always' name='revisit'/>
<meta content='global' name='distribution'/>
<meta content='general' name='rating'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='index, follow' name='googlebot'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='follow, all' name='Scooter'/>
<meta content='all' name='spiders'/>
<meta content='all' name='WEBCRAWLERS'/>
<meta content='aeiwi, alexa, alltheWeb, altavista, aol netfind, anzwers, canada, directhit, euroseek, excite, overture, go, google, hotbot. infomak, kanoodle, lycos, mastersite, national directory, northern light, searchit, simplesearch, Websmostlinked, webtop, what-u-seek, aol, yahoo, webcrawler, infoseek, excite, magellan, looksmart, bing, cnet, googlebot' name='search engines'/>
<!-- Open Graph Meta Tags -->
<meta content="" property="fb:app_id" />
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if><b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
Phần skin và style css ( bố cục và giao diện)
<b:skin version='1.0.0'><![CDATA[/*
/* Variable definitions=======================
]]></b:skin>
<style type='text/css'>
/*
-----------------------------------------------
Blogger Template Style
Name : Tên templates của bạn
Designer : Tên thiết kế
Release : Ngày ra mắt
Version : Phiên bản số
License : Free hay Premium
Email : email của bạn
-----------------------------------------------
Thanks to:
- Eric Meyer (CSS Reset)
*//* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
-------------------------------------------------------------------- */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
</style>
</head>
Phần <Body> nội dung giao diện
<body class='index' itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<div id='wrapper'>
<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'> <b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Basic Blogger Template (Header)' type='Header'></b:widget>
</b:section>
</header>
<nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
</ul>
</nav>
<div class='clearfix'/>
<section id='outer-wrapper'>
<article id='article-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Blog Posting' type='Blog'></b:widget>
</b:section>
</article>
</section>
<div class='clearfix'/>
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<div class='clearfix'/>
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<b:section class='footer' id='footer' showaddelement='yes'/>
<footer class='footer-left'>
Copyright <a href='/' rel='copyright'><data:blog.title/></a>
</footer>
<footer class='footer-right'>
Design by <a href='#' target='_blank' title='Blogger'>Name</a>
</footer>
</footer>
</div>
</body>
</html>
- Mỗi thẻ b:section được đặt trong cấu trúc XML của chủ đề giữa các thẻ <body></body>
- Một thẻ b:section chỉ có thể chứa thẻ b:widget
- Thẻ b:section không thể được lồng nhau.
- Chủ đề phải chứa ít nhất một thẻ b:section, một trong số đó có thuộc tính preferred='true'.
<b:section class='CLASS_NAME'cond='CONDITION'id='SECTION_ID'maxwidgets='NUMBER'name='SECTION_NAME'preferred='YES|NO|TRUE|FALSE'showaddelement='YES|NO|TRUE|FALSE'tag='header|main|aside|footer'></b:section>
<b:widget/>: Thẻ tiện ích, yêu cầu ít nhất 1 tiện ích tốt nhất là Blog1. Các <b:widget/> cần phải được đặt trong <b:section>...</b:section>
Đăng nhận xét
Cảm ơn bạn đã để lại Trí Khôn nơi tăm tối này! Chúc một ngày với tốt lành đến với bạn và người thân!