您的位置:首页 > Web前端

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

2019-02-11 18:10 686 查看

目录

  • 如何模仿一个博客园的自定义风格(样式css+动态效果js)?
  • markdown样式自定义
  • 在页面顶部添加"自定义搜索"功能
  • 在页面顶部添加"音乐播放器"(Flash)播放背景音乐
  • 在页面顶部添加"Fork me on Github"图标
  • 为导航栏设置渐变背景色
  • 在公告栏添加动态文字
  • 在公告栏加入自己的社交网络账号 - 图片链接
  • 在公告栏添加一个能旋转的rss图标
  • 在公共栏添加"小人时钟"(Flash)
  • 在公共栏添加"站点统计"功能
  • 页面底部添加"回到顶部" + "收藏" + "快速评论"功能
  • "自动移动的目录"功能
  • 改进评论的显示样式
  • 在公告栏添加"友情链接"
  • "博客签名"功能
  • 禁用页面的"选中复制"功能
  • 不显示底部广告
  • 修改导航栏(修改部分链接的文字 + 增加下拉菜单)
  • 前端小白也能快速学会的博客园博客美化全攻略

    美化方法论简介

    一般而言,需要选一个默认的skin,然后在该基础上调整。

    官方介绍:
    博客皮肤模板 http://skintemplate.cnblogs.com/

    宽屏模版:

    SimpleMemory
    Minyx2_Lite
    lessIsMore
    BlueSky

    组成及对应关系

    准备工作

    1. 首先你得有个cnblogs博客
    2. 打开 博客后台管理
    3. 申请js权限
    4. 在博客皮肤选项卡中将博客皮肤设置为: BlueSky
    5. 将 页面定制.css 复制到 页面定制CSS代码 代码框内
    6. 将 页首.html 复制到 页首Html代码 代码框内
    7. 将 页尾.html 复制到 页脚Html代码 代码框内
    8. 保存,即可用

    附源码:
    yanglr/Beautify-cnblogs: Beautify-cnblogs
    https://github.com/yanglr/Beautify-cnblogs

    欢迎fork或star~

    js权限申请

    (需要截图)

    登陆后点击“我的博客”——“管理”——“设置”———在下拉后找到“博客侧边栏公告”,后方有一个“申请js权限”。

    园子 - 博客园 https://home.cnblogs.com/feed/all/
    进博客园首页,发状态@博客园团队,申请开头js权限。

    如何模仿一个博客园的自定义风格(样式css+动态效果js)?

    模仿一个cnblogs

    <link id="MainCss" type="text/css" rel="stylesheet" href="/skins/LessIsMore/bundle-LessIsMore.css?...">
    
    <link type="text/css" rel="stylesheet" href="/blog/customcss/198996.css?v=...">

    宽屏模版:
    Minyx2_Lite
    lessIsMore
    BlueSky

    补充完整前缀:http://www.cnblogs.com
    即可进行模仿。

    markdown样式自定义

    默认markdown状态下,代码中的字比较小。

    /* 文章标题样式(这个不是markdown里的标题) */
    #topics .postTitle a {
    /* color: #169fe6; */
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-weight: bold;
    }
    
    /* 普通文字样式 */
    #cnblogs_post_body p {
    margin: 18px auto;
    color: #000;
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 16px;
    text-indent: 0;
    }
    
    /* 标题样式 */
    #cnblogs_post_body h1 {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
    }
    
    #cnblogs_post_body h2 {
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    margin: 20px 0;
    }
    
    #cnblogs_post_body h3 {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
    }
    
    #cnblogs_post_body h4 {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
    }
    /* 标题样式设置结束 */
    
    /* 去除双下划线斜体样式 */
    em {
    font-style: normal;
    color: #000;
    }
    
    /* 无序列表 */
    #cnblogs_post_body ul li {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    color: #000;
    font-size: 16px;
    list-style-type: disc;
    }
    
    /* 有序列表 */
    #cnblogs_post_body ol li {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    color: #000;
    font-size: 16px;
    list-style-type: decimal;
    }
    
    /* 超链接 */
    #cnblogs_post_body a:link {
    text-decoration: none;
    color: #002C99;
    }
    
    /* 引用背景 */
    #topics .postBody blockquote {
    background: #fff3d4;
    border: none;
    border-left: 5px solid #f6b73c;
    margin: 0;
    padding-left: 10px;
    }
    
    /* 单行代码 */
    .cnblogs-markdown code {
    font-family: Consolas, "Microsoft YaHei", monospace !important;
    font-size: 16px !important;
    line-height: 20px;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    padding: 0 5px !important;
    border-radius: 3px !important;
    line-height: 1.8;
    margin: 1px 5px;
    vertical-align: middle;
    display: inline-block;
    }
    
    /* 多行代码, 引用 */
    .cnblogs-markdown .hljs {
    font-family: Consolas, "Microsoft YaHei", monospace !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 5px !important;
    }

    在页面顶部添加"自定义搜索"功能

    css部分:

    <style type="text/css">
    #auto_div {
    display: none;
    width: 257px;
    border: 1px #74c0f9 solid;
    background: #FFF;
    position: absolute;
    top: 24px;
    left: 0;
    margin-top: 15px;
    color: #323232;
    /*设置显示在当前页面的上一层*/
    z-index: 1;
    }
    
    .side_search {
    float: left;
    position: relative;
    height: 31px;
    margin-left: 25px;
    display: inline-block;
    }
    
    .side_search:hover {
    -webkit-box-shadow: 0 0 3px #999;
    -moz-box-shadow: 0 0 3px #999
    }
    
    .search_input {
    width: 210px;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    border: 1px solid #999;
    border-radius: 2px 0 0 2px;
    padding: 4px 7px;
    background-color: #fbfbfb;
    }
    
    .delete_btn {
    background: #fbfbfb;
    margin-left: -6px;
    border: 1px solid #fbfbfb;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: red;
    font-weight: bold;
    width: 38px;
    font-size: 25px;
    height: 38px;
    padding-bottom: inherit;
    }
    
    .search_btn {
    border-radius: 3px 3px 3px 3px;
    background: #4d90fe;
    margin-left: -7px;
    border: 1px solid #4d90fe;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: #f3f7fc;
    font-weight: bold;
    width: 100px;
    font-size: 18px;
    height: 41px;
    }
    
    .search_btn:hover {
    background: #1874CD
    }
    
    .search_btn2 {
    border-radius: 3px 3px 3px 3px;
    background: #F0CB85;
    border: 1px solid #F0CB85;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: #DC143C;
    font-weight: bold;
    width: 100px;
    font-size: 18px;
    height: 41px;
    }
    
    .search_btn2:hover {
    background: #DEB887
    }
    
    input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    }
    </style>

    js部分:

    html部分:

    <h1 style="margin-left: 570px;padding-top:15px;padding-bottom: 15px; color: #337ab7;font-size: 3em;font-weight: bold;font-style: italic;text-shadow: 1px 0px 0px #1E90FF;">  </h1>
    <div class="side_search">
    <input type="text" id="zzk_q" class="search_input" onkeydown="return zzk_go_enter(event);" placeholder="输入 回车搜索" tabindex="1" autofocus x-webkit-speech>
    <div id="auto_div">
    </div>&nbsp;
    <input onclick="quickdelete()" type="button" class="delete_btn" value="×" title="清空">
    <input onclick="zzk_go()" type="button" class="search_btn" value="本博搜索">
    <input onclick="zzk_go2()" type="button" class="search_btn2" value="园内搜索">
    </div>

    在页面顶部添加"音乐播放器"(Flash)播放背景音乐

    <div style="display: table; text-align: center; width: 40%; height: 100%;">
    <embed src="https://music.163.com/style/swf/widget.swf?sid=26237342&type=2&auto=0&width=320&height=66" width="340" height="86"  allowNetworking="all" ></embed>
    </div>

    效果图: gif

    在页面顶部添加"Fork me on Github"图标

    页首html需要添加

    <div>
    <a href="http://github.com/yanglr" target="_blank" style="position: absolute;right: 0;  top: 0; z-index: 100;">
    <img src="http://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_git-right-link.gif" alt="Fork me on github">
    </a>
    </div>

    为导航栏设置渐变背景色

    /* 头部 */
    #header {
    position: relative;
    height: 280px;
    margin: 0;
    background: #020031;
    background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353));
    background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: linear-gradient(45deg,#020031 0,#6d3353 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);
    -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
    box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
    }

    在公告栏添加动态文字

    使用

    marquee
    标签既能实现文字的滚动

    <marquee><a href="#"><font color="blue" size="4">You will make it!
    </marquee>

    在公告栏加入自己的社交网络账号 - 图片链接

    <div nowrap align=center>
    <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_gzh.png" width=150 height=150>
    </div>
    <br>
    <div align="center">
    <a href="http://stackoverflow.com/users/6075331/bravo-young" target="_blank" class="mr5 "><strong>StackOverflow</strong></a><font  style="color:#BF7158">(</font>
    <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_reputation-rp.png" class="mr5">
    <span style="color:#BF7158" class="mr10">406 <font size=4 color=black>⬆</font>)</span>
    </div>
    
    <br>
    
    <div class="c-social" align="center">
    <span>
    <a href="https://github.com/yanglr" target="_blank">
    <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_github.png" class="mr5" width = 40 height=40>
    </a>
    <a href="http://blog.csdn.net/lzuacm" target="_blank">
    <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_csdn.png" class="mr5" width = 40 height=40>
    </a>
    <a href="https://www.zhihu.com/people/legege007" target="_blank">
    <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_zhihu.png" class="mr5" width = 40 height=40>
    </a>
    <a href="http://weibo.com/546671991" target="_blank">
    <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_weibo.png" class="mr5" width = 40 height=40>
    </a>
    
    </span>

    在公告栏添加一个能旋转的rss图标

    先将相应的css放入页面定制css或公告栏的css中,然后在后面使用。

    #feed_icon {
    border: #000 solid 2px;
    display: block;
    margin: 50px auto;
    border-radius: 50%;
    transition: all 2.0s;
    }
    
    #feed_icon:hover {
    transform: rotate(360deg);
    }
    <div id="feed">
    <a href="https://www.cnblogs.com/enjoy233/rss" title="订阅Feed"  target="_blank">
    <img id="feed_icon" src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_rss.png" alt="" style="border: 0pt none;" width = 60 height=60>
    </a>
    </div>

    效果图: gif

    在公共栏添加"小人时钟"(Flash)

    <embed wmode="transparent" src="https://files.cnblogs.com/files/enjoy233/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="200" height="120" name="honehoneclock" align="middle" allowscriptaccess="always"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

    效果图: gif

    在公共栏添加"站点统计"功能

    打开网站:http://www.flagcounter.com/ ,无需注册,点击黄色按钮"Get Your Flag Counter",即可生成嵌入该插件的html代码。

    生成的html代码如下:

    <div>
    <a href="https://info.flagcounter.com/LCgi"><img src="https://s04.flagcounter.com/count2/LCgi/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
    <div>

    最后将该代码加入到公告栏的html代码中即能生效。

    页面底部添加"回到顶部" + "收藏" + "快速评论"功能

    js部分:

    <script language="javascript" type="text/javascript">
    //生成目录索引列表
    function GenerateContentList()
    {
    var jquery_h3_list = $('#cnblogs_post_body h4');//如果你的章节标题不是h4,只需要将这里的h4换掉即可
    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部分:

    <div class="scrollBtn" id="scrollBtn">
    <ul class="clearfix">
    <li class="sB-home">
    <a href="http://www.cnblogs.com/liyunhua" class="ff-t" title="首页"></a>
    </li>
    <li class="sB-comment">
    <a href="#blog-comments-placeholder" onclick="$('#tbCommentBody').focus();" class="ff-t" title="添加评论"></a>
    </li>
    <li class="sB-share"><a onclick="if(cb_entryId !=undefined){AddToWz(cb_entryId)}" href="javascript:void(0);" title="收藏"></a></li>
    <li class="sB-goTop" id="goTop" style="display: list-item;">
    <a href="#top" title="回顶部"></a>
    </li>
    </ul>
    </div>

    "自动移动的目录"功能

    效果图: gif

    改进评论的显示样式

    改成了微信聊天的样式。

    纯css实现:

    .blog_comment_body {
    background: #B2E866;
    float: left;
    border-radius: 5px;
    position: relative;
    overflow: visible;
    margin-left: 33px;
    max-width: 700px;
    }
    
    .feedbackListSubtitle a.layer {
    background: #B2E866;
    color: #414141 !important;
    padding: 2px 4px;
    border-radius: 2px;
    }

    在公告栏添加"友情链接"

    cnblogs博客后台提供了"链接"功能,这个就是用来添加友情链接的。

    "博客签名"功能

    虽然cnblogs博客后台提供了"博客签名"功能,测试发现IE下不能用,只好改为用JQuery来实现了。

    <script type="text/javascript">
    $(document).ready(function(){
    $("#cnblogs_post_body").append('<br/><hr/><div style="border: 2px dotted #4d90fe; padding: 2px; background-color: lightgray">    作者:<a href="http://www.cnblogs.com/enjoy233/" target="_blank" title="Enjoy233的博客" style="color: brown">Bravo Yeung</a><br>    出处:<a href="http://www.cnblogs.com/Enjoy233/" target="_blank" title="http://www.cnblogs.com/Enjoy233/" style="color: blue">http://www.cnblogs.com/Enjoy233/</a>    <br>如果您觉得阅读本文对您有帮助,请点击一下右下方的<b style="color: blue; font-size: 16px">推荐</b>按钮,您的<b style="color: blue; font-size: 16px">推荐</b>将是我写作的最大动力!    <br>版权声明:本文为博主原创或转载文章,欢迎转载,<b>但转载文章之后必须在文章页面明显位置注明出处</b>,否则保留追究法律责任的权利。</div>');
    });
    </script>

    禁用页面的"选中复制"功能

    /* 禁止页面,选中 复制 */
    html,body {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    不显示底部广告

    #ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {
    display:none; !important
    }

    修改导航栏(修改部分链接的文字 + 增加下拉菜单)

    css部分:

    /* 定制自己导航栏的样式 */
    #shwtop ul {
    margin: 0;
    padding: 0;
    list-style-type: none; /*去除li前的标注*/
    background-color: #333;
    overflow: hidden; /*隐藏溢出的部分,保持一行*/
    }
    #shwtop li {
    float: left; /*左浮动*/
    }
    #shwtop li a, .dropbtn {
    display: inline-block; /*设置成块*/
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
    }
    /*鼠标移上去,改变背景颜色*/
    #shwtop li a:hover, .dropdown:hover .dropbtn {
    /* 当然颜色你可以自己改成自己喜欢的,我还是挺喜欢蓝色的 */
    background-color: blue;
    }
    #shwtop .dropdown {
    /*
    display:inline-block将对象呈递为内联对象,
    但是对象的内容作为块对象呈递。
    旁边的内联对象会被呈递在同一行内,允许空格。
    */
    display: inline-block;
    }
    #shwtop .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    #shwtop .dropdown-content a {
    display: block;
    color: black;
    padding: 8px 10px;
    text-decoration:none;
    }
    #shwtop .dropdown-content a:hover {
    background-color: #a1a1a1;
    }
    #shwtop .dropdown:hover .dropdown-content{
    display: block;
    }

    页脚html部分:

    <!-- 更新导航栏的菜单-->
    <script>
    $(function(){
    $("#navigator").append('<div id="shwtop" >    <ul style="margin-left:0px;margin-right: 5px;">       <div class="dropdown">            <a href="#" class="dropbtn">全部分类</a>            <div class="dropdown-content">                <!-- <a class="menu" href="这里是你文章或随笔分类的链接地址,自己修改下面同理"> 这里更改下拉具体内容 </a> -->                <a class="menu" href="#"  >1.Linux基础</a>                <a class="menu" href="#"  >2.Python基础</a>                <a class="menu" href="http://www.cnblogs.com/shwee/category/1217691.html"  >3.Python进阶</a>                <a class="menu" href="http://www.cnblogs.com/shwee/category/1217693.html"  >4.项目实战</a>                <a class="menu" href="http://www.cnblogs.com/shwee/category/1217695.html"  >5.人工智能</a>                <a class="menu" href="http://www.cnblogs.com/shwee/category/1212750.html"  >6.阅读笔记</a>            </div>        </div>    </ul></div>');
    
    $("#navList").append('<li id="nav_config"><a id="tufujie" rel="nofollow" href="http://i.cnblogs.com/Configure.aspx" target="_blank" title="进入配置管理">配置</a></li>');
    $("#navList").append('<li id="nav_home"><a id="tufujie" rel="nofollow" href="https://ing.cnblogs.com/" target="_blank" title="进入我的闪存">闪存</a></li>');
    $("#navList").append('<li id="nav_follow"><a id="tufujie" rel="nofollow" href="http://home.cnblogs.com/followees/" target="_blank" title="进入我的关注">关注</a></li>');
    $("#navList").append('<li id="nav_wz"><a id="tufujie" rel="nofollow" href="http://wz.cnblogs.com/" target="_blank" title="进入我的收藏">收藏</a></li>');
    
    $('#navList')[0].children["nav_contact"].innerHTML='<a id="nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/Enjoy233">私信</a>';
    $('#navList')[0].children["nav_rss"].innerHTML='<a id="nav_rss" class="menu" rel="nofollow" href="https://www.cnblogs.com/enjoy233/rss">RSS订阅</a>';
    
    //加载图片
    var ponum1 = $(".postTitle").length;
    var ponum2 = $(".entrylistPosttitle").length;
    if(ponum1!=0)
    articleimg(ponum1);
    if(ponum2!=0)
    entrylistarticleimg(ponum2);
    });
    </script>
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: