• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Cẩm nang thiết kế Blogger Template (1)

16
25/01/2011

Hiện nay có rất nhiều người thuộc nhiều lứa tuổi và tầng lớp khác nhau có sở thích viết blog, trong đó có một bộ phận viết blog để chia sẻ những thủ thuật trên mọi lĩnh vực. Nói riêng về lĩnh vực Blogger, có người viết về thủ thuật Blogger, có người lại chuyên thiết kế Blogger Template.

Nếu bạn cũng thích viết blog theo hướng như vậy thì cũng nên xây dựng cho mình một mục tiêu, một tôn chỉ và định hướng riêng cho mình, có như vậy mới thành công. Ở đây tôi xin nói về Blogger Template. Nếu bạn là người có ý muốn thiết kế Blogger Template mặc dù bạn chưa biết gì về thiết kế web cả, thì bạn cũng có thể làm được điều đó, điều quan trọng là bạn phải có ý chí và có đam mê tìm hiểu, nghiên cứu. Để thiết kế một Blogger Template cũng không có gì là khó, bạn phải luyện tập để nâng cao khả năng của mình.

Theo tôi, để có thể thiết kế Blogger Template, bạn cần hội đủ những điều kiện sau đây.

1. Nắm rõ cấu trúc của một Blogger Template.
2. Có kiến thức căn bản về CSS, HTML, JavaScript và XML.
3. Có kiến thức về Photoshop nếu muốn thiết kế Blogger Template một cách chuyên nghiệp.

Qua quá trình luyện tập thiết kế Blogger Template, bạn sẽ tích lũy nhiều kinh nghiệm và từ đó có thể mở rộng kiến thức về thiết kế web.

Trong phạm vi bài viết này, tôi xin giới thiệu về mục 1, đối với các mục 2 và 3 thì bạn có thể tìm hiểu thêm ở một nguồn khác.

Để phân tích cấu trúc của một Blogger Template, trước tiên chúng ta cần biết một số vấn đề cơ bản. Blogger Template được viết bằng ngôn ngữ XML và được lưu dưới dạng file .xml. Ngôn ngữ XML là ngôn ngữ đánh dấu mở rộng (viết tắt từ tiếng Anh eXtensible Markup Language) với mục đích chung do W3C đề nghị, để tạo ra các ngôn ngữ đánh dấu khác. Nó có khả năng mô tả nhiều loại dữ liệu khác nhau. Mục đích chính của XML là đơn giản hóa việc chia sẻ dữ liệu giữa các hệ thống khác nhau, đặc biệt là các hệ thống được kết nối với Internet.

Bạn có thể tìm hiểu thêm ngôn ngữ XML ở nhiều nguồn khác, tôi xin phân tích chi tiết về cấu trúc của một Blogger Template, theo thứ tự từng phần từ đầu đến cuối nội dung của một file .xml.

Phần 1. Dòng khai báo XML (dòng bắt buộc) với nhiệm vụ thông báo phiên bản XML đang được sử dụng (thường là phiên bản 1.0):

<?xml version="1.0" encoding="UTF-8" ?>

Phần 2. Dòng khai báo loại tài liệu thuộc về XHTML 1.0 Strict (một phiên bản XML của HTML 4 Strict):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Phần 3. Thành phần gốc của tài liệu chứa khai báo không gian tên (namespace) (trong ngôn ngữ HTML là thẻ <html>):

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

Phần 4. Phần đầu của Template gồm hai thẻ <head>, </head> và những phần giữa 2 thẻ này:

4.1. Thẻ <head>

4.2. Dòng khai báo tất cả thông tin về nội dung phần đầu (nếu Template của bạn không có dòng này thì tính năng Avatar không hoạt động cho phần nhận xét):

<b:include data='blog' name='all-head-content'/>

4.3. Tiêu đề Blog: <title><data:blog.pageTitle/></title>

4.4. Phần định dạng CSS gồm 2 thẻ <b:skin><![CDATA[, ]]></b:skin> và những phần nằm giữa 2 thẻ này. Phần trọng tâm CSS phải khai báo được thuộc tính style sheet cho những thành phần quan trọng trong phần thân của Template như: header, main, sidebar, comments, footer.

