بلوگ*سپوتنىڭ يىشىلىشى !!!

ھازىر كۆپلىگەن بلوگداشلار blogbus نى ئىشلىتىۋاتىدۇ ،كۆزۈتىشىم ۋە پىكىر ئالماشتۇرۇش جەريانىدا ئۇلارنىڭ بلوگ*سپوتنىڭ ئارقا بەت سېسىتىمىسىغا تازا ماسلىشالمىغانلىقى ،تەرجىمە قىلىنغان بلوگ ئۇسلۇبى بەك ئازلىقىنى ،بلوگ*سپوتىن بىرنى ئىلتىماس قىلىپ كود رايۇنى بىلەن قاملىشالماي تاشلاپ قويغانلىقىنى بىلدىم. مۇشۇ قىيىنچىلىقنى ھەلقىلىش ۋە بلوگداشلارغا بلوگ*سپوتنى تەۋسىيە قىلىش ئۈچۈن بلوگ*سپوتنىڭ بەت ئورۇنلاشتۇرۇشنى يېشىپ تەمىنلەشنى بۇ ئارقىلىق بلوگ*سپوتتا تېخىمۇ نادىر بلوگلارنىڭ بارلىققا كېلىشىنى ئۈمىد قىلىپ مۇ بۇماقالىنى ھوزۇرۇڭلارغا سۇندۇم !

1.بارىلىق كۆك رەڭلىك ئورۇنStyle ئاستىدىكى CSS كود ،قىزىل رەڭلىك ئورۇنBody ئاستىدىكىHtml كودى

2.بۇ بارىلىق بلوگ ئۇسلۇبىغا ماسكىلى ۋەرمەيدۇ ،ئەمما كۆپىنچىسى ئوخشىشىپ كىتىدۇ

3. قېنى ئەمدى ئۆزىڭىز ياقتۇرغىنىڭز بۇيىچە ئۆزگرتىڭ !!! سىز چۇقۇم قىلالايسىز !

تالانت1%+تىرىشچانلىق98%+ئېنىق نىشان1%= مۇۋاپىقىيەت

A)باش قىسىم头部（Header）。

CSS=

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

HTML=

<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>

<ItemPage>
</h1>
<p id="description"><$BlogDescription$>
</div>

B）导航栏（Navigation Bar）。بۇ رايۇندىكى كود كۆرۈنمەيدۇ ،ئەگەر ئېلىۋەتمەكچى بولساڭلارCSSقىسمىغا تۆۋندىكى كودنى قويساڭلار بۇلىدۇ：

CSS=

#b-navbar { height:0px; visibility:hidden; display:none
}

C) Blog标题ماۋزۇ（Blog title）

CSS=

#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}

HTML=
<$BlogTitle$>

D)Blog 描述بلوگ ئۇچۇرلىرى（Blog Description）

CSS=
#blog-description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

HTML=
<$BlogDescription$>

E)Blogۋاقىت رايۇنى 日期首（Blog Date Header）。ماقالە يولىغاندا ۋاقتى ئۆزلىگىدىن ھاسىل بۇلدۇ

CSS=
h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
.date-header {
margin:1.5em 0 .5em;
}

HTML=
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

F)ماقالە تېمىسى文章标题（Blog Item Title)

CSS=
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#c60;

HTML=
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>

G)ماقالە رايۇنى文章区域（Post Division）。

CSS=
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
.post div {
margin:0 0 .75em;
line-height:1.6em;

HTML=
<div class="post">
</div>

H)文章援引区域تەۋسىيە قىلىش رايۇنى（Post Block Quote）

CSS=
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

HTML=
<blockquote>

I)ئەسەر خەتلىك كۆرۈنىش رايۇنى (ئايرىم ماقالىنىڭ كۆرۈنىش رايۇنى文章文字区域)（Blog Item Body)

CSS= .post div {
margin:0 0 .75em;
line-height:1.6em;
}

HTML=
<$BlogItemBody$>

J)个人资料部分ئاپتۇر ئۇچۇر رايۇنى（Blog Member Profile Division）

CSS=
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}


HTML=
<$BlogMemberProfile$>

K)文章底部ماقالە ئاستى قىسمى（Post Footer）بۇ قىسىم Authors Nickname, Item Date Time, Item Comment Count, Comments and blog item control variablesقاتارلىقلارنى ئۆز ئىچىگە ئالىدۇ

CSS=
p.post-footer {
margin:-.25em 0 0;
color:#ccc;
}
.post-footer em, .comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#999;
margin-right:.6em;
}

HTML=
<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p>

L)链接ئۇلىنىش（Links）

CSS=
a:link {
color:#58a;
text-decoration:none;
}
a:visited {
color:#969;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

HTML=
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
</ul>

M)之前文章ئالدىنقى ماقالە （Previous Posts）

CSS=
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

HTML=
<h2 class="sidebar-title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

N)存档 ساقلاش؛（Archives ）

CSS=
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;

list-style:none;
}

h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;

letter-spacing:.2em;
color:#999;
}

HTML=
<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>

O)侧边栏区域يان سىتون رايۇنى。

CSS=
#sidebar {
width:220px;
float:right;
}

#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#666;
line-height:1.5em;


HTML=
<div id="sidebar"><div id="sidebar2">
</div>

P)页脚部分بەت ئاستى قىسمى (ئەڭ ئاستى)

CSS=
#footer {
width:660px;
clear:both;
margin:0 auto;
}

#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}

#sidebar p {
color:#666;
line-height:1.5em;


HTML=
<div id="footer"><hr />
<p><!--This is an optional footer. If you want text here, place it inside these tags, and remove this comment. --> </p>
</div>

بەخىت- ئامەت ۋە ئۇتۇقلار سىلەرگە قۇچاق ئاچقاي! بىلوگىمنى ئۇلىنىش قىلىشنى ئۇنتۇپ قالماڭ!

خەنزۇچە ئادىرسى