博客侧边栏公告:

联系我是通过腾讯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="返回顶部"
οnclick="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>

转载于:https://www.cnblogs.com/Candies/p/4048451.html

自定义自己的博客园博客首页相关推荐

  1. 前端小白也能快速学会的博客园博客美化全攻略

    前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点"推荐"或关注本人喔~ 美化方法论简介 一般而言,需要选一个默认的 ...

  2. 前端小白也能快速学会的博客园博客美化全攻略[附源码]

    前端小白也能快速学会的博客园博客美化全攻略[附源码] 文章目录 前端小白也能快速学会的博客园博客美化全攻略[附源码] 美化方法论简介 准备工作 js权限申请 如何模仿一个博客园的自定义风格(样式css ...

  3. 给你的网页添加看板娘(以给博客园博客添加看板娘为例)(保姆级图文)

    步骤 系列文章 前言 1.下载看板娘资源 2.上传资源到文件 3.在设置中调用资源 4.看看效果 总结 系列文章 提示:转到日常小技巧专栏,观看更多内容! 点我直达–>日常小技巧专栏 前言 给你 ...

  4. 博客园博客账号意外被封怎么办?

    今天我们就谈谈博客园博客账号意外被封如何申请解封,希望对新手有些帮助,事情是这样的,早上的时候我上了一下自己的博客园博客账号发现:咦!乍回事啊,怎么登不上去了呢? ================== ...

  5. python爬虫入门教程-Python爬虫入门教程——爬取自己的博客园博客

    互联网时代里,网络爬虫是一种高效地信息采集利器,可以快速准确地获取网上的各种数据资源.本文使用Python库requests.Beautiful Soup爬取博客园博客的相关信息,利用txt文件转存. ...

  6. 博客园博客PDF生成器

    周末写了一个博客园博客PDF生成器,由于博客园文件上传大小的限制,我把源代码放在CSDN上了(想信大家都有帐号哈),如果没有帐号的请留下邮箱,我会尽快发给你,当然如果哪位朋友能帮忙把源代码上传到博客园 ...

  7. 无忧开通了博客园博客主页

    无忧开通了博客园博客主页,今后在这里安家了. 分享一点工作经验和学习心得,有事没事常来看看.另一个独立博客www.wuyouseo.com 转载于:https://www.cnblogs.com/wu ...

  8. 博客园博客开通了,庆贺一下

    博客园博客开通了,庆贺一下 还是觉得博客园里面的技术气氛比较浓一些 转载于:https://www.cnblogs.com/binghe021/archive/2011/02/14/1954370.h ...

  9. python爬虫教程-Python爬虫入门教程——爬取自己的博客园博客

    互联网时代里,网络爬虫是一种高效地信息采集利器,可以快速准确地获取网上的各种数据资源.本文使用Python库requests.Beautiful Soup爬取博客园博客的相关信息,利用txt文件转存. ...

  10. 我的博客园博客开通了

    我的博客园博客开通了 发文做个记录庆祝下  https://www.cnblogs.com/akweb/

最新文章

  1. spring boot 搭建 和 全局异常处理
  2. pycharms怎么看文件被什么引用_办公室文件柜怎么选,选购文件柜有什么窍门
  3. Leetcode 921. Minimum Add to Make Parentheses Valid
  4. Grunt上手指南(转)
  5. 职场打怪,是不是升级越快越好?
  6. pytorch 优化器调参
  7. 网易考拉向欧洲市场投入220亿,能掀起多大波澜?
  8. css3 水纹效果(仿写阿里云)
  9. 100道c语言经典编程题,C语言经典例题100道
  10. WebRTC之beamforming算法
  11. ca盘显示无证书_CA证书使用问题及解决方法
  12. arcgis for js4.x自定义图例位置添加到地图并导出
  13. FPC手工焊接方法分享
  14. java将域名解析为IP地址,获取网卡的配置信息
  15. Web安全漏洞及安全防护
  16. 微信公众号图灵机器人开发php,使用图灵机器人api搭建微信聊天机器人php实现,图灵微信聊天机器人...
  17. Xshell vim使用右侧数字键盘时数字变成英文字母的解决办法
  18. CMMI2.0之我见-配置管理CM
  19. 卷积后的尺寸大小问题
  20. CI框架设置ENVIRONMENT

热门文章

  1. 情报使能 合作共赢 | TI INSIDE计划发布会即将开始
  2. 惠普:某些 SSD 驱动的寿命只有32,768 小时(3年多),立即更新!
  3. HTML如何设置音频播放器控件的大小
  4. 寒假训练营第四次作业
  5. PostgreSQL 分库分表 插件之一 pg_shard
  6. Maven学习(1) - Maven入门
  7. webview如何自动登录保存登录信息详情
  8. Objective-C 2.0 with Cocoa Foundation---对象的初始化以及实例变量的作用域(1)
  9. Accerlerated c++ 答案
  10. source insight工程的相对路径