首页 > 博客园美化技巧汇总

博客园美化技巧汇总

 

首先得有js权限

1.1 页脚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.公告栏里面添加信息

公告里面

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

 我的博客文章(目录)

 写自己想要的一些信息

       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: 579px;cursor: pointer;opacity: 0.9;background-color: #68228B;
}#divCollapseViewArea{position: fixed;color: white;padding: 10px 10px;left: 0px;top: 618px;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;
}
复制代码
复制代码

 

转载于:https://www.cnblogs.com/JetpropelledSnake/p/9092770.html

更多相关: