我的博客是怎么自定义的

第一步，打开设置，一切都在设置里进行，让我们从头到尾，从左到右一步步讲。

1.头像

此头像不是账号头像，是标题那里放图片当头像

步骤：将你喜欢的头像上传在相册里（这样比较方便），打开相册—>找到你要的图片—>右键—>复制该图片地址—>放在上面双引号里面，复制上面的代码放在设置的标题框里。如图：

这是我的代码

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

还有什么问题的可以留言哦~

转载于:https://www.cnblogs.com/zhien-aa/p/6011480.html

我的博客是怎么自定义的相关推荐

CSDN博客图片水印|自定义水印|去除水印
参考博文1:https://blog.csdn.net/stereohomology/article/details/54561782 参考博文2:https://blog.csdn.net/u011 ...
CSDN博客图片水印自定义及去除方法
csdn默认水印参数隐藏了,要删除就去博客设置里取消自动添加水印吧,下面的添加水印方法还可以用小图上传说明尺寸较小的图片上传后默认不加水印,而且默认水平居中显示.你可以更改markdown格式后面 ...
CSDN写博客——去水印or自定义水印#解密CSDN上传图片生成链接的内容
文章目录解密CSDN上传图片生成链接的内容如何去水印如何自定义水印解密CSDN上传图片生成链接的内容上传图片到博客,都会生成一段链接: 例如:https://img-blog.csdnimg ...
彰显个性│博客园的自定义主题
目录预览一.开放的博客园二.主题推荐三.自定义主题配置CSS 四.自定义主题配置JS 五.页面加载loading 六.页面看板七.动态背景八.标签动效一.开放的博客园在国内,开源社区有很 ...
从零开始搭建一个博客部署上线自定义域名 vuepress+github+vercel
全局安装VuePress npm install -g vuepress 创建项目文件夹 mkdir vuepreeeBlogDemo cd vuepreeeBlogDemo npm init -y ...
hexo博客kaze主题自定义社交链接
主题自带的icon图标 # 社交链接 about:description: descriptionsocial_links:- { icon: icon-sina, link: https://wei ...
Hexo博客Ayer主题自定义配置
Ayer主题,下面是我的部分配置,可以参考,希望能帮到你
【教程】一步一步教你如何自定义设置——博客园canvas/JS交互动画背景
演示步骤的原文链接:(看完就可以掌握如何设置博客园canvas动画背景) 博客园如何自定义设置canvas/JS动画背景 --2018-10-27 本博客的弹弹弹小球-canvas动画原文链接:(看完 ...
如何为自己的 CSDN博客设置自定义域名？
想实现自定义域名,有几种途径,这里简单介绍一下. 1.CSDN官方提供的功能为了更好的服务于用户,CSDN博客推出了自定义域名服务. 如何操作在"博客配置"中可以进行个性域名配 ...

我的博客是怎么自定义的

我的博客是怎么自定义的相关推荐

最新文章

热门文章