备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

自定义自己的博客园博客首页

2014-11-26 783
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 博客侧边栏公告： 联系我是通过腾讯QQ的方式联系我，会根据QQ的在线状态显示不同颜色的图标。 企鹅： 页脚Html代码： var cnzz_protocol = (("https:" == document.

博客侧边栏公告：

联系我是通过腾讯QQ的方式联系我，会根据QQ的在线状态显示不同颜色的图标。

<!-- 头像 -->
<img class="divBlock" src="http://images.cnblogs.com/cnblogs_com/Candies/632934/o_mayun.jpg" style="height:300px;">
<!-- 企鹅 -->
企鹅：<a target="_blank" href="tencent://message/?uin=359031282&Menu=yes">
<img border="0" src="http://wpa.qq.com/imgd?IDKEY=0888b40d1f802a8ee4a15521b180d224ca321fb46fc82ce2&pic=51"
alt="Candyメ奶糖" title="Candyメ奶糖"></a>

页脚Html代码：

<!-- 站长统计 -->
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1253650355'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1253650355%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script>
<!-- 微博分享 -->
<div id="share">
<a class="divBlock" href="http://weibo.com/u/1986192324" target="_blank" id="sina">　</a>
<a class="divBlock" href="http://t.qq.com/loverning" target="_blank" id="tent" >　</a>
</div>

<!-- 返回顶部 -->
<a href="javascript:" id="toTop" title="返回顶部"
onclick="window.scrollTo(0,0);return false;" style=""></a>

页面定制CSS代码

/*---------------------------------共通 Start---------------------------------*/
body {
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Arial, Helvetica,
sans-serif;
font-size: 14px;
vertical-align: top;
color: #000;
}

#main {
margin: 0 auto;
padding: 20px 0;
width: 1024px;
}

#mainContent {
float: right;
width: 790px;
}

a,a:hover,a:active,a:visited {
text-decoration: none;
color: #267CB2;
}

a:hover {
text-decoration: none;
color: #F60;
}

ul,li {
list-style: none;
}

ul {
margin: 0;
padding: 0;
}

/* 返回顶部 */
#toTop {
width: 28px;
height: 65px;
position: fixed;
display: none;
right: 20px;
bottom: 65px;
background:
url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_backtop.png)
no-repeat 0px 0px;
opacity: 0.6;
}

#toTop:hover {
opacity: 1;
filter: alpha(opacity = 100);
background:
url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_backtop.png)
no-repeat -28px 0px;
}

/* 页脚微博 */
#share {
width: 35px;
position: fixed;
right: 20px;
bottom: 150px;
}

#share a {
color: #333;
}

#share a#sina {
line-height: 3;
background: transparent
url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_WB_logo.png)
no-repeat 0px 0px;
}

#share a#tent {
line-height: 3;
background: transparent
url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_tx_wb_logo.png)
no-repeat 0px 0px;
}

/*
#share {
position:fixed;
bottom: 0px;
right: 0px;
width: 450px;
margin: 0 auto;
border: 1px solid #CC0;
background: #F4FAED;
padding: 5px 10px 3px
}

#share a {
background: transparent
url(http://image.dili360.com/www/img/sharelogo.png) no-repeat scroll 0
0;
line-height: 1.8;
color: #333;
margin: 0 0 0 10px;
padding: 3px 0 3px 18px;
}

#share a#sina {
background-position: 0 -79px
}

#share a#tent {
background-position: 0 -129px
}

*/

/* 隐藏页脚 */
#footer {
background-color: #F1F4F4;
padding-top: 25px;
color: #333;
text-align: center;
}

#cnzz_stat_icon_1253650355 {
width: 100%;
display: inline-block;
background-color: #F1F4F4;
padding-bootom: 25px;
text-align: center;
}

/*---------------------------------共通 End---------------------------------*/

/*---------------------------------导航栏 Start---------------------------------*/
#navList {
background:
url(http://images.cnblogs.com/cnblogs_com/libaoheng/435190/o_bg-tabs.png)
no-repeat center bottom;
border: none !important;
height: 52px;
text-align: center;
margin: 0 0 12px;
padding: 15px 0 1px;
font-size: 16px;
}

#navList li {
margin: 0;
display: inline-block;
vertical-align: bottom;
}

#navList a {
font-family: 'Microsoft YaHei';
color: #333;
text-decoration: none;
background: #D8E1EC
url(http://i1.asp.net/images/ui/sprite-ui.png?cdn_id=t32) repeat-x 0
-363px;
border: 1px solid #D8E1EC;
border-bottom: 0;
display: block;
padding: 16px 36px 0;
margin: 0;
position: relative;
top: 0;
text-align: center;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
min-height: 36px;
}