4.4.1. Thẻ <b:skin><![CDATA[

4.4.2. Chú thích tác giả của Template (có thể không cần), có dạng như sau:

/* -----------------------------------------------------------------------
Blogger Template Style
Name: Sample Theme
Design by: www.huynh-nhat-ha.blogspot.com
----------------------------------------------------------------------- */

4.4.3. Các khai báo biến về các thuộc tính CSS. Mỗi một biến được đặt trong 1 thẻ Variable, gồm có các thuộc tính: name (tên biến), description (mô tả biến), type (loại giá trị), default (giá trị mặc định) và value (giá trị thực tế).

/* Variable definitions
========================
<Variable name="bodybgColor" description="Body Background Color"
type="color" default="#FFBBE8" value="#f1e4d0">
<Variable name="blogframeColor" description="Blog Background Color"
type="color" default="#800040" value="#F5EDE3">
<Variable name="blogBorderColor" description="Blog Border Color"
type="color" default="#800040" value="#E1D4C1">
<Variable name="headerbgColor" description="Header Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="headerBorderColor" description="Header Border Color"
type="color" default="#800040" value="#E1D4C1">
<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#800040" value="#004387">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#800040" value="#826C55">

<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#C94093" value="#003366">
<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#6699FF">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#9D1961" value="#004387">
<Variable name="linkbarTextColor" description="Linkbar Text Color"
type="color" default="#ffffff" value="#6699FF">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff" value="#004387">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#9D1961" value="#C3D9FF">
<Variable name="middlebarbgColor" description="Middlebar Background Color"
type="color" default="#ffffff" value="#F5EDE3">

<Variable name="contentbgColor" description="Content Background Color"
type="color" default="#ffffff" value="#e9e2d7">
<Variable name="contentBorderColor" description="Content Border Color"
type="color" default="#9D1961" value="#E1D4C1">
<Variable name="postbgColor" description="Post Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="postBorderColor" description="Post Border Color"
type="color" default="#ffffff" value="#E1D4C1">
<Variable name="postTitleColor" description="Post Title Color"
type="color" default="#000000" value="#FF7700">
<Variable name="posttitlebgColor" description="Post Title Background Color"
type="color" default="#000000" value="#a09b94">
<Variable name="posttitleBorderColor" description="Post Title Border Color"
type="color" default="#000000" value="#E1D4C1">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#000000" value="#c5bDb3">
<Variable name="textColor" description="Text Color"
type="color" default="#191919" value="#808080">
<Variable name="mainLinkColor" description="Main Link Color"
type="color" default="#333333" value="#004387">
<Variable name="mainHoverLinkColor" description="Main Hover Link Color"
type="color" default="#9D1961" value="#FF7700">
<Variable name="mainVisitedLinkColor" description="Main Visited Link Color"
type="color" default="#9D1961" value="#004387">
<Variable name="blockquotebgColor" description="Blockquote Background Color"
type="color" default="#191919" value="#fffcfc">
<Variable name="blockquoteBorderColor" description="Blockquote Border Color"
type="color" default="#191919" value="#F5EDE3">
<Variable name="blockQuoteColor" description="Blockquote Color"
type="color" default="#191919" value="#999999">
<Variable name="codeTextColor" description="Code Text Color"
type="color" default="#660000" value="#808080">
<Variable name="imagebgColor" description="Photo Background Color"
type="color" default="#f5f5f5" value="#ffffff">
<Variable name="imageBorderColor" description="Photo Border Color"
type="color" default="#f5f5f5" value="#F5EDE3">

<Variable name="postfooterBgColor" description="Postfooter Background Color"
type="color" default="#b8659C" value="#F5EDE3">
<Variable name="postfooterBorderColor" description="Postfooter Border Color"
type="color" default="#b8659C" value="#E1D4C1">
<Variable name="postfooterTextColor" description="Postfooter Text Color"
type="color" default="#b8659C" value="#a28C75">
<Variable name="postfooterLinkColor" description="Postfooter Link Color"
type="color" default="#b8659C" value="#a28C75">
<Variable name="commentTabLinkColor" description="Comment Tab Link Color"
type="color" default="#b8659C" value="#a28C75">
<Variable name="feedlinksColor" description="Feed Links Color"
type="color" default="#9D1961" value="#004387">

<Variable name="sidebar1bgColor" description="Sidebar1 Background Color"
type="color" default="#FFBBE8" value="#ffffff">
<Variable name="sidebar1BorderColor" description="Sidebar1 Border Color"
type="color" default="#C94093" value="#E1D4C1">
<Variable name="sidebar1HeaderBgColor" description="Sidebar1 Header Background Color"
type="color" default="#ffffff" value="#004387">
<Variable name="sidebar1HeaderBorderColor" description="Sidebar1 Header Border Color"
type="color" default="#C94093" value="#E1D4C1">
<Variable name="sidebar1HeaderColor" description="Sidebar1 Header Color"
type="color" default="#000000" value="#6699FF">
<Variable name="sidebar1TextColor" description="Sidebar1 Text Color"
type="color" default="#9D1961" value="#808080">
<Variable name="sidebar1LinkColor" description="Sidebar1 Link Color"
type="color" default="#9D1961" value="#004387">
<Variable name="sidebar1HoverLinkColor" description="Sidebar1 Hover Link Color"
type="color" default="#000000" value="#808080">
<Variable name="sidebar1VisitedLinkColor" description="Sidebar1 Visited Link Color"
type="color" default="#000000" value="#004387">
<Variable name="sidebarListLineColor" description="Sidebar List Line Color"
type="color" default="#000000" value="#e6e6e6">
<Variable name="profileBorderColor" description="Profile Border Color"
type="color" default="#000000" value="#e6e6e6">

<Variable name="commentbgColor" description="Comment Background Color"
type="color" default="#9D1961" value="#ffffff">
<Variable name="commentBorderColor" description="Comment Border Color"
type="color" default="#C94093" value="#ffffff">
<Variable name="commentboxBgColor" description="Comment Box Background Color"
type="color" default="#9D1961" value="#ffffff">
<Variable name="commentboxBorderColor" description="Comment Box Border Color"
type="color" default="#C94093" value="#E1D4C1">
<Variable name="commentTitleColor" description="Comment Header Color"
type="color" default="#000000" value="#FF7700">
<Variable name="commentauthorBgColor" description="Comment Author Background Color"
type="color" default="#9D1961" value="#F5EDE3">
<Variable name="commentauthorColor" description="Comment Author Color"
type="color" default="#9D1961" value="#004387">
<Variable name="commentTimeStampColor" description="Comment Timestamp Color"
type="color" default="#C94093" value="#b3b3b3">
<Variable name="commentTextColor" description="Comment Text Color"
type="color" default="#4c4c4c" value="#808080">

<Variable name="footerbgColor" description="Footer Background Color"
type="color" default="#ffffff" value="#826C55">
<Variable name="footerBorderColor" description="Footer Border Color"
type="color" default="#000000" value="#E1D4C1">
<Variable name="footerHeaderColor" description="Footer Header Color"
type="color" default="#000000" value="#e6e6e6">
<Variable name="footerTextColor" description="Footer Text Color"
type="color" default="#C94093" value="#e6e6e6">
<Variable name="footerLinkColor" description="Footer Link Color"
type="color" default="#C94093" value="#e6e6e6">
<Variable name="footerHoverLinkColor" description="Footer Hover Link Color"
type="color" default="#C94093" value="#ffffff">
<Variable name="footerVisitedLinkColor" description="Footer Visited Link Color"
type="color" default="#C94093" value="#e6e6e6">

<Variable name="blogTitleFont" description="Blog Title Font"
type="font"
default="normal bold 273% Arial, Times, serif"
value="normal bold 197% Times, serif">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font"
default="normal normal 104% Arial,helvetica,verdana, serif"
value="normal normal 92% Arial, Times, serif">
<Variable name="linkbarTextFont" description="Linkbar Text Font"
type="font"
default="normal normal 77% Verdana, sans-serif"
value="normal bold 65% Arial, sans-serif">
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 180% Arial, Times, serif"
value="normal normal 155% Times, serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 117% Arial, sans-serif"
value="normal normal 85% Arial, Times, serif">
<Variable name="textFont" description="Text Font"
type="font"
default="normal normal 90% Arial, sans-serif"
value="normal normal 81% Arial, Times, serif">
<Variable name="quoteFont" description="Blog Quote Font"
type="font"
default="normal normal 92% helvetica,tahoma,verdana,arial,times,Sans-serif"
value="italic normal 105% Arial, Times, serif">
<Variable name="sidebarHeaderFont" description="Sidebar Title Font"
type="font"
default="normal bold 117% Arial, sans-serif"
value="normal bold 91% Arial, sans-serif">
<Variable name="sidebarTextFont" description="Sidebar Text Font"
type="font"
default="normal normal 78% Arial, Verdana, sans-serif"
value="normal normal 74% Arial, sans-serif">
<Variable name="postfooterTextFont" description="Post-Footer Text Font"
type="font"
default="normal normal 93% Arial, sans-serif"
value="normal normal 83% Arial, sans-serif">
<Variable name="commentTitleFont" description="Comment Title Font"
type="font"
default="normal bold 120% Arial, sans-serif"
value="normal bold 124% Times, serif">
<Variable name="commentTextFont" description="Comment Text Font"
type="font"
default="normal normal 95% Arial, sans-serif"
value="normal normal 101% Arial, sans-serif">
<Variable name="footerHeaderFont" description="Footer Header Font"
type="font"
default="normal bold 131% Trebuchet, Trebuchet MS, Arial, sans-serif"
value="normal normal 113% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="footerTextFont" description="Footer Text Font"
type="font"
default="normal normal 76% Trebuchet, Trebuchet MS, Arial, sans-serif"
value="normal normal 79% Trebuchet, Trebuchet MS, Arial, sans-serif">
*/

4.4.4. Phần nội dung CSS:

/* ----- CSS STYLE ----- */
* {margin:0; padding:0;}
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: justify;
color: $textColor;
background: $bodybgColor url() repeat top right;
/* background-attachment: fixed; */
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

#outer-wrapper {
margin: 0 auto;
padding: 0px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 15px;
position: relative;
width: 100%;
text-align: justify;
}

#blog-wrapper {
margin: 0 auto;
padding: 7px;
margin-top: 0px;
margin-bottom: 15px;
text-align: center;
position: relative;
width: 902px;
background: $blogframeColor;
border: 3px solid $blogBorderColor;
}

