關於博客園樣式

寫在前面

最近有部分園友問我博客樣式及模版的, 我這里樣式也是通過F12扒各家之所長, 然后改了改, 現在想想沒有特別要說的, 下面把我的貼上來, 各位簡單看下就能明白, 本身也沒什么難度, 同時也希望大家能做出更酷炫的專屬博客~互勉~

正文

具體代碼都在這里設置了, 如果沒有開通權限, 可以申請一下, 若干小時就通過了~

 

 

博客皮膚

SimpleMemory

頁面定制CSS代碼

audio {
    z-index: 5;
    position: fixed;
    bottom: 50px;
    opacity: 0.5;
    transition: all 2s;
    background-color: red;
}

audio:hover {
    opacity: 1;
}

#mywebsite {
    font-size: 13px;
    font-family: '微軟雅黑', '宋體', Arial;
    color: #55895B !important;
    border: solid 1px #55895B;
    padding: 8px;
    line-height: 22px;
    height: 180px !important;
}

#CatList_LinkList_1_Link_0 {
    font-size: 13px;
    font-family: '微軟雅黑', '宋體', Arial;
    color: #55895B !important;
    padding: 8px;
}

/*滾動條整體樣式*/
body::-webkit-scrollbar {
    width: 10px;
    height: 1px;
}

/*滾動條滑塊*/
body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #E5848B;
}

/*滾動條軌道*/
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
    border-radius: 10px;
    background: #FDFAF1;
}

/*文章末尾a去掉下划線*/
#MySignature a:link, #MySignature a:visited, #MySignature a:active {
    color: #f60;
    text-decoration: none;
}

#cnblogs_post_body a:link, #cnblogs_post_body a:visited, #cnblogs_post_body a:active {
    text-decoration: none;
}

/*背景圖https://download-cdn.oss-cn-hangzhou.aliyuncs.com/img/2.jpg*/
body {
    background-image: url(https://files.cnblogs.com/files/yadongliang/buerguo.bmp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-family: '微軟雅黑', '宋體', Arial;
}

/*主題透明度*/
#home {
    margin: 0 auto;
    width: 85%;
    min-width: 950px;
    background-color: rgba(255, 255, 255, .95);
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, .95);
    border-radius: 10px;
}

/*標題習慣沉淀hover效果*/
.headermaintitle:hover {
    color: #00A1D6 !important;
}

.entrylistPosttitle a:hover, .postTitle a:hover {
    margin-left: 0px;
    color: #00A1D6 !important;
    text-decoration: none;
}

/*字體大小*/
.day .postTitle a {
    padding-left: 10px;
    font-size: 1.1em;
}

.c_b_p_desc {
    font-size: 1.2em;
    padding: 20px;
}

.c_b_p_desc a {
    color: #888;
}

/*菜單*/
.headermaintitle {
    font-size: 25px;
}

.menu {
    font-size: 16px;
}

.blogStats {
    font-size: 16px;
    font-weight: bold;
    color: #0C0B33;
    margin-right: 15px;
}

#navList a:link, #navList a:visited, #navList a:active {
    color: #0C0B33;
    font-weight: bold;
}

#navigator {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 0;
    border: none;
    box-shadow: 0 -1px 12px -4px #000;
    padding-top: 0;
    padding-left: 0;
    text-align: center;
    font-family: '微軟雅黑', '宋體', Arial;
}

#navigator ul {
    display: inline-block;
}

#navigator ul li {
    display: inline;
    margin: 0 0 0 0;
    width: 120px;
    height: 50px;
}

#navigator ul li a {
    display: inline-block;
    float: none;
}

#navList li:hover {
    background-color: #00a1d6;
    background-position: -714px -72px;
    border-color: #00a1d6
    opacity: .55 !important;
    transition-duration: .2s;
}

#blogTitle h2 {
    color: #C9A094;
    font-style: italic;
    font-family: '微軟雅黑', '宋體', Arial;
}

/*業精於勤荒於嬉，行成於思毀於隨。*/
#MySignature {
    border: dotted 2px #E5E5E5;
    padding: 10px;
    background: #fff0 url(//files-cdn.cnblogs.com/files/yadongliang/add_my_qq415459282.ico) no-repeat scroll 1% 50%;
    padding-left: 180px;
    height: 160px;
}

