我的博客是怎么自定义的
生活随笔
收集整理的這篇文章主要介紹了
我的博客是怎么自定义的
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一步，打開設置，一切都在設置里進行，讓我們從頭到尾，從左到右一步步講。
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&d=QEoznIY4QGNSaSoFTDxAk9rjpqUEabv5yIiOiLGGxu 4" alt="" /></a>?
2)訪客量
?首先要在http://www.amazingcounters.com/index.php網站注冊,然后選擇你喜歡的一種樣式生成代碼，復制粘貼在公告框里就行了,這是我的代碼
您是第 <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)動態時鐘
在這個網址找你喜歡的類型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; }?
?
?還有什么問題的可以留言哦~
?
轉載于:https://www.cnblogs.com/zhien-aa/p/6011480.html
總結
以上是生活随笔為你收集整理的我的博客是怎么自定义的的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS - Swift NSData 数
- 下一篇： HBuilder完成webApp入门（3