當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

我的博客是怎么自定义的

發(fā)布時間：2023/12/2 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了我的博客是怎么自定义的小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

1.頭像

此頭像不是賬號頭像，是標(biāo)題那里放圖片當(dāng)頭像

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

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

這是我的代碼

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

1）訪客來源地圖

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

如圖：

?這是我的代碼

2)訪客量

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

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

3)動態(tài)時鐘

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

這是我心型鉆石時鐘的代碼

4）背景音樂

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

這是我的代碼

3）皮膚背景

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

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

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

/*公用*/ /*原風(fēng)格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; } /*博客標(biāo)題*/ #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; } /*子標(biāo)題*/ .subtitle {padding-left:30px;font-size:14px;color:#999;font-weight:normal;margin:10px 0; } /*導(dǎo)航欄*/ #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; } /*博客標(biāo)題*/ .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; } /*右側(cè)圖片*/ .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; } /*評論標(biāo)題*/ .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; } /*文章內(nèi)圖片*/ #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; }

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

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

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

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

.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; }

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

轉(zhuǎn)載于:https://www.cnblogs.com/zhien-aa/p/6011480.html

總結(jié)

以上是生活随笔為你收集整理的我的博客是怎么自定义的的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： iOS - Swift NSData 数
下一篇： AngularJS的学习笔记（二）