我的博客是怎么自定義的

第一步，打開設置，一切都在設置里進行，讓我們從頭到尾，從左到右一步步講。

1.頭像

此頭像不是賬號頭像，是標題那里放圖片當頭像

 <img src="你頭像的地址" alt="" /> 

步驟：將你喜歡的頭像上傳在相冊里（這樣比較方便），打開相冊—>找到你要的圖片—>右鍵—>復制該圖片地址—>放在上面雙引號里面，復制上面的代碼放在設置的標題框里。如圖：

這是我的代碼

<img src="http://images.cnblogs.com/cnblogs_com/zhien-
aa/859075/o_u=1400210629,2162800351_fm=21_gp=0.jpg.gif" alt="" />

 

2，側邊欄（在下面的博客側邊欄公告里面進行）

1）訪客來源地圖

在http://www.clustrmaps.com/這個網站輸入你的博客主頁地址，然后將生成的代碼復制到公告框里面

如圖：

 這是我的代碼

<a href="http://www.clustrmaps.com/map/cnblogs.com/zhien-aa/" 
title="Visitor Map for cnblogs.com/zhien-aa/"><img 
src="http://www.clustrmaps.com/map_v2.png?
u=1GAm&amp;d=QEoznIY4QGNSaSoFTDxAk9rjpqUEabv5yIiOiLGGxu
4" alt="" /></a>

 

2)訪客量

 首先要在http://www.amazingcounters.com/index.php網站注冊,然后選擇你喜歡的一種樣式生成代碼，復制粘貼在公告框里就行了,這是我的代碼

您是第&nbsp;<a href="http://www.amazingcounters.com/"><img 
src="http://cc.amazingcounters.com/counter.php?
i=3203264&amp;c=9610105" alt="AmazingCounters.com" 
border="0" /></a>&nbsp;位訪客</div>

 

3)動態時鍾

在這個網址找你喜歡的類型http://www.blogclock.cn/，點擊預覽就有代碼了，同樣地，把代碼放公告欄

這是我心型鑽石時鍾的代碼

<embed width="180" height="180" align="middle" 
wmode="transparent" quality="high" 
src="http://images.cnblogs.com/cnblogs_com/csharp/clock.swf" 
pluginspage="http://www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash">

 

4）背景音樂

在這個網址登錄http://www.xiami.com/widget/imulti?spm=0.0.0.0.WqiEC9，然后搜索你喜歡的音樂，添加選中歌曲。下面就可咦自定義顏色、寬度和高度了，選擇html代碼復制在公告欄框里面。如圖：

這是我的代碼

<embed src="http://www.blogclock.cn/swf/S100003bc4baf25-c.swf" 
Width="165px" Height="150px" type="application/x-shockwave-
flash" quality="high" wmode="transparent"></embed>
<embed 
src="http://www.xiami.com/widget/200931831_3443891,2085861,
1769872629,1770808806,_165_210_4DB653_009609_1/multiPla
yer.swf" type="application/x-shockwave-flash" width="165" 
height="210" wmode="opaque"></embed>

 

 

3）皮膚背景

滑上去到頁面定制CSS代碼的框框，先把禁用模版默認CSS√上，

基本代碼是從這位博主這里復制來的http://www.cnblogs.com/libaoheng/archive/2012/03/19/2406836.html 

以下是修改了一些的我的代碼，如果想要我的風格的話可以直接復制放在框框里

/*公用*/
/*原風格blog:http://www.cnblogs.com/libaoheng/archive/2012/03/19/2406836.html */
body {
    font-size:15px;
    padding:0;
    margin:0;
    font-family:"微軟雅黑","宋體",Arial;
    background:#205424 url('http://images.cnblogs.com/cnblogs_com/zhien-aa/859057/o_201404241510122297.jpg') no-repeat top center fixed;
    min-width:1200px;
}
#home {
    opacity: 0.85;
    filter: alpha(opacity=95);
    box-shadow:0 0 10px #000;
    margin:40px auto;
    width:1200px;
    background:#fff;
    overflow:auto;
    border:solid 1px #fff;
}

/*段落*/
.postBody p,.postCon p {
    margin:7px 0;
    line-height:24px;
}
h1 {
    margin:0;
}
h3 {
    font-size:15px;
    font-weight:bold;
}
/*超鏈接*/
a {
    color:#464646;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited,a:hover {
    color:#464646;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
image {
    border:none;
}
#header {
    padding:20px;
}
/*博客標題*/
#blogTitle,#blogTitle a {
    font-weight:bold;
    color:#666;
}


#blogTitle .title {
    margin-top:10px;
    height:120px;
    line-height:120px;
    font-size:36px;
    padding-left:120px;
    background:#fff url('http://img.kuai8.com/attaches/album/20140424/201404241510122297.jpg') no-repeat;
}
.headermaintitle {
    }#blogTitle,#blogTitle a:hover {
    text-decoration:none;
}
/*子標題*/
.subtitle {
    padding-left:30px;
    font-size:14px;
    color:#999;
    font-weight:normal;
    margin:10px 0;
}
/*導航欄*/
#navigator {
    font-size:16px;
    height:48px;
    background:#55895B;
    text-align:center;
    margin-top:20px;
    margin-bottom:20px;
}
#navList li {
    margin:0;
    line-height:48px;
    display:inline-block;
    float:left;
}
#navList li:hover {
    background:#6DA47D;
}
#navList li a {
    padding:0 30px;
    text-decoration:none;
    line-height:48px;
    border:0;
    color:#fff;
    display:-moz-inline-box;
    display:inline-block;
}
.blogStats {
    height:48px;
    color:#fff;
    line-height:48px;
}
#main {
    padding:20px;
}
/*左邊*/
#sideBarMain {
    padding:0 10px 0 0;
    background:#fff;
    margin:0 0 20px 0;
    width:190px;
    font-size:12px;
    line-height:22px;
}
#sideBarMain a {
    color:#666;
}
#leftcontentcontainer {
    color:#666;
}
.newsItem {
    color:#666;
}
/*公告*/
#profile_block {
    margin-top:0px;
    line-height:24px;
    text-align:left;
}
/*主面板*/
#mainContent {
    margin-top:0px;
    padding-top:0px;
    padding-right:0px;
    background:#fff;
    padding-bottom:0px;
    float:right;
    width:960px;
    padding-left:0px;
}
/*每日文章列表*/
.day {
    background:#fff;
    padding:0;
    margin:0 0 20px 0;
}
/*博客標題*/
.postTitle a {
    color:#464646;
}
.postTitle {
    padding-bottom:10px;
    font-size:20px;
    font-weight:bold;
    color:#464646;
    background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
    padding-left:30px;
}
.dayTitle {
    display:none;
}
/*摘要*/
.c_b_p_desc {
    padding:10px;
    line-height:24px;
    color:#888;
}
.c_b_p_desc a {
    color:#888;
}
.c_b_p_desc a:hover {
    text-decoration:none;
    border-bottom-width:1px;
    border-bottom-style:dotted;
}
/*右側圖片*/
.desc_img {
    margin-left:10px;
    border:solid 1px #fff;
    box-shadow:0 0 10px #aaa;
}
/*博文頁*/
#topics .post {
    background:#fff;
}
.postCon {
    padding:10px 20px 0 20px;
}
.postDesc {
    margin:0 30px;
    margin-bottom:2px;
    padding:8px 0px;
    font-size:12px;
    color:#aaa;
    background:#fff;
    text-align:right;
}
.postDesc a {
    color:#AAA;
}
.postBody {
    padding:0;
}
/*google搜索框*/
#google_q,#q {
    height:22px;
    width:120px;
    border:solid 1px #ccc;
    box-shadow:inset 0 0 3px #ddd;
    border-radius:4px;
}
/*搜索按鈕*/
.btn_my_zzk {
    font-family:'Microsoft Yahei';
    border:none;
    height:26px;
    width:60px;
    padding:1px;
    font-size:14px;
    cursor:pointer;
    position:relative;
    vertical-align:middle;
    display:inline-block;
    background:#55895B;
    border-radius:4px;
    color:#fff;
}
.btn_my_zzk:hover {
    background:#6DA47D;
}
/*評論按鈕*/

