个人博客园样式、背景及细节美化过程

番茄西红柿发布于2019-04-23 13:10 / 3467人阅读

摘要：踩坑注意导入后要勾选禁用默认否则会造成各种显示问题我的文件可以右键查看网页源代码获取，使用时基于主题，懒得折腾的可以直接下载。

主页美化：

主要参考嘻哈烧饼的美化，在TA的基础上增加了对主页背景、色调以及侧边栏的调整

原帖地址：https://www.cnblogs.com/seanshao/p/5716543.html

修改博客园背景的代码如下（在原帖使用的css文件中修改）：

body {
    color: #000;

    background:url(https://www.cnblogs.com/images/cnblogs_com/Keenster/1344881/o_169wallhaven-599106.jpg) fixed;
    background-position:center;
    background-size:cover;
    background-repeat: no-repeat;
    font-family: "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 14px;
    min-height: 101%;
}

修改主副标题颜色的代码如下（在原帖使用的css文件中修改）：

/*主标题格式*/
    #blogTitle h1 {
        font-size: 26px;
        font-weight: bold;
        line-height: 1.8em;/*原始 1.6em*/
    }

        #blogTitle h1 a {
            color: #ffffff;
        }
            /*超链接颜色*/
            #blogTitle h1 a:hover {
                /*color: #21759b;*/
            }
    /*次标题格式*/
    #blogTitle h2 {
        font-weight: normal;
        font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
        line-height: 1.8;
        color: #ffffff;
        float: left;
        white-space: nowrap;        
    }

修改侧边栏头像、图像居中，并添加超链接的代码如下：（在侧边栏公告中修改，而不是在css中修改）

至于返回顶部按钮，博文大小标题分类，直接使用了原帖的代码，就不一一列出了。

踩坑注意：css导入后要勾选“禁用默认css”否则会造成各种显示问题

我的css文件可以右键查看网页源代码获取（bundle-SimpleMemory-A5_v308.css），使用时基于SimpleMemory主题，懒得折腾的可以直接下载。

下载后，请上传到博客文件中，并按如下格式在页首html中添加代码：

<link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/Keenster/bundle-SimpleMemory-A5_v308.css"/>

细节美化：

爱心特效、添加右上角github图标，主要参考Zhang_derek的美化

原帖地址：http://www.cnblogs.com/derek1184405959/p/9018285.html

鼠标点击时的爱心特效代码如下：（侧边栏中修改）

添加github链接的代码如下：（在页首html中添加）

<a href="https://github.com/qq849012418?tab=repositories" title="我的github地址" target="_Blank" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm">path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body">path>svg>a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}style>

待完成的美化：

导航栏自动分类、增强分享等，待博客内容更丰富时再尝试。

GPU云服务器云服务器博客园个人云服务器博客园博客园webrtc wcf博客园

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1528.html

博客园个人主页美化

摘要：刚入博客园，小白也要有一个高大上的个人博客页面啊，鼓捣了一下午，感觉自己棒棒的，叉腰得瑟个人感觉的主页样式很美观，大气，哈哈首先，在博客园后台管理的设置里，申请代码的权限默认是没有打开的申请的时候一定要有礼貌，有礼貌，有礼貌申请了三次才通，刚入博客园，小白也要有一个高大上的个人博客页面啊，鼓捣了一下午，感觉自己棒棒的，叉腰得瑟个人感觉Simple的主页样式很美观，大气，哈哈首先，在博...

zsirfs 2019-04-23 13:18 评论0 收藏0
前端小白也能快速学会的博客园博客美化全攻略

摘要：前端小白也能快速学会的博客园博客美化全攻略呦，博客园的自我修养是什么第一条，别只顾收藏和偷师呀，记得点推荐或关注本人喔美化方法论简介一般而言，需要选一个默认的，然后在该基础上调整。或者也可进博客园园子页面，发状态博客园团队，申请开通权限。前端小白也能快速学会的博客园博客美化全攻略 A呦V，博客园er的自我修养是什么？第一条，别只顾收藏和偷师呀，记得点推荐或关注本人喔~ 美化方法论简...

StonePanda 2019-08-23 15:09 评论0 收藏0
[学习交流]博客园 cnblog 添加github链接和自定义美化学习

2018.12.30更新 --------------------------------------------------------------------分割线--------------------------------------------------------------------------------- 认识博客园的组件选择皮肤：设置-博客设置-（该皮肤为简洁）下面...

番茄西红柿 2019-04-23 11:57 评论0 收藏0
Web前端：博客美化：一、模板美化

1、选用模板simplememory 2、写css放在这些会覆盖掉原来的css样式我是在网上找的css代码二次加工的 : ） /*1、针对simplememory的修改*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter ...

Bamboy 2019-04-23 11:51 评论0 收藏0
博客园自定义样式

摘要：个人比较喜欢用来编写博客，但是博客园自带的编辑器真的不是很友好啊。。。。。还好，博客园比较人性化的有页面样式的自定制功能。碎碎念：已经很长时间没有更新过博客了，分析一下，一个是太懒了。。。所以很久没整理一下了。还有就是嫌弃博客园默认的博客界面真的太丑了，作为颜控的我真的无法忍受啊。个人比较喜欢用makedown来编写博客，但是博客园自带的编辑器真的不是很友好啊。。。。。还...

ASCH 2019-08-29 14:16 评论0 收藏0