博客园快速美化

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

 （文章的标题开始导航，文章的底部导航字体大小都需调整，计划h2,h3,还有就是样式）

1.开通js权限

1.1（contact@cnblogs.com发送申请邮件，稍等即可）

1.2aaa

1.3bbb

2.博客皮肤修改，

先选择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);  
}

3.文章设置一级目录导航，

将如下代码复制到“页脚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请在代码注释的地方自行修改。该代码除了在文章的最开始生成目录索引之外，还会在每一个章节最后右下角(也就是下一个章节标题的右上角)会生成一个“回到顶部”的链接，以方便读者回到目录。本篇文章的目录结构就是自动生成的效果，如果你觉得有用，就赶快试用一下吧。

4.自动添侧边栏目录

(ctrl+3 = H3)这行文字变成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>

5.评论带头像并旋转

把如下代码复制到“页面制定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>

6.推荐反对设置

（以下代码复制到页面制定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('https://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;
}

7.添加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>

8.分享按钮

到分享按钮的设计网站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 -->

9.自定义地址栏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>

10.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>

11.主页头像

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

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

12.访客记录

参考教程：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>