#btn_comment_submit {
    border:none;
    height:48px;
    width:120px;
}
/*評論按鈕*/
.comment_btn {
    font-family:'Microsoft Yahei';
    border:none;
    height:48px;
    width:120px;
    font-size:18px;
    cursor:pointer;
    position:relative;
    vertical-align:middle;
    display:inline-block;
    background:#55895B;
    color:#fff;
}
#btn_comment_submit:hover {
    background:#6DA47D;
}
/*評論標題*/
.feedback_area_title {
    padding:10px;
    font-size:24px;
    font-weight:bold;
    color:#55895B;
    border-bottom:solid 6px #55895B;
}
.feedbackListSubtitle {
    font-size:12px;
    color:#888;
}
.feedbackListSubtitle a {
    color:#888;
}
.comment_quote {
    background:#FCFAAC;
    padding:15px;
    border:1px solid #CCC;
}
#commentform_title {
    color:#55895B;
    background-image:none;
    background-repeat:no-repeat;
    margin-bottom:10px;
    padding:10px 20px 10px 10px;
    font-size:24px;
    font-weight:bold;
    border-bottom:solid 6px #55895B;
}
/*評論框*/
#comment_form {
    margin:10px 0;
    padding:0;
}
.commentform {
    margin:10px 0;
    padding:10px 20px;
    background:#fff;
}
/*評論輸入域*/
#tbCommentBody {
    font-family:'MIcrosoft Yahei';
    margin-top:10px;
    width:940px;
    max-width:940px;
    min-width:940px;
    background:white;
    color:#333;
    border:2px solid #fff;
    box-shadow:inset 0 0 8px #aaa;
    padding:10px;
    height:120px;
    font-size:14px;
    min-height:120px;
}
/*評論條目*/
.feedbackItem {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
    font-weight:normal;
}
/*分類頁*/
.entrylist {
    padding:10px 20px;
    background:#fff;
}
.entrylistItem {
    margin:10px 0;
    padding:10px;
}
.entrylistPosttitle {
    font-size:18px;
    font-weight:bold;
    background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
    padding-left:30px;
}
.entrylistPostSummary {
    padding:10px;
}
.entrylistItemPostDesc {
    font-size:12px;
    color:#999;
    padding-left:40px;
}
/*尾部*/
#footer {
    font-size:12px;
    margin:20px;
    padding:12px;
    text-align:center;
    background:#55895B;
    color:#DDD;
    font-size:14px;
}
/*文章內圖片*/
#cnblogs_post_body p img {
    margin:10px;
}
/*頂一下*/
.diggnum {
    font-size:28px;
    color:#FFFFFF;
    font-family:'Microsoft Yahei';
}
#div_digg .diggnum {
    line-height:100px;
}
.diggit {
    float:left;
    width:340px;
    height:256px;
    background:url('http://images.cnblogs.com/cnblogs_com/zhien-aa/859075/o_215836877z8yhb8xbfydgb.gif') no-repeat;
    background-position:0 0;
    text-align:center;
    cursor:pointer;
}
.diggit:hover {
    background-position:-128px 0;
}
.buryit {
    display:none;
}
.diggword {
    display:none;
}

/*green_channel*/
#green_channel {
    text:align:right;
    background:#6DA47D;
    padding-left:20px;
    font-weight:normal;
    font-size:15px;
    width:920px;
    border:none;
    color:#fff;
    padding:20px;
    border-radius:4px;
}
/*最新評論*/
#myposts .PostList {
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;
    background:#F2F2F2;
    box-shadow:0 0 5px #aaa;
}
#myposts .postTitl2 a {
    color:#6DA47D;
}

 

如果你不喜歡這個背景圖片，想要自己的圖片，就把圖片上傳到相冊里，像上面找頭像地址一樣把背景圖片的地址復制出來，將基本代碼里面的背景圖片地址換成你自己的。如下：

body {
font-size:15px;
padding:0;
margin:0;
font-family:"微軟雅黑","宋體",Arial;
background:#205424 url('你背景圖片的地址') no-repeat top center fixed;
min-width:1200px;
}

 

 唔.......不知道大家有沒有注意到，打開我的博客隨筆右邊會出現一只跳舞的小初音，這是從卿學姐的博客學來的，動圖地址也是像頭像地址和背景地址一樣，

以下是代碼，在上面的基本代碼里面，可能要調一下大小。

.diggit {
    float:left;
    width:340px;
    height:256px;
    background:url('你的動圖地址') no-repeat;
    background-position:0 0;
    text-align:center;
    cursor:pointer;
}
.diggit:hover {
    background-position:-128px 0;
}
.buryit {
    display:none;
}
.diggword {
    display:none;
}

 

 

 還有什么問題的可以留言哦~