#spacer {clear: both; margin: 0; padding: 0;}

/* link attributes */
a {color: $mainLinkColor; text-decoration: underline;}
a:hover {color: $mainHoverLinkColor; text-decoration: underline;}
a:visited {color: $mainVisitedLinkColor; text-decoration: underline;}

/* Blogger Navigation Bar */
#Navbar1 {
margin: 0;
padding: 0;
visibility: hidden;
display: none;
}

/* ----- HEADER ----- */
#header-wrapper {
margin: 7px 0px 7px 0px;
padding: 0px 0px 0px 0px;
width: 900px;
background: $headerbgColor;
border: 1px solid $headerBorderColor;
}

#header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}

#header h1 {
color: $blogTitleColor;
font: $blogTitleFont;
font-variant: small-caps;
margin: 0px 0px 0px 0px;
padding: 12px 20px 0px 20px;
}

#header h1 a {
text-decoration: none;
color: $blogTitleColor;
}

#header h1 a:hover {
text-decoration: underline;
color: $blogDescriptionColor;
}

#header .description {
color: $blogDescriptionColor;
font: $blogDescriptionFont;
margin: 0px 0px 0px 0px;
padding: 8px 20px 25px 20px;
}

#header h1 p, #header .description p {margin:0;padding:0}

#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}

