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

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

Người đăng: yeu mai em on Thứ Ba, 25 tháng 1, 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)
vào lúc 00:03
Nhãn:

{ 0 nhận xét... read them below or add one }


Đăng nhận xét