我的博客是怎么自定义的

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

1.头像

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

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

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

这是我的代码

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

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

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

时间： 2024-10-07 13:52:09

我的博客是怎么自定义的的相关文章

Django之博客系统：自定义模板标签

Django提供了很多内置的模板标签比如{% if %}或者{% block %}Django也允许你创建自己的模板标签(template tags)来执行自定义的动作.当你需要在你的模板中添加功能而Django模板标签(template tags)的核心设置无法提供此功能的时候,自定义模板标签会非常方便 Django提供了以下帮助函数(functions)来允许你以一种简单的方式创建自己的模板标签(template tags): simple_tag:处理数据并返回一个字符串(string)

博客园 主题自定义美化

第一步,上传自定义的css 在浏览器中直接打开https://files.cnblogs.com/files/JetpropelledSnake/cnblogs.css,然后按ctrl + s,即可将本人博客用到的自定义css下载下来.接着在博客的管理页面,找到文件选项卡,上传刚刚下载的文件: 上传之后,记下该文件的url,如上图中的红框所示.注:上图中的url为本人博客的自定义css文件地址,你在后面设置的时候虽然也可以用它,但是最好还是不用,万一将来我把这个文件删了,你的博客就访问不到这个c

在Azure中搭建Ghost博客并绑定自定义域名和HTTPS

绪论 之前一直使用cnblog写博客,现在将博客迁移至Microsoft Azure上的Ghost博客上,Ghost博客使用Markdown书写博客,页面简洁,是我喜欢的风格.具体参见官网:https://ghost.org/ ,将创建流程介绍一下. 在Azure上搭建Ghost博客 不得不说,在Azure上面搭建Ghost博客真的是太简单了,完全傻瓜化. 搜索到Ghost Blog项目 填写应用名称AppName,一般而言,将创建的Ghost博客默认域名为[AppName].azurewebs

博客园设置自定义页面样式

首先是背景图片,这个修改对模版而言都是通用的 body { background:url('URL') no-repeat top center fixed;} 这里图片路径可以上传到博客本地图片,图片就有了网上路径 然后是正文模块在整体背景中的浮动 #home { margin:0px auto; width:1000px; } 一个控制模块顶部和背景距离 一个控制模块和宽度{当页面缩放的宽度远远小于你设定的宽度,右边搜索框及其他组件都会移动到底层,不利于使用,最好设置一个合适的宽度} 正文模

博客园样式自定义（待更新）

总感觉这件事情做的晚了哈哈. 以前写博客总是一个人默默地写,现在竟然出现了两个吐槽我挖坑不填的哈哈.(非常感谢~) 大概是终于有个人能够督促自己学习了,你们怎么不早点来?!!! 废话不多说,怎么定义博客园的代码呢. 步骤一,屏蔽掉博客园的皮肤样式 => 百度一下,你就知道 => 其实就是编辑里面 打个勾? 步骤二,如果你要修改JS => 在编辑的地方申请一下 => 一般都会马上批准的. 步骤三, 开工了. 当前要改进的还有很多,比如我觉得 编辑这东西就该放在右上角. 1.编辑栏要放

博客园页面自定义美化分享。---------随时更新；

1.页面定制CSS代码: 1 /* 公共样式区域开始 */ 2 3 body,ol,ul,h1,h2,h3,h4,h5,h6,p,dl,dd,fieldset,legend,input,textarea,select { 4 margin: 0; 5 padding: 0; 6 } 7 8 body { 9 font: 12px "幼圆"; 10 word-wrap: break-word; 11 } 12 13 /* 去掉线 */ 14 a,u,s,del { 15 color: #

博客园 模板自定义

1.选择模板如下图 2.修改css 如下 .topicListFooter { text-align: right; margin-right: 10px; margin-top: 10px } * { margin: 0; padding: 0 } html { height: 100% } body { /*background: url(images/body_bg.png) repeat-x scroll 0 0 #f0eef5;*/ color: #7d8b8d; font-size:

博客园自定义样式

我现在的博客园首页暂时应该是一个女生背景,一些星星的悬浮飘扬 那么我们怎么来设置博客园的自定义的样式,而不是不个性的默认界面呢? 第一步:进入你的首页,打开管理 => 设置 第二步:我在博客皮肤中选择了SimpleMemory,这个皮肤相对来说要轻快.干净,更方便你来修改你的样式. 第三步:事实上你可以禁用默认CSS,这也是允许的,不过就会弄成这样 学过前端的同学应该知道不掺杂任何任何的CSS就会出现这样的情况,这是浏览器默认给定的样式,而不是博客园给的CSS默认样式(所以你已经禁用了博客园的默

Ubuntu14.04+Jekyll+Github Pages搭建静态博客

官方教程http://jekyllrb.com/docs/installation/ 1. Jekyll简介 简单: 无需数据库.无需评论功能,不需要不断更新版本,只需要关心博客内容. 静态: 只用 Markdown (或 Textile).Liquid.HTML & CSS 就可以构建可部署的静态网站. 博客形态: 自定义地址.分类.页面.博客内容 以及 自定义的布局设计 都是系统中的一等公民. Jekyll详细介绍 2. Github Pages简介 Github Pages是Github提