#navList a:hover,#MyLinks1_MyHomeLink {
background: white !important;
color: #000 !important;
border: 1px solid #CFD0D3 !important;
border-bottom: 0 !important;
-moz-box-shadow: 0 6px 0 #fff, 0 0 4px #bbb !important;
-webkit-box-shadow: 0 6px 0 white, 0 0 4px #BBB !important;
box-shadow: 0 6px 0 white, 0 0 4px #BBB !important;
}
/*---------------------------------导航栏 End---------------------------------*/

/*---------------------------------标题 Start---------------------------------*/
/* 博客标题 */
#blogTitle {
margin: 0 auto;
padding-left: 100px;
background-color: #D2D8DE;
height: 106px;
}

#blogTitle .title {
width: 1024px;
margin: 0 auto;
padding: 26px 0 0;
}

#blogTitle h2 {
font-size: 14px;
font-weight: normal;
}

/* 标题 */
h1 {
margin: 0;
padding: 0;
}

h1.postTitle {
padding: 0;
background: #fff;
font-size: 24px;
}

h1.postTitle a {
color: #000;
text-decoration: none !important;
}

h3 {
margin: 10px 0;
padding: 0;
font-size: 14px;
}

h3.catListTitle {
color: #fff;
}
/*---------------------------------标题 End---------------------------------*/

/*---------------------------------侧边栏 Start---------------------------------*/
#sideBar {
min-height: 200px;
padding: 0px 0 0px 5px;
float: left;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}

/* 不显示公告 */
.newsItem .catListTitle {
display: none;
}

/* 时钟 */
.divBlock,#honehoneclock {
display: block;
}

.blog-news {
margin-top: 5px;
line-height: 1.5;
text-align: left;
}

.catList,.catListTag,.mySearch,.catListLink,.catListPostCategory,.catListPostArchive,.catListBlogRank
{
border-radius: 7px;
border-bottom: 1px dotted #ccc;
}

.catListTitle {
background-color: #267CB2;
font-size: 16px;
border-bottom: 1px solid #006600;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
font-size: 1.2em;
height: 1.8em;
line-height: 1.8em;
padding: 5px;
text-indent: 0.5em;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

/* 加大随笔档案、随笔分类等列表间距 */
.catList ul li,.catListTag ul li,.catListLink ul li,.catListPostArchive ul li,.catListPostCategory ul li,.catListBlogRank ul li
{
padding: 5px 0px 5px 10px
}

/*---------------------------------侧边栏 End---------------------------------*/

/*---------------------------------博文列表 Start---------------------------------*/
/* 日期块、从随笔分类和随笔档案点开的一览页面 */
.day,.entrylistItem {
min-height: 10px;
_height: 10px;
background: #fff;
border-radius: 7px;
box-shadow: 1px 1px 2px #aaa;
margin: 0 5px 20px 0;
padding: 5px 20px 5px 20px;
}

/* 日期标题 */
.dayTitle {
color: #666;
line-height: 2.2em;
font-size: 22px;
clear: both;
border-bottom: 1px solid #ccc;
text-align: center;
}
/* 博文标题 */
.postTitle,.entrylistPosttitle {
font-size: 16px;
font-weight: bold;
padding: 3px 0 4px 24px;
border-bottom: 1px dashed #ccc;
line-height: 2.5em;
clear: both;
background:
url(http://images.cnblogs.com/cnblogs_com/Candies/632934/o_titile-icons.png)
no-repeat 0px 50%;
}

.postTitle a:link,.postTitle a:visited,.postTitle a:active,.entrylistPosttitle a:link,.entrylistPosttitle a:visited,.entrylistPosttitle a:active
{
transition: all 0.4s linear 0s;
}

/* 博文标题 */
.postTitle a:hover,.entrylistPosttitle a:hover {
color: #F60;
text-decoration: none;
margin-left: 10px;
}

/* 博文内容 */
.postCon,.entrylistPostSummary {
margin: 10px 0px;
}

.postDesc a {
display: none;
}

/* 博文post脚 */
.postDesc,.entrylistItemPostDesc {
text-align: right;
color: #999;
}

/* 不显示随笔档案-XX、随笔分类-XX和描述 */
.entrylistTitle,.entrylistDescription {
display: none;
}
/*---------------------------------博文列表 End---------------------------------*/

/*---------------------------------博文内容页面 Start---------------------------------*/

/* 博客签名 */
#MySignature {
/*background:url("http://images.cnblogs.com/cnblogs_com/Candies/632934/o_o_light2.png") no-repeat 10px 50%;*/
background:
url("http://images.cnblogs.com/cnblogs_com/Candies/632934/o_may.png")
no-repeat 20px 40%;
margin-top: 20px;
padding: 10px 10px 10px 120px;
box-shadow: 0px 0px 15px #aaa;
border-radius: 25px;
border: 1px dotted #FFD596;
}

#MySignature a {
color: #FB9400;
}

