博客园快速美化

其他 2019-03-23 23:18:02 阅读次数: 0

参考文章：https://www.cnblogs.com/WhiteTears/p/8824544.html

开通js权限（[email protected]发送申请邮件，稍等即可）

博客皮肤修改，先选择darkgreentrip模版样式，在“页面定制CSS代码”填写如下代码（最好禁用原css）

#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(245, 245, 245, 0.7);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
    background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_123.jpg') fixed no-repeat;
    background-position: 50% 5%; 
    background-size: cover;
}
#blogTitle {
    height: 100px;  /*高度*/
    clear: both;
    background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #548B54;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
    line-height: 1.8;
    color: #111;
    font-weight: bold;
    text-align: right;
    float: right; 
}
#navigator{
    background-color: rgba(33, 160, 139, 0.9);
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #eee;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(33, 160, 139, 0.68);
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    float: right;
    width: 100%;
    clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #21759b;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #0f3647;
    text-decoration: none;
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear: both;
    padding: 10px 0;
}

.day .postTitle a {
    padding-left: 10px;
}
.day {
    background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {   
    background: url(images/posted_time.png) no-repeat 0 1px;
    color: #757575;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;     
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 13px;
    padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
    margin-top: 20px;
    line-height: 1.8;
    padding-bottom: 35px;
}

.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
    background: rgba(255, 255, 255, 0.5);
    margin-bottom: 35px;
    word-wrap: break-word;
}

.CalTitle{
    background: rgba(255, 255, 255, 0);
}
.catListTitle{
    background-color: rgba(33, 160, 139, 0.9);
}

#topics{
    background: rgba(255, 255, 255, 0.5);
}

.c_ad_block{
    display: none;
}

#tbCommentBody{
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
}

#q{background: rgba(255, 255, 255, 0);}

.CalNextPrev{background: rgba(255, 255, 255, 0);}

.cnblogs_code{
    background: rgba(255, 255, 255, 0);    
}

.cnblogs_code div{
    background: rgba(255, 255, 255, 0);    
}

.cnblogs_code_toolbar{
    background: rgba(255, 255, 255, 0);  
}

.entrylist{
    background: rgba(255, 255, 255, 0.5);  
}

文章开始设置一级目录导航，将如下代码复制到“页脚HTML代码”中。

<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
if(jquery_h3_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>阅读目录</b></p>';
content += '<ul>';
for(var i =0;i<jquery_h3_list.length;i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
$(jquery_h3_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
} 
}
GenerateContentList();
</script>


使用方法：登录到博客园之后，打开博客园的后台管理，切换到“设置”选项卡，将上面的代码，粘贴到 “页脚HTML代码” 区保存即可。

注意：上述js代码中提取的h3作为章节的标题，如果你的标题不是h3请在代码注释的地方自行修改。该代码除了在文章的最开始生成目录索引之外，还会在每一个章节最后右下角(也就是下一个章节标题的右上角)会生成一个“回到顶部”的链接，以方便读者回到目录。本篇文章的目录结构就是自动生成的效果，如果你觉得有用，就赶快试用一下吧。

 

自动添加底部侧边栏目录(ctrl+3 = H3)

代码文件：marvin.nav.my1502.css、marvin.cnblogs.js（版权声明相关）、marvin.nav.my1502.WhiteTears.js

将以上文件右键保存到本地，然后上传到自己博客的文件中，复制你的博客中这些文件的链接，用于下面的替换。

<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://files.cnblogs.com/files/juna3066/marvin.nav.my1502.css">
<script type="text/javascript" src="https://files.cnblogs.com/files/juna3066/marvin.cnblogs.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/juna3066/marvin.nav.my1502.WhiteTears.js"></script>

评论带头像并支持旋转

把如下代码复制到“页面制定css”

.feedbackCon img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
 
.feedbackCon img {
border-radius: 40px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

下载Comments.js，然后上传到自己博客的文件中，复制文件链接，对如下代码进行替换。（如下代码添加到“页脚Html代码”）

<script type="text/javascript" src="https://files.cnblogs.com/files/juna3066/Comments.js"></script>

推荐反对的炫酷样式设置（以下代码复制到页面制定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: 0.8;
    opacity: 0.8;
}

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

#blog_post_info_block a {
    text-decoration: none;
    color: #5B9DCA;
    padding: 3px;
}

添加github地址，img保存到本地，上传到自己博客中，对下面链接替换。github也换成自己的链接（代码复制到页首html中）

<a href="https://gitee.com/juna3066" target="_blank">
<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;" src="https://img2018.cnblogs.com/blog/1610117/201903/1610117-20190323233700343-456800062.png" >
</a>

分享按钮

到分享按钮的设计网站http://www.jiathis.com/  生成代码（网址实效），可以自定义生成代码，也可以直接使用默认的代码。将代码复制到页首HTML：

<!-- 分享 -->
<!-- JiaThis Button BEGIN -->
<script type="text/javascript" >
var jiathis_config={
    siteNum:15,
    sm:"copy,qzone,tsina,weixin,tqq,tsohu,renren,cqq,tieba,douban,kaixin001,t163,yixin,51,copy",
    summary:"",
    boldNum:6,
    showClose:true,
    shortUrl:false,
    hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=0" charset="utf-8"></script>
<!-- JiaThis Button END -->

自定义地址栏logo

首先点击如下网站生成logo（http://www.bitbug.net/）,上传到博客，

用图片地址读如下代码修改，然后代码复制到页脚代码中

<script type="text/javascript" language="javascript">
　　//Setting ico for cnblogs
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = "https://img2018.cnblogs.com/blog/1610117/201903/1610117-20190324002101289-564192089.icon";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

QQ交谈（先修改qq号，然后复制如下代码到侧公告栏）

<div align="center">
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1600031645&amp;site=qq&amp;menu=yes">
<img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:1600031645:41 &amp;r=0.30709030851721764" alt="欢迎联系我" title="欢迎联系我">
</a>
</div>

主页头像（用自己博客头像路径修改如下代码，然后复制到测公告栏）

<!-- 添加图片并指向CSDN -->
<div align="center">
<a href="https://blog.csdn.net/muyun_csdn">
<img src="https://pic.cnblogs.com/avatar/1610117/20190223184511.png">
</a> 
</div>

访客记录

参考教程：https://www.cnblogs.com/phper12580/p/8034280.html

操作说明：去http://www.amazingcounters.com/sign-up.php网站选择样式并生成代码，复制粘贴至侧边栏公告代码区

博客签名：（如下代码复制到签名内容）

<div>作者：<a href="https://www.cnblogs.com/juna3066/">Juna3066</a></div>
<div>出处：<a target="_blank">https://www.cnblogs.com/juna3066/</a></div>

猜你喜欢

转载自www.cnblogs.com/juna3066/p/10586070.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022