Erlo

博客园美化大全

2019-08-07 16:03:45 发布   433 浏览  
页面报错/反馈
收藏 点赞

1.1、自动生成目录

效果如下:

 

(1)页脚js代码

首先得有js权限

复制代码

复制代码

(2)页面定制css代码

复制代码
/*生成博客目录的CSS*/
#uprightsideBar{
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    position:fixed;/*将div的位置固定到距离top:50px,right:0px的位置,这样div就会处在最右边的位置,距离顶部50px*/
    top:400px;
    right:53px;
    width: auto;
    height: auto; 
    
    
}
#sideBarTab{
    float:left;
    width:30px; 
    border:1px solid #e5e5e5;
    border-right:none;
    text-align:center;
    background:rgb(238, 130, 238);
}

#sideBarContents{
    float:left;
    overflow:auto; 
    overflow-x:hidden;!important;
    width:200px;
    min-height:108px;
    max-height:460px;
    border:1px solid #e5e5e5;
    border-right:none; 
    background:#ffffff;
}
#sideBarContents dl{
    margin:0;
    padding:0;
}

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

#sideBarContents dd, dt {
    cursor: pointer;
}

#sideBarContents dd:hover, dt:hover {
    color:#A7995A;
}
#sideBarContents dd{
    margin-left:20px;
}

复制代码

 

1.2.增加返回顶部按钮

(1)页面定制css代码

复制代码
#back-to-top {
    background-color: #00CD00;
    bottom: 0;
    box-shadow: 0 0 6px #00CD00;
    color: #444444;
    padding: 10px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
}

复制代码

(2)页首html代码

返回顶部

 

1.3.爱心特效(鼠标点击页面)

鼠标点击页面效果:

把下面代码复制到公告栏里面

复制代码

复制代码

 

1.4.公告栏时钟

公告里面

复制代码

复制代码

 

1.5.公告栏里面添加信息

公告里面

  • 图片路径:可以把图片上传到你的博客相册里面,然后把图片地址复制过来就可以

复制代码

&nbsp我的博客文章(目录)

 写自己想要的一些信息

       zzx

复制代码

 css代码

复制代码
.qq{
    color:red;
    font-size:15px;
    margin:8px;
   font-weight: 500;
}
.gonggao{
    margin:8px;
 font-size:16px;
    color:blue;
}

复制代码

 

1.6.添加github图标

页首html代码

只要把a标签里面的地址换成你自己的就可以

复制代码




复制代码

 

1.7.扩大和缩小功能

效果:

点“扩大”,左边的侧边栏会隐藏,点“缩小”侧边栏又会恢复

(1)页首html代码

扩大
缩小

(2)页面定制css样式

复制代码
#divExpandViewArea{
    position: fixed;
    color: white;
   
    padding: 10px 10px;
    left: 0px;
    top: 547px;
    cursor: pointer;
    opacity: 0.9;
    background-color: #68228B;
}
 
#divCollapseViewArea{
    position: fixed;
    color: white;
    
    padding: 10px 10px;
    left: 0px;
    top: 586px;
    cursor: pointer;
    opacity: 0.9;
    background-color: #68228B;
}

复制代码

 

1.8.设置签名格式

效果如下:

页面定制css样式

复制代码
/* 设置签名格式 */
#MySignature {
    display: none;
    background-color: #B2E866;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #6B6B6B;
    padding: 10px;
    line-height: 1.5;
    text-shadow: 1px 1px 1px #FFF;
    font-size: 16px;
    font-family: 'Microsoft Yahei';
}

复制代码

 

1.9.设置随笔分类间距

左侧随笔分类之间间距

页面定制css样式

复制代码
/* 左侧最新随笔 */
#CatList_LinkList_0_Link_0{
    
}
#CatList_LinkList_0_Link_1{
   
margin-top:10px;
}
#CatList_LinkList_0_Link_2{
   
    margin-top:10px;
}
#CatList_LinkList_0_Link_3{
 
margin-top:10px;

}
#CatList_LinkList_0_Link_4{
    
margin-top:10px;

}
#CatList_LinkList_0_Link_5{
    
margin-top:10px;

}
#CatList_LinkList_0_Link_6{
    
margin-top:10px;

}
#CatList_LinkList_0_Link_7{
    
margin-top:10px;

}
#CatList_LinkList_0_Link_8{
    
margin-top:10px;

}

复制代码

 

1.10.添加分享功能

效果如下:

 

公告栏里面

复制代码

复制代码

 

1.11.走马灯

 页首html代码

复制代码
大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。乱石穿空,惊涛拍岸,卷起千堆雪。江山如画,一时多少豪杰。遥想公瑾当年,小乔初嫁了,雄姿英发。羽扇纶巾,谈笑间,樯橹灰飞烟灭。故国神游,多情应笑我,早生华发。人生如梦,一尊还酹江月。

复制代码

 

1.12.推荐和反对

页面定制css

复制代码
/*推荐和反对*/
#div_digg {
    padding: 10px;
    position: fixed;
    _position: absolute;
    z-index: 1000;
    bottom: 20px;
    right: 0;
    _right: 17px;
    border: 1px solid #D9DBE1;
    background-color: #FFFFFF;
    filter: alpha(Opacity=80);
    -moz-opacity: 1;
    opacity: 1;
}

.icon_favorite {
    background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;
    padding-left: 16px;
}

复制代码

登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认