/*分享*/
#green_channel {
    font-size: 15px;
    width: 100%;
    background: #55895ba8;
}

a#green_channel_digg {
    background-color: #2daebf;
    box-shadow: 0 15px 18px -6px rgba(95, 193, 206, .65);
}

a#green_channel_follow {
    background-color: #e33100 !important;
    box-shadow: 0 15px 18px -6px rgba(227, 49, 0, .65);
    margin-left: 10px;
}

a#green_channel_favorite {
    background-color: #ffb515;
    box-shadow: 0 15px 18px -6px rgba(255, 198, 75, .65);
    margin-left: 10px;
}

/*評論*/
#commentform_title, .feedback_area_title {
    font-size: 24px;
    padding: 10px;
    color: #55895b;
}

#commentform_title, .feedback_area_title {
    font-weight: 700;
    border-bottom: solid 6px #55895b;
}

.feedbackItem {
    font-size: 14px;
    line-height: 24px;
    margin: 10px 0;
    padding: 20px;
    background: #f2f2f2;
    box-shadow: 0 0 5px #aaa;
}

.feedbackItem {
    padding: 8px;
    border-bottom: 1px dotted #ccc;
}

/*習慣沉淀*/
.portrait {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    overflow: hidden;
    background: #fff url(//pic.cnblogs.com/avatar/459873/20150917085709.png) no-repeat left center;
    background-size: contain;
}

#Header1_HeaderTitle {
    font-size: 46px;
    font-family: '微軟雅黑', '宋體', Arial;
    color: #0C0B33;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease;
    font-weight: bold !important;
}

#Header1_HeaderTitle:hover {
    color: #fff;
    -webkit-animation: Glow 1.5s ease infinite alternate;
    animation: Glow 1.5s ease infinite alternate;

}

@-webkit-keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #fff,
        0 0 40px #00A1D6,
        0 0 70px #00A1D6,
        0 0 80px #00A1D6,
        0 0 100px #00A1D6,
        0 0 150px #00A1D6;
    }
    to {
        text-shadow: 0 0 5px #fff,
        0 0 10px #fff,
        0 0 15px #fff,
        0 0 20px #00A1D6,
        0 0 35px #00A1D6,
        0 0 40px #00A1D6,
        0 0 50px #00A1D6,
        0 0 75px #00A1D6;
    }
}

@keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #fff,
        0 0 40px #00A1D6,
        0 0 70px #00A1D6,
        0 0 80px #00A1D6,
        0 0 100px #00A1D6,
        0 0 150px #00A1D6;
    }
    to {
        text-shadow: 0 0 5px #fff,
        0 0 10px #fff,
        0 0 15px #fff,
        0 0 20px #00A1D6,
        0 0 35px #00A1D6,
        0 0 40px #00A1D6,
        0 0 50px #00A1D6,
        0 0 75px #00A1D6;
    }
}

/*特效字體結束*/

#blogTitle h1 a {
    color: #0C0B33;
}

/*文章title字體*/
.postTitle {
    border-left: 3px solid #888;
}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #464646;
    transition: all 0.4s linear 0s;
    font-weight: bold;
}

/*post div虛線*/
.postDesc, .entrylistItemPostDesc {
    border-bottom: 1px dotted #999;
    color: #999;
    text-align: right;
    padding-bottom: 10px;
    padding-left: 0px;
    background: no-repeat 0 1px;
}

.postDesc, .postDesc a {
    color: #aaa !important;
}

/*超鏈接去掉下划線*/
#navList li a, .postBody a:hover, a {
    text-decoration: none;
}

a {
    text-decoration: none !important;
}

.newsItem {
    padding: 5px 10px;
    border: 1px solid #55895B !important;
    border-top-width: 5px !important;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    box-shadow: 0 1px 3px #ccc;
}

#blog-calendar {
    margin-top: 0;
    text-align: center;
    width: initial !important;
    border: 1px solid #55895B !important;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    border-bottom-width: 5px !important;
    margin-bottom: 15px;
}

.CalTodayDay {
    background: #4949 !important;
    color: #FFF;
}

#sideBar {
    font: normal 10px "Verdana";
    color: #464646;
    font-size: 14px;
}

