快速定制自己的个性化博客（附源码）

引言: 注册博客园的同学都希望自己的博客也能像别人的一样,拥有自己个性化的元素在里面,但是初学者又不知道该如何更改自己的博客css,今天呢就由我带大家一起做一次博客园的个性化设计!!!

想要更改博客园css设计,需要你先更改博客园管理->设置->博客皮肤为darkgreentrip,如下图:
在管理->设置->css定制插入css代码 ,代码直接CTRL+C/v. (注意:修改背景图片需要上传浏览器地址, 这里有问题的童鞋可以找找度娘@ )

#home {
    margin: 0px;
    width: 95%;/*原始65*/
    min-width: auto;/*页面顶部的宽度*/
    background-color: rgba(245, 245, 245, 0.55);
    padding: 30px;
    margin-top: 0px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
    background: rgba(12, 100, 129, 1) url('https://images.cnblogs.com/cnblogs_com/blogs/629715/galleries/2083471/t_211223021244_small073040LDd3H1637537440.jpg') fixed no-repeat;   //修改背景图片
    background-position: 50% 1%;
    background-size: cover;
}
#header {
    position: sticky;
    position: -webkit-sticky;
    top: 1px;
    width: auto;
    margin-left: 12px;

}
#sideBar {
    position: fixed;
    max-height: 500px;
    background-color: rgb(244, 192, 192);
    margin-left: 0px;
    
}
#blogTitle {
    height: 105px;  /*高度*/
    clear: both;
    background-color: rgba(97, 253, 253, 0.55);   //博客标题的背景
}
#blogTitle h1 {
    font-style: serif;
    font-size: 36.7px;
    font-weight: bolder;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #dcb272;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
    line-height: 1.8;
    color: #f4d2a0;
    font-weight: bold;
    text-align: right;
    float: right;
}
#navigator{
    background-color:rgba(135,206,205, 0.5);          //标题栏下的颜色
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(132,112,255, 0);
    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:     #FF6A6A;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #EE6363;
    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(255,110,180,0.6);   //栏目的条纹颜色
}
#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);
}
#main{min-width: 640px;}
.entrylist{
    background: rgba(255, 255, 255, 0.5);
}

想要看板娘的可以将下面代码直接复制到自己的管理->设置->页首HTML中,刷新首页看结果就ok

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Live2D</title> 
        <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/themysteryofhackers/waifu.css"/> 
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    </head> 
    <body> 
        <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/themysteryofhackers/waifu.css"> 
        <div class="waifu" id="waifu"> 
            <div class="waifu-tips" style="opacity: 1;"></div>
             <canvas id="live2d" width="280" height="250" class="live2d"></canvas> 
             <div class="waifu-tool"> 
                 <span class="fui-home"></span> 
                 <span class="fui-chat"></span> 
                 <span class="fui-eye"></span> 
                 <span class="fui-user"></span> 
                 <span class="fui-photo"></span> 
                 <span class="fui-info-circle"></span> 
                 <span class="fui-cross"></span> 
             </div> 
        </div> 
        <script src="https://blog-static.cnblogs.com/files/themysteryofhackers/live2d.js"></script> 
        <script src="https://blog-static.cnblogs.com/files/themysteryofhackers/waifu-tips.js"></script> 
        <script type="text/javascript">initModel()</script> 
    </body> 
</html>

最后,申请了js权限的可以在管理->首页->侧边栏公共中添加如下代码,刷新首页看效果:

<div id="avatar_area" class="panel-avatar-dec"><div class="avatar-area-wrap">
<img class="" src="https://images.cnblogs.com/cnblogs_com/blogs/629715/galleries/2083471/t_211223021244_small073040LDd3H1637537440.jpg" onerror="this.src='https://pic.cnblogs.com/face/1176586/20211201154553.png';this.onerror=null;"> 
<div class="panel-avatar-sign"><div class="name-wrap panel-aside-color"><span>foxrabbit9@uotlook.com</span> <span class="icon iconfont angeldown1"></span></div> 
<div class="sign-wrap panel-aside-color"></div>
</div>
</div>
</div>

我自己的界面效果如下图:
想现在就体验一下效果的童鞋请看这里-> 优先体验

posted @ 2021-12-23 13:47 六爻呈乾阅读(431) 评论(0) 收藏举报

刷新页面返回顶部

只要做了，那就最少有一半的胜算嘛

越学习越能明白自己的无知

快速定制自己的个性化博客（附源码）

引言: 注册博客园的同学都希望自己的博客也能像别人的一样,拥有自己个性化的元素在里面,但是初学者又不知道该如何更改自己的博客css,今天呢就由我带大家一起做一次博客园的个性化设计!!!

公告