/* 屏蔽广告 */
#site_nav_under,#ad_under_post_holder,#google_ad_c2 {
display: none;
}

/*博客目录*/
#sideBarView {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
position: fixed;
/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
top: 299px;
right: 30px;
width: auto;
height: auto;
}

#sideBarTab {
float: left;
width: 30px;
border: 1px solid #e5e5e5;
border-right: none;
text-align: center;
background: #ffffff;
background-color: #F1F4F4;
border-radius: 5px;
}

#sideBarContents {
float:left;
overflow:auto;
overflow-x:hidden;!important;
padding:10px;
min-height: 108px;
max-height: 460px;
border: 1px solid #e5e5e5;
background: #ffffff;
border-radius: 5px;
}

#sideBarContents dl {
margin-top: 15px;
margin-bottom: 15px;
padding: 0;
}

#sideBarContents dt {
margin-top: 15px;
margin-left: 5px;
}

#sideBarContents dd,dt {
cursor: pointer;
-webkit-margin-start:0px;
}

#sideBarContents dd:hover,dt:hover {
color: #A7995A;
}

.blog_comment_body {
border-radius: 15px;
box-shadow: 0px 0px 15px #aaa;
border: 2px solid #FFD596;
display: inline-block;
margin: 10px 0px;
padding: 15px;
position: relative;
}
/*---------------------------------博文内容页面 End---------------------------------*/

页首Html代码

<script type="text/javascript">
    function toTopHide(){
        $(document).scrollTop()>1000?
                $("#toTop").show()
                    :$("#toTop").hide();
    }
    $(window).scroll(function(){toTopHide()});
</script>
作者： Candyメ奶糖

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
博文来源广泛，如原作者认为我侵犯知识产权，请尽快给我发邮件 359031282@qq.com联系，我将以第一时间删除相关内容。

文章标签：
前端开发
JavaScript
candy-yun
目录
相关文章
No8g攻城狮
|
6月前
|
前端开发
前端好的博客收藏
前端好的博客收藏
No8g攻城狮
36 0
Perceus
|
C语言
博客总结（导航）
博客总结（导航）
Perceus
156 0
博客总结（导航）
dasein58
|
搜索推荐 SEO
什么样的链接是好链接？哪些链接是优质链接？
查看关键词排名时，我们会注意到排名与外部链接绝对数量之间并没有直接对应关系。很多外部链接数目较少的页面会排在很多外部链接的页面之上。这也是很多SEO新手困惑的，为什么自己的页面外部链接很多，排名却不如只有几个外部链接的竞争对手？这与外部链接的质量有很多关系。 下面&lt;span style=&quot;color: rgba(38, 38, 38, 1)&quot;&gt;&lt;a rel=&quot;dofollow&quot; href=&quot;https://www.fgba.net/&quot; title=&quot;富贵论坛&quot;&gt;&lt;span style=&quot;color: rgba(38, 38, 38, 1)&quot;&gt;富贵论坛&lt;/span&gt;&lt;/a&gt;www.fgba.n
dasein58
248 0
angel_kitty
|
前端开发
【全网最全的博客美化系列教程】02.添加QQ交谈链接
全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠 【全网最全的博客美化系列教程】04.
angel_kitty
1265 0
黑泽明军
为博客园添加目录的方法总结+自定义博客园样式
参考链接： http://www.cnblogs.com/real-me/p/8336741.html https://www.cnblogs.com/xuehaoyue/p/6650533.html http://www.
黑泽明军
2010 0
优惠码发放
|
SEO
成功的博客都有好的内容
是什么让一个博客变得成功？相当的文章数不胜数，但不论怎样，所有的人都会同意这个观点：伟大的博客都有伟大的内容。 “内容才是王道”的呼声在站长界回响了数年的时间，虽然我认为一个博客要要想成功仅凭这句话是不够的，但“内容”的确是一个成功的博客必不可少的关键因素。
优惠码发放
1045 0
青夜之衫
|
Web App开发 JavaScript 前端开发
如何在博客园中自定义导航菜单
青夜之衫
1436 0
martin-1120
csdn 说好的导入博客,博客导入到哪去了?????
martin-1120
1256 0
老朱教授
|
前端开发 JavaScript
【分享】博客美化(7)推荐几个优秀的自定义博客
老朱教授
1183 0
老朱教授
博客园博客美化相关文章目录
老朱教授
928 0