#MyIng .ing_title, #sideBar h3 {
    margin: 10px 0;
    border: 1px solid #55895B;
    border-left-width: 5px;
    border-right-width: 5px;
    border-radius: 10px;
    text-align: center;
    padding: 8px !important;
}

#catListTitle {
    font: normal bold 30px "Verdana";
    color: #55895B !important;
}

/*側邊欄透明度*/
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory, .input_my_zzk, .Cal, .CalDayHeader, .CalTitle {
    background: rgba(255, 255, 255, 0);
    margin-bottom: -1px;
    word-wrap: break-word;
    border: 1px;
    border-color: red;
}

/*日期控件頭部透明度*/
.CalTitle td {
    background: rgba(255, 255, 255, 0) !important;
}

.CalNextPrev {
    text-align: center;
}

/*文章內代碼塊透明度*/
.cnblogs_code {
    background: rgba(255, 255, 255, 0) !important;
}

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

.cnblogs_code_copy {
    background: rgba(255, 255, 255, 0) !important;
}

.cnblogs_code_toolbar {
    display: none;
}

.cnblogs_code_hide {
    background: rgba(255, 255, 255, 0) !important;
}

/*昵稱 評論區透明度*/
.author, .comment_textarea {
    background: rgba(255, 255, 255, 0);
    margin-bottom: 50px;
    word-wrap: break-word;
}

/*博文div,hover效果*/
.entrylistPostSummary:hover, .postCon:hover {
    transform: translateY(-3px);
    z-index: 1;
    -webkit-box-shadow: 0 15px 32px rgb(175, 135, 255) !important;
    border-radius: 10px;
}

.entrylistPostSummary, .postCon {
    transition: all 0.3s ease 0s;
    border-radius: 10px;
    color: #888;
    background: #f0f0f0;
}

.entrylistPosttitle a:link, .entrylistPosttitle a:visited, .entrylistPosttitle a:active {
    color: #464646;
    transition: all 0.4s linear 0s;
}

.entrylistPostSummary, .postCon {
    transition: all 0.3s ease 0s;
    border-radius: 10px;
}

.postCon {
    color: #888;
    background: #f0f0f0;
}

.entrylistItem {
    padding-bottom: 0px;
}

/*評論區背景圖*/
#tbCommentBody {
    background-image: url(https://files-cdn.cnblogs.com/files/yadongliang/comment.gif);
    background-repeat: no-repeat;
    background-position: center;
}

/*隱藏文章底部刷新,返回頂部按鈕*/
#comment_nav {
    display: none;
}

/*文章底部昵稱一欄的高度*/
#comment_form_container p {
    height: 30px;
}

/*文章評論區寬度*/
#comment_form_container .comment_textarea {
    width: 98%;
    height: 100px;
}

/*隱藏廣告區*/
.c_ad_block, .ad_text_commentbox {
    display: none;
}

#ad_t2 {
    display: none;
}

/*隱藏谷歌搜索框*/
#widget_my_google {
    display: none;
}

/*隱藏評論區的修改和刪除按鈕*/

/*下一頁字體加粗*/
#nav_next_page, .pager {
    font-size: 14px;
    font-weight: bold;
}

/*標簽列表字體*/
.postTitl2 {
    font-size: 16px;
}

#myposts .postDesc2 {
    font-size: 14px;
}

#myposts .myposts_title {
    font-size: 18px;
}

.postTitl2 a:link, .postTitl2 a:visited, .postTitl2 a:active {
    color: #d80000;
}

/*本站搜索框高度*/
.div_my_zzk {
    height: 30px;
    width: initial !important;
}

/*搜索欄*/
.input_my_zzk {
    border: 1px solid #494949 !important;
    width: initial !important;
    padding-right: 40px;
    border-radius: 5px;
    margin-left: 6px;
    padding-left: 0px;
}

/* 推薦及反對 */
#div_digg, #footer {
    text-align: center
}

#div_digg {
    position: fixed;
    right: 180px;
    bottom: 20px;
    z-index: 9999;
    background-color: #fff;
    font-size: 12px;
    width: 120px;
    margin: 10px 0 0;
    padding: 5px;
    border: 1px solid #00a1d6;
    border-radius: 5px
}