/* ----- LINKBAR ----- */
#linkbar-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 900px;
position: relative;
background: $linkbarbgColor;
border: 1px solid $linkbarmainBorderColor;
}

#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 0px 7px 0px;
text-align: left;
}

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

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 7px 10px 7px 10px;
width:100%;
text-decoration:none;
font: $linkbarTextFont;
color: $linkbarTextColor;
text-transform: uppercase;
border-right: 1px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}

#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}

/* ----- MAIN ----- */
#content-wrapper {
width: 900px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
text-align: left;
background: $contentbgColor;
border: 1px solid $contentBorderColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
float: left;
width: 632px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main {
width: 616px;
margin: 7px;
padding: 20px 0 0 0;
color: $textColor;
font: $textFont;
background: $postbgColor;
border: 1px solid $postBorderColor;
}

#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}

.post {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: justify;
}

.post h3 {
margin: 0px 0px 20px 0px;
padding: 0px 0px 2px 0px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
text-align: left;
line-height: 1.4em;
/* text-transform: uppercase; */
border-bottom: 3px solid $posttitleBorderColor;
}

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
text-decoration: none;
}

.post h3 a:hover {
color: $mainLinkColor;
text-decoration: none;
}

.post-header-line-1 {
}

h2.date-header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 7px 0px;
text-align: left;
color: $dateHeaderColor;
font: $dateHeaderFont;
text-decoration: none;
text-transform: uppercase;
}

.date-header span {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-body p {
/* Fix bug in IE5/Win with italics in posts */
margin: 0px 0px 0px 0px;
padding: 1px 0px 1px 0px;
display: inline; /* to fix floating-ads wrapping problem in IE */
height: 1%;
overflow: visible;
}

.post-body p a, .post-body p a:visited {
color: $mainLinkColor;
text-decoration: underline;
}

.post-body a:hover {
text-decoration: underline;
color: $mainHoverLinkColor;
}

.post ul {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
list-style-type: disc;
line-height: 1.6em;
font-size: 95%;
}

.post ol {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
line-height: 1.6em;
font-size: 95%;
}

.post li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 8px 0px;
}

a img {
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
}

.post img {
margin: 0px;
padding: 5px;
background: $imagebgColor;
border: 1px solid $imageBorderColor;
}

/* ----- POST-FOOTER ----- */
.post-footer {
display: block;
margin: 15px 0px 25px 0px;
padding: 7px 20px 7px 20px;
text-align: left;
font: $postfooterTextFont;
color: $postfooterTextColor;
font-weight: normal;
line-height: 1.6em;
text-decoration: none;
background: $postfooterBgColor;
border: 1px solid $postfooterBorderColor;
}

.post-footer-line {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer-line-1, .post-footer-line-2, .post-footer-line-3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer a {
color: $postfooterLinkColor;
text-decoration: none;
}

.post-footer a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}

.post-footer .post-comment-link a {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTabLinkColor;
font-weight: normal;
text-decoration: none;
}

.post-footer .post-comment-link a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}

.post-footer .post-icons {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
background: $postfooterBgColor;
}

#blog-pager {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
text-align: center;
font: $postfooterTextFont;
color: $feedlinksColor;
}

#blog-pager a {color: $feedlinksColor}
#blog-pager a:hover {color: $mainHoverLinkColor}

#blog-pager-newer-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#blog-pager-older-link {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.feed-links {
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
text-align: left;
font: $postfooterTextFont;
color: $feedlinksColor;
}

.feed-links a, .feed-links a:visited {color: $feedlinksColor}
.feed-links a:hover {color: $mainHoverLinkColor}

/* ----- BLOCKQUOTE ----- */
blockquote {
margin: 10px 20px 10px 20px;
padding: 10px 20px 10px 20px;
font: $quoteFont;
line-height: 1.6em;
color: $blockQuoteColor;
background: $blockquotebgColor;
border: 2px solid $blockquoteBorderColor;
}

/* ----- SIDEBAR ----- */
#side-wrapper1, #side-wrapper2 {
width: 268px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.sidebar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
font: $sidebarTextFont;
}

#sidebar1 {
width: 260px;
margin: 7px 7px 7px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
border-bottom: 0;
line-height: 1.6em;
}

#sidebar2 {
width: 230px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
background: $sidebar1bgColor;
border-left: 1px solid $postBorderColor;
line-height: 1.6em;
}

#sidebar1 .widget, #sidebar2 .widget {
margin: 0px 0px 0px 0px;
padding: 15px 15px 20px 15px;
border-bottom: 1px solid $postBorderColor;
}

/* sidebar heading ----- */
#sidebar1 h2, #sidebar2 h2 {
margin: -15px -15px 10px -15px;
padding: 5px 15px 5px 15px;
text-align: left;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 1px solid $sidebar1BorderColor;
}

.sidebar ul, #BlogArchive1 ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.sidebar li, #BlogArchive1 li {
margin: 0px 0px 6px 15px;
padding: 0px 0px 6px 0px;
line-height: 1.4em;
list-style-type: square;
border-bottom: 1px solid $sidebarListLineColor;
}

