Để có thể thiết kế và chỉnh sửa được giao diện của Blogspot theo ý thích của các bạn đầu tiên bạn phải hiểu được Cấu trúc giao diện và code tương ứng của Blog Blogspot là như thế nào , không những vậy bạn còn phải có một chút hiểu biết về HTML CSS, Java Script, Photoshop, Mình sẽ hướng dẫn các bạn lần lượt từng phần một, trong bài viết này mình sẽ giúp các bạn hiểu Cấu trúc giao diện của Blog Blogspot. Chúng ta cùng bắt đầu nhé :
Giao diện của blog Blogspot được chia thành 3 phần như sau:
|
Cấu trúc giao diện và code tương ứng của Blog Blogspot |
1. Phần đầu trang:
Tương ứng trong code của blog nó được bắt đầu bằng thẻ <head> ... và kết thúc bằng thẻ</head> nó chứa các thẻ cần thiết cho tiêu đề của một trang web như thẻ meta, favicon… Chúng ta có thể chỉnh sửa hoặc thêm các liên kết tới các file css, thêm phần miêu tả, từ khóa cho websitethông qua thẻ meta… Ví dụ : <script src='https://tivipanasonic.googlecode.com/svn/trunk/jquery-1.10.2.min.js'/> là đường dẫn tới file Javascript
Code:
<head>
<link href='https://plus.google.com/116132112416531235575' rel='author'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<script src='https://tivipanasonic.googlecode.com/svn/trunk/jquery-1.10.2.min.js'/>
</head>
2. Phần thân của trang blogspot
Tương ứng trong code của blog nó được bắt đầu bằng thẻ <body> ... và kết thúc bằng thẻ </body> đây là phần chính của một blog Blogspot. Phần này gồm danh sách bài viết, hiển thị bình luận… Nó chưa các thẻ HTML, XML, và các thẻ dành riêng cho Blogspot.
Code:
<body expr:class='"loading" + data:blog.mobileClass'>
<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:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID\0755421316447594326086\46blogName\75IT+VI%E1%BB%86T+365\46publishMode\75PUBLISH_MODE_HOSTED\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://www.itviet365.com/search\46blogLocale\75vi\46v\0752\46homepageUrl\75http://www.itviet365.com/\46blogFollowUrl\75https://plus.google.com/116132112416531235575\46vt\75-7747087858455740556',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>
<b:if cond='data:blog.pageType == "index"'>
<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<meta expr:content='data:blog.title' itemprop='name'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
</div>
</b:if>
<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>
<div class='content'>
<div class='content-fauxcolumns'>
<div class='fauxcolumn-outer content-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>
<div class='content-outer'>
<nav class='' id='main-nav' style='top: 0px; margin: 0 auto;'>
<div class='container'>
<div class='main-menu'>
<ul class='red' id='menu-main'>
<li class='red'><a class='home' href='/'>Home</a></li>
<li class='red'><a href='#' title='Chuyên Mục'>Danh Mục</a>
<ul class='sub-menu'>
<li><a href='/p/blogspot-series.html' title='Blogspot Series'>Blogspot Series</a>
<ul class='sub-menu'>
<li><a href='/p/blogspot-started.html' title='Blogspot Started'>Blogspot Started</a></li>
<li><a href='/p/blogspot-development.html' title='Blogspot Development'>Blogspot Development</a></li>
<li><a href='/p/template-blogspot.html' title='Template Blogspot'>Template Blogspot</a></li>
</ul>
</li>
<li><a href='/p/seo-series.html' title='Seo Series'>Seo Series</a></li>
<li><a href='/p/web-development.html' title='Web Development'>Web Development</a>
<ul class='sub-menu'>
<li><a href='/p/html-css.html' title='HTML CSS'>HTML/CSS</a></li>
<li><a href='/p/javascript-jquery.html' title='Javascript Jquery'>Javascript - Jquery</a></li>
<li><a href='/p/photoshop.html' title='Photoshop'>Photoshop</a></li>
</ul>
</li>
<li><a href='/p/phan-cung-may-tinh.html' title='Phần Cứng Máy Tính'>Phần Cứng Máy Tính</a></li>
</ul>
</li>
<li class='red'><a href='/p/dich-vu.html' title='Dịch Vụ'>Dịch Vụ</a></li>
<li class='red'><a href='/p/news.html' title='Tin Tức'>Tin Tức</a></li>
<li class='red'><a href='/p/about.html' title='Giới Thiệu'>Giới Thiệu</a></li>
<li class='red'><a href='/p/contact.html' title='Liên Hệ'>Liên Hệ</a></li>
</ul>
<div id='search'>
<form action='/p/search.html' class='searchform' id='cse-search-box'>
<input name='cx' type='hidden' value='017438233063713549920:2wz78kfbowy'/>
<input name='cof' type='hidden' value='FORID:9'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input id='s' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Tìm kiếm bài viết...'/>
<button class='searchbutton' tabindex='2' type='submit'/>
</form>
</div>
</div>
</div>
</nav>
<div class='content-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left content-fauxborder-left'>
<div class='fauxborder-right content-fauxborder-right'/>
<div class='content-inner'>
<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ALL IN ONE (Tiêu đề)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
<div class='head_brnews'>
<div class='breaking-news'><div class='samazhlo'>CNTT 365 NEWS: </div>
<script src='https://tivipanasonic.googlecode.com/svn/trunk/autoscroll.js' type='text/javascript'/>
<script type='text/javascript'>
var nMaxPosts =10;
var nWidth = 100;
var nScrollDelay = 60;
var sDirection = "left";
var sOpenLinkLocation = "N";
var sBulletChar = ">>";
</script>
<script src='/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10' type='text/javascript'/>
</div>
<!--Social Icons Started -->
<div id='social'>
<a class='facebook' href='https://www.facebook.com/ngoisaoden33' rel='nofollow' target='_blank'/>
<a class='twitter' href='https://twitter.com/' rel='nofollow' target='_blank'/>
<a class='flickr' href='http://www.flickr.com/' rel='nofollow' target='_blank'/>
<a class='pinterest' href='http://pinterest.com/' rel='nofollow' target='_blank'/>
<a class='googleplus' href='https://plus.google.com/116132112416531235575' rel='nofollow' target='_blank'/>
<a class='vimeo' href='http://vimeo.com/' rel='nofollow' target='_blank'/>
<a class='youtube' href='http://www.youtube.com/' rel='nofollow' target='_blank'/>
<a class='mail' href='mailto:anhdienit@gmail.com' rel='nofollow' target='_blank'/>
</div>
<!--Social Icons End-->
</div>
<div class='tabs-outer'>
<div class='tabs-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left tabs-fauxborder-left'>
<div class='fauxborder-right tabs-fauxborder-right'/>
<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>
</div>
<div class='tabs-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
<div class='main-outer'>
<div class='main-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left main-fauxborder-left'>
<div class='fauxborder-right main-fauxborder-right'/>
<div class='region-inner main-inner'>
<div class='columns fauxcolumns'>
<div class='fauxcolumn-outer fauxcolumn-center-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
<div class='fauxcolumn-outer fauxcolumn-left-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
<div class='fauxcolumn-outer fauxcolumn-right-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
......
</body>
3. Phần chân trang
Tương ứng trong code của blog nó được bắt đầu bằng thẻ <footer> ... và kết thúc bằng thẻ </footer> đây là phần chứa thông tin của chủ sở hữu blogs hoặc bạn cũng có thể thêm các thông tin khác tùy ý.
Code:
<footer>
<div id='detailfoot'>
Copyright © 2014 <a href='/' target='_blank'>Tổng hợp</a> All Right Reserved . <br/>
Blogger Designed by: <a href='/' target='_blank'>Tuandv33</a> Powered by: <a href='https://www.blogger.com' target='_blank'>Blogger</a>. <br/>
® Ghi rõ nguồn khi phát hành thông tin từ trang web này.<br/>
<a href='http://www.dmca.com/Protection/Status.aspx?ID=d5af5a1f-e291-42d0-a18b-ecf365d92c82' target='_blank' title='DMCA'> <img alt='DMCA.com' src='http://images.dmca.com/Badges/dmca_protected_sml_120m.png?ID=d5af5a1f-e291-42d0-a18b-ecf365d92c82'/></a>
</div>
......
</footer>
Ok đến đây chắc các bạn cũng đã hiểu được Cấu trúc giao diện và code tương ứng của Blog Blogspot, và cấu trúc trên cũng chính là cấu trúc phổ thông mà bất kỳ blogs hay website nào cũng đều được phân chia như vậy bất kể la ngôn ngữ lập trình nào . Mình xin được kết thúc bài viết tại đây.