#div_digg {
    width: 46px !important;
    bottom: 105px
}

#div_digg .diggit {
    height: 46px;
}

#div_digg .buryit {
    height: 46px;
}

#div_digg {
    right: 6px
}

#div_digg {
    opacity: .55
}

/*回到頂部*/
.scrollBtn {
    background: url(https://files.cnblogs.com/files/yadongliang/icons.ico);
    position: fixed;
    display: none;
    cursor: pointer;
    height: 48px;
    width: 48px;
    right: 10px;
    bottom: 50px;
    z-index: 9999;
    background-position: -648px -72px;
    background-color: #f6f9fa;
    border: 1px solid #e5e9ef;
    overflow: hidden;
    border-radius: 4px;
}

.scrollBtn:hover {
    background-color: #00a1d6;
    background-position: -714px -72px;
    border-color: #00a1d6
}

/*溢出隱藏設置*/
#topics, #mainContent {
    overflow: visible;
}

#postDesc {
    float: none;
}

/*側邊欄字體設置*/
#sideBar #sideBarMain {
    font-family: '微軟雅黑', '宋體', Arial;
    font-size: 1.0em;
}

#sideBar h3 {
    font-size: 1.0em;
}

#cnblogs_post_body h2 {
    border-top: 5px solid #55895B;
    /* background: #312F31; */
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    /* font-family: "微軟雅黑", "宋體", "黑體",Arial; */
    font-size: 18px;
    height: 25px;
    line-height: 25px;
    padding: 8px 0 5px 5px;
    /* text-shadow: 2px 2px 3px #222222; */
    /* display: block; */
    /* -webkit-margin-before: 0.67em; */
    /* -webkit-margin-after: 0.67em; */
    /* -webkit-margin-start: 0px; */
    /* -webkit-margin-end: 0px; */
}

/* 手機端樣式 */
@media only screen and (max-width: 767px) {
    #home,#mainContent {
        width: auto;
    }
}

.catListEssay ul li, .catListLink ul li, .catListNoteBook ul li, .catListTag ul li, .catListPostCategory ul li, .catListPostArchive ul li, .catListImageCategory ul li, .catListArticleArchive ul li, .catListView ul li, .catListFeedback ul li, .catListComment ul li, .catListBlogRank ul li, .catList ul li, .catListArticleCategory ul li {
    text-indent: 1em;
    padding: 5px 5px;
    border-bottom: 1px solid #DADFE1;
    border-top: 1px solid #FFFFFF;
    overflow: hidden;
}

.recomm-block {
    font-size: 16px;
    font-family: Arial;
}

博客側邊欄公告（支持HTML代碼）（支持JS代碼）

<div id="mywebsite" style="height:150px;color: #888;font-family: '微軟雅黑';font-size: 24">
個人網站:<a href="https://liangyadong.com/"> 習慣沉淀</a> 
<br>
<br>
寫博客是為了總結記錄，而不應為了花里胡哨的標榜什么。比如寫了一個算法，盡量聯系下應用場景；看了一段源碼，想一下對應用層調用有什么影響，做到學以致用，避免眼高手低。
<br>
</div>

頁腳Html代碼

<!-- 回到頂部功能 -->
<a href="javascript:;" id="scrollBtn" class="scrollBtn" title=""></a>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/yadongliang/backTop.js"></script>
<script>new BackTop(document.getElementById('scrollBtn'));</script>

<!-- 鼠標點擊特效 -->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/yadongliang/mouse.js"></script>

<!-- jQuery 的 cdn -->
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap 的 transition.js cdn（過渡動畫插件）-->
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>

<!-- lightbox的樣式 -->
<link href="https://blog-static.cnblogs.com/files/yadongliang/lightbox.css" rel="stylesheet">

<!-- lightbox.js核心代碼 -->
<script src="https://blog-static.cnblogs.com/files/yadongliang/lightbox-plus-jquery.js"></script>
<script type='text/javascript'>$('#cnblogs_post_body img').wrap(function(){return "<a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"});</script>
<script type='text/javascript'>$(".code_img_closed").unwrap();</script>
<script type='text/javascript'>$(".code_img_opened").unwrap();</script>