#sidebar1 a, #sidebar2 a {
color: $sidebar1LinkColor;
text-decoration: none;
}

#sidebar1 a:hover, #sidebar2 a:hover {
text-decoration: none;
color: $sidebar1HoverLinkColor;
}

#sidebar1 a:visited, #sidebar2 a:visited {
text-decoration: none;
color: $sidebar1VisitedLinkColor;
}

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid $profileBorderColor;
}

/* ----- COMMENTS ----- */
#comments {
margin: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
text-align: left;
color: $commentTextColor;
font: $commentTextFont;
}

.comments-singleblock {
margin: 10px 0px 10px 0px;
padding: 15px;
background: $commentboxBgColor;
border: 1px solid $commentboxBorderColor;
}

/* comment-header */
#comments h4 {
margin: 15px 0px 0px 0px;
padding: 0px 0px 5px 0px;
color: $commentTitleColor;
font: $commentTitleFont;
text-transform: uppercase;
}

.deleted-comment {
font-style:italic;
color:gray;
margin: 5px 0px 5px 0px;
}

.comment-author {
margin: -15px -15px 0px -15px;
padding: 5px 15px 5px 15px;
color: $commentauthorColor;
font-weight: bold;
background: $commentauthorBgColor;
border-bottom: 1px solid $commentboxBorderColor;
}

.comment-author a {color: $commentauthorColor; text-decoration: none;}
.comment-author a:hover {color: $commentTimeStampColor; text-decoration: underline;}
.comment-author a:visited {color: $commentauthorColor; text-decoration: none;}
.comment-body {margin: 0; padding: 10px 0px 0px 30px;}
.comment-body p {margin: 0; padding: 0; line-height: 1.6em;}
.comment-footer, .comment-footer a {margin: 0px 0px 0px 0px; padding: 4px 0px 0px 0px;}

.comment-timestamp {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTimeStampColor;
}

.comment-timestamp a {
color: $commentTimeStampColor;
text-decoration: none;
}

.comment-timestamp a:hover {color: $commentauthorColor; text-decoration: underline;}

#comments ul {margin: 0; padding: 0; list-style-type: none;}
#comments li {margin: 0; padding: 0;}

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
padding: 0px 0px 0px 0px;
}

html>body a.comment-link {
/* respecified, for ie5/mac's benefit */
padding-left: 0px;
}

#backlinks-container {margin-top: 30px}

/* ----- FOOTER ----- */
#footer-wrapper {
clear: both;
display: inline; /* handles IE margin bug */
float: left;
width: 902px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#footer {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
text-align: left;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.6em;
background: $footerbgColor;
border: 1px solid $footerBorderColor;
}

#footer h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
color: $footerHeaderColor;
font: $footerHeaderFont;
}

#footer .widget {
margin: 0px 0px 0px 0px;
padding: 0px 20px 20px 20px;
}

.footer p {margin: 0; padding: 0}

.footer a {
color: $footerLinkColor;
text-decoration: none;
}

.footer a:hover {
color: $footerHoverLinkColor;
text-decoration: underline;
}

.footer a:visited {
color: $footerVisitedLinkColor;
text-decoration: none;
}

/* ----- CREDIT ----- */
#credit {
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
height: 26px;
clear: both;
font-family: verdana, helvetica;
font-size: 70%;
color: #444444;
font-weight: normal;
background: #777777;
}

#creditleft {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: left;
text-align: left;
display: inline;
width: 71%;
background: #ffffff;
}

#creditright {
margin: -33px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: right;
text-align:right;
display: inline;
width: 30%;
background: #ffffff;
}

#creditleft p {
margin: 0;
padding: 0
}

#creditright p {
margin: 0;
padding: 0
}

#creditleft a, .creditleft a:hover, .creditleft a:visited {
color: #444444;
text-decoration: underline;
}

#creditright a, .creditright a:hover, .creditright a:visited {
color: #444444;
text-decoration: underline;
}

/* ************ END OF CSS STYLING ************ */
/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar {
padding: 0;
}

4.4.5. Thẻ ]]></b:skin>

