003. Tự tạo một cái Theme cho Bloger-Blogspot

Cấu trúc của một trang web cơ bản:

<?xml version="1.0" encoding="UTF-8" ?><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'> 
<head> 
✔ LINK ICON CỦA TRANG WEB:
<link href='LINK ICON CỦA BẠN' rel='icon' type='image/x-icon'/> 
<b:skin><![CDATA[

✔ Những đoạn css qui định về thuộc tính các module trên blog
body{Thuộc tính toàn blog..;}
‪#‎box{thuộc tính trang được hiển thị nội dung}
‪#‎header{}
‪#‎main-outer{}
‪#‎footer{}
#main{}

✔ Ẩn thanh điều hướng của blog:
‪#‎navbar-iframe {height:0px;visibility:hidden;display:none}
h2 {padding:0; margin:0}

]]></b:skin>
</head> 
<body>

✔ Thanh điều hướng của blog:
<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>

✔ Các module hiển thị trên blog: 
<div id='box'>
<div id='header'>Nội Dung header</div>

<div style='clear:both'/>

<div id='main-outer'>
<div id='sidebar1'>Nội Dung sidebar1</div>
<div id='main'>Nội Dung Bài Viết</div>
<div id='sidebar2'>Nội Dung sidebar2</div>
</div>

<div style='clear:both'/>

<div id='footer'>Nội Dung Footer</div>

</div></body> </html>

Sau đâu là những cách thường dùng để CSS(Thuộc tính trang modun, tiện ích)

<b:skin><![CDATA[

.

.

]]></b:skin>
Hoặc có thể dùng:

<style type='text/css'>.

.

.

</style>

Hoặc ta lưu lại file đó dưới dạng .css .js rồi đưa lên mạng
<link href="Link-CSS" type="text/css" rel="stylesheet" />

Còn ở dưới là cách để các Javascript:

<script src='Link_File_JS' type='text/javascript'/>
------------------------
<script type='text/javascript'>
//<![CDATA[
NỘI DUNG FILE JS
//]]>
</script>

1. Điều chỉnh sidebar.
(Tạo mục Thêm Tiện Ích của blogspot cho sidebar).

<div id='sidebar1'> thẻ đóng </div>

Bạn chèn Ở giữa thẻ: thay “thẻ đóng” thành.

<b:section class='sbar1' id='sbar1' showaddelement='yes'/>

KẾT QUẢ _____( Khi làm nhiều tiện ích NHỚ THAY 1 => 2,3 kẻo khi lưu bị lỗi ko lưu được).

<div id='sidebar1'> <b:section class='sbar1' id='sbar1' showaddelement='yes'/> </div>

Lưu Lại.

2. Điều chỉnh header.

(Tạo header như mẫu header mẫu của blogspot).

Header mặc định của blog là một tiện ích cho phép thay đổi tiêu đề và mô tả của blog. ngoài ra còn cho phép thay đổi banner cho header.

<div id='header'> thẻ đóng </div>

Bạn chèn đoạn code sau:

<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='(Tiêu đề)' type='Header'/>

</b:section>

Lưu Lại.

3. Điều chỉnh phần bài đăng (main) (hiển thị nội dung các bài viết ra blog).

Trong template này mình đã cho các bài viết nằm trong ID main. Để hiển thị nội dung các bài viết ra blog bạn chỉ việc thực hiện như sau:

<div id='main'>thẻ đóng</div>

Bạn chèn đoạn code sau:

<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>

KẾT QUẢ _____________________

<div id='main'>

<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>

Lưu Lại.

CSS bạn có thể tam khảo ở đây:
<b:skin><![CDATA[.........]]></b:skin>

✔ Những đoạn css qui định về thuộc tính các module trên blog.

/*-----------------------------------------------

Blogger Template Style

Name: Lê Quý Giáp

Blog: http://giapqb.blogspot.com/

Copyright: 2014

----------------------------------------------- */

/*-----------NEN + LINK CUA TOAN BO TRANG---------*/

body{background:url("http://3.bp.blogspot.com/.../JiyeKMpLRe8/s000/wrapper1.jpg") repeat-x scroll 0 0 #44AC50;color:#333;font:small Georgia Serif;margin:0;}

#box{Background:#F0F2F3;Width: 1024px;Margin:0 auto;border:1px solid #CBCBCB;font-size:12px;} /*-----TOAN TRANG-----*/

#main-outer{Background:#F0F2F3;border:0px solid #CBCBCB;margin:0px;;word-wrap:break-word;font-size:12px;} /*BAI VIET + MODUN PHAI */

a:link,a:visited{color:#2024DC;text-decoration:none;outline:none;}

a:hover{color:#FF00FF;text-decoration:underline;outline:none;}

a img{border-width:0}

h2.date-header{margin:1.5em 0 .5em;display:none;color:#2024DC;}

.jump-link {color:#d7034e;float:right;margin-right:0px;padding:0; text-align: right;}

.jump-link a{color:#d7034e;float:right;margin-right:0px;margin-top:-13px;padding:0; text-align: right;}

.jump-link a:hover{color:#FF00FD}

.outer-wrapper{height:768px;}

/* -----------BAI VIET --------------- */

#main{Background:#FFFFFF;width:700px;float:left;margin-left:2px;margin-top:3px;padding:5px;border:1px solid #CBCBCB;font-family:Arial,Helvetica,Sans-serif;}/*----BAI VIET----*/

.main{border-bottom:1px solid #CBCBCB;padding:5px 10px 0 10px;margin-bottom:2px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold; }

.main-title{color:#D108C0;margin:0 0 10px 0;padding:0;font-family:Arial,Helvetica,Sans-serif;font-size:16px;line-height:24px;font-weight:bold;}

.wrapfullpost{}

.post-body img {max-width:99% !important;}

.post{border-bottom:1px solid #CBCBCB;padding:5px 10px 0 10px;margin-bottom:2px;}

.post-title{color:#D108C0;margin:0 0 10px 0;padding:0;font-family:Arial,Helvetica,Sans-serif;font-size:14px;line-height:24px;font-weight:bold;}

.post-title a,.post-title a:visited,.post-title strong{display:block;text-decoration:none;color:#2E00B8;text-decoration:none;}

.post-title strong,.post-title a:hover{color:#D108C0;text-decoration:none;}

.post-body{margin:0px;padding:0px 10px 0px 0px;font-family: Arial, Verdana;font-size: 14px;line-height: 20px;}

.post-footer{margin:5px 0;}

.postmeta-primary{color:#EFE7D9;font-size:14px;text-transform:uppercase;padding:0 0 5px 0}

.postmeta-secondary{color:#EFE7D9;font-size:14px;padding:0 0 15px 0}

.postmeta-primary a,.postmeta-secondary a{color:#D108C0}

.postmeta-primary a:hover,.postmeta-secondary a:hover{color:#DAED07}

/*----------------SIDEBAR TONG HOP-----------------*/

#sidebar{width:302px;Background:#EDFEEC;float:right;border:1px solid #CBCBCB;font-size:16px;margin-right:2px;margin-top:3px;word-wrap:break-word; overflow:hidden;}

#sidebar h2{color:#F0F8FF;text-align:center;font-size:16px;line-height:28px;font-family:Arial;font-weight:bold;margin:0 0 0px 0;padding:0px 0 0px 0;text-transform:uppercase;background: #DF0C10 url(https://lh6.googleusercontent.com/.../nen+tren+thanh+tien...) left bottom repeat-x;}

#sidebar ul{list-style-type:none;list-style:none;margin:0px;padding: 3px 10px 0px 10px;}

#sidebar ul li{padding:0px 0px 2px 0px;margin:0px 0 0 0;background:url(https://sites.google.com/site/giapqb/c5.png) left bottom repeat-x;}

#sidebar .widget{margin: 0 0 2px 0;padding:0px;}

#sidebartren {clear:both;padding:0px 0px 5px 0px;color:#1A1818;background:#F0F2F3;font-size:14px;;padding:0px;margin:0px;}

#sidebartren a{text-decoration:none;color:#1A1818;}

#sidebarduoi {font-weight:bold;clear:both;padding:0px 0px 5px 0px;color:#1A1818;background:#B5FBB1;font-size:12px;}

#sidebarduoi a{text-decoration:none;color:#1A1818;}

<!--/*___MAU NEN TIEN ICH TU THIET KE__*/-->

#sidebarduoi a:hover{text-decoration:none;color:#D108C0;}

#sidebarduoi h2{color:#FF00FF;text-align:center;font-size:16px;line-height:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:7px 0 7px 0;text-transform:uppercase;background:url() left bottom repeat-x;}

#sidebarduoi ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}

#sidebarduoi ul li{padding:0px 0px 5px 0px;margin:0px 0 0 0;background:url(http://1.bp.blogspot.com/.../Kmjp9ta.../s000/widget-line.png) left bottom repeat-x;}

#header{clear:both;padding:0px 0px 5px 0px;color:#1A1818;background:#F0F2F3;font-size:14px;;padding:0px;margin:0px;}

#footer{margin-top:0px}

#footer{color:#F4F4F4;text-align:center;padding:4px 0;background:#232323;text-shadow:0 1px 0 #000}

#footer a{color:#F4F4F4}

#footer a:hover{color:#F4F4F4;text-decoration:none}

/* ___________XOA BO DONG ATOM______________ */

.feed-links{display:none !important;}

.posts-feeds, .feed-links {display:none !important;visibility:hidden !important}