<!-- 網站標簽頁icon -->
<script type="text/javascript" language="javascript">
　　//Setting ico for cnblogs
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = "https://files.cnblogs.com/files/yadongliang/b.ico";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
<script language="javascript" type="text/javascript">
    window.onload = function () {
        //推薦
        var digg = document.getElementById("digg_count");
        if(digg){
            digg.onclick = function(){ 
                document.getElementById("tbCommentBody").innerHTML="千載英雄事已休，獨余明月照江流。畫圖不盡當年恨，卻寫蘇家赤壁游。—— 戴表元 " + getNowFormatDate();
                document.getElementById("btn_comment_submit").click();
            }
            $(".diggit").click(function(){
                document.getElementById("tbCommentBody").innerHTML="故人西辭黃鶴樓，煙花三月下揚州。孤帆遠影碧空盡，唯見長江天際流。—— 李白 " + getNowFormatDate();
                document.getElementById("btn_comment_submit").click();
            });
        }
        
        //反對
        var bury = document.getElementById("bury_count");
        if(bury){
            bury.onclick = function(){ 
                document.getElementById("tbCommentBody").innerHTML="雞叫一聲撅一撅，雞叫兩聲撅兩撅。三聲喚出扶桑日，掃退殘星與曉月。—— 朱重八 " + getNowFormatDate();
                document.getElementById("btn_comment_submit").click();
            }
            $(".buryit").click(function(){
                document.getElementById("tbCommentBody").innerHTML="天地一籠統，井上黑窟窿。黃狗身上白，白狗身上腫。—— 張打油 " + getNowFormatDate();
                document.getElementById("btn_comment_submit").click();
            });
        }
    }
    
    //yyyy-MM-dd HH:mm:ss 2018-07-23 9:11:56
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + date.getHours() + seperator2 + date.getMinutes()
                + seperator2 + date.getSeconds();
        return currentdate;
    }
</script>

<script language="javascript" type="text/javascript">
    // 生成目錄索引列表
    function GenerateContentList()
    {
        var mainContent = $('#cnblogs_post_body');
        var h2_list = $('#cnblogs_post_body h2');// 如果你的章節標題不是h2,只需要將這里的h2換掉即可
    
        if(mainContent.length < 1)
            return;
     
        if(h2_list.length>0)
        {
            var content = '<a name="_labelTop"></a>';
            content += '<div id="navCategory" style="color:#55895B;">';
            content += '<p style="font-size:18px;"><b>目錄導航</b></p>';
            content += '<ul>';
            for(var i=0; i<h2_list.length; i++)
            {
                var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#55895B">目錄導航</a><a name="_label' + i + '"></a></div>';
                $(h2_list[i]).before(go_to_top);
                
                var h3_list = $(h2_list[i]).nextAll("h3");
                var li3_content = '';
                for(var j=0; j<h3_list.length; j++)
                {
                    var tmp = $(h3_list[j]).prevAll('h2').first();
                    if(!tmp.is(h2_list[i]))
                        break;
                    var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                    $(h3_list[j]).before(li3_anchor);
                    li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
                }
                
                var li2_content = '';
                if(li3_content.length > 0)
                    li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
                else
                    li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
                content += li2_content;
            }
            content += '</ul>';
            content += '</div><p>&nbsp;</p>';
            content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
            if($('#cnblogs_post_body').length != 0 )
            {
                $($('#cnblogs_post_body')[0]).prepend(content);
            }
        }   
    }
    
    GenerateContentList();
</script>

最后

以上有一部分是冗余代碼, 手機端訪問會出現部分模塊錯位, 也沒興趣整了~

以下是整理博客的過程中寫的博文, 沒什么含量, 想打發時間的的可以看看~

當然也可以訪問17素材網, 絢麗彩虹播放器什么的, 素材挺多, 這里就不展開說了~

如果有問題也歡迎留言共同進步~時間關系不一定及時回復望見諒~

• 博客園文章圖片點擊放大功能升級

• cnblogs反對按鈕點擊測試

• 設置cnblogs默認滾動條樣式

• 自定義cnblogs樣式小結

• cnblogs修改網站圖標icon

• 修改cnblogs日歷控件CSS

• cnblogs鼠標點擊特效

• cnblogs