4.5. Thẻ </head> (là thẻ đóng phần đầu của Template).

Còn tiếp: Cẩm nang thiết kế Blogger Template (Phần thân Template)

{16 bình luậnAdd yours ?}

18:13:00, 25 thg 1, 2011

hic câu hỏi của mình vẫn chưa có trả lời à?

Reply
21:02:00, 25 thg 1, 2011

Hô hô, anh Hà người QN à :D

Em đang thực tập ở Tam Kì nè ;))

Reply
07:43:00, 26 thg 1, 2011

@Noct Anh quê Duy Xuyên - Quảng Nam, nhưng từng sinh sống tứ xứ như Gia Lai, Hà Tây, Hà Nội, Đà Nẵng, Sài Gòn. Cũng do công việc cả thôi. Em học CNTT à, học ở Đà Nẵng hay sao mà thực tập ở TK, em cũng ở QN sao? :62)

Reply
18:16:00, 27 thg 1, 2011

Em học ở ĐN, không phải CNTT, tuy trường cũng có khoa đó.

Mà comment form bị lỗi rồi anh :60) . Đăng nhận xét chưa kịp xác nhận đã bị refresh trang.

Reply
19:12:00, 27 thg 1, 2011

Anh xài IE8 và FireFox nên k thấy lỗi rõ ràng, có lúc được có lúc k, chắc mấy công cụ trình duyệt cũ xì thì bị refresh dài dài. Anh đang ngâm cứu và còn 0,1% nữa là tìm ra cách fix rùi. Hì hì

Reply
19:29:00, 27 thg 1, 2011

Noct thử test Comment Form anh lại thử xem có refresh trang k nhé. Anh đang thử cách fix.

Reply
10:44:00, 29 thg 1, 2011

mình ở Huế nhưng gốc QN. Cũng miền trung cả :51)

Reply
10:49:00, 29 thg 1, 2011

thế thì hay quá, yêu cầu trên Chat Box của cậu có thể qua tết tớ mới viết bài được nha, chuẩn bị tất niên ăn nhậu quá xá.

Reply
09:18:00, 17 thg 2, 2011

Đi lang thang mới thấy, ra là cùng quê cả :)) mình cũng ở thị xã Tam Kỳ QN đây ^^ mà vào SG từ lớp 1 rùi ^^

Reply
23:47:00, 19 thg 2, 2011

Nếu em muốn ẩn cái tiêu đề blog đi thì làm thế nào bác .Tại em muốn dùng banner cho đẹp , chứ cái tiêu đề nó hiện ra trông xấu quá

Reply
21:52:00, 20 thg 2, 2011

@Phim OnlineHì hì, cho phép em trả lời giùm anh nha anh Hà!
Bạn tìm 'header-wrapper', phía dưới nó có "showaddelement='no'", bạn đổi no thành yes là ok! Tự nhiên nó sẽ xuất hiện thêm "Thêm tiện ích" vào phần header, khi đó bạn có thể bỏ ảnh vào dễ dàng! :)
Demo: http://khosachonline.blogspot.com/

Reply
22:28:00, 20 thg 2, 2011

oh thank. mình làm dc rồi.Khi nào ghé blog mình chơi. :D .
http://coi-phim-online.blogspot.com

Reply
15:49:00, 12 thg 10, 2011

Bài hay quá:5) , nhưng sao post lâu rồi mà chưa có phần 2 hả anh Hà?

Reply
12:00:00, 16 thg 3, 2012

Mãi ko thây phần 2 là sao ta :-?

Reply
19:21:00, 25 thg 4, 2012

Chào các bạn.
Thấy các bạn rành template quá, cho mình hỏi với. Hiện Blog của mình xuất hiện 2 phần blog posts. Bạn nào biết xin chỉ giúp. Các bạn xem thử ở đây (nhe xin lỗi đưa địa chỉ này) http://daylaixetruongan.blogspot.com/
Do hôm trước làm "vọc sĩ" cái temp của ông(noc) nào đó. Không phục hồi lại được. mà trình độ lại kém không biết ẩn cái widget đó như thế nào. Cám ơn nếu các bạn cho ý kiến.

Reply
06:56:00, 9 thg 7, 2012

Bài viết này viết rất khó hình dung với newbie cậu ạ!

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn