来一些方便的小操作：博客园（cnblog）自定义界面

可以做点什么呢？

例如：

或者：

 目录：

1. 　　侧边栏分享功能
2. 　　侧边工具栏
3.        访问统计
4. 　　RevolverMaps
5.  　   背景更换
6.         网页天气插件

　　

　在实现这些功能之前，需要具备一些的css和js的知识。推荐一篇大佬写的很清晰的手把手教学：【详细图解】一步一步教你自定义博客园（cnblog）界面

1.侧边栏分享功能

将下面的代码复制到侧边栏公告中

代码：

<script>
//侧边分享栏
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"3","bdPos":"right","bdTop":"100"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>

对这个风格不满意可以自行搜索：百度分享按钮

定制自己满意的样式。

2.侧边工具栏

博主与访客可以看到不同的工具栏

 

在侧边公告栏中加入以下代码：

< script >
//侧边分享栏
window._bd_share_config = {
    "common": {
        "bdSnsKey": {},
        "bdText": "",
        "bdMini": "2",
        "bdMiniList": false,
        "bdPic": "",
        "bdStyle": "0",
        "bdSize": "16"
    },
    "slide": {
        "type": "slide",
        "bdImg": "3",
        "bdPos": "right",
        "bdTop": "100"
    }
};
with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~ ( - new Date() / 36e5)]; 
</script>

<div id="vd-right-menu">
    <a href="http:/ / www.cnblogs.com / evidd / ">
        <div class="vd - menu - item " id="main_page ">首页</div>
    </a>
    <a href="#comment_form_container ">
        <div class="vd - menu - item " id="remark ">评论</div>
    </a>
    <a href="#top ">
        <div class="vd - menu - item ">TOP</div>
    </a>

</div>

<script>
//判断首页，将url改为自己首页的url
var isHomePage = location == "http: //www.cnblogs.com/evidd/" || location == "http://www.cnblogs.com/evidd";
var vdModeCookieKey = "vd-bg-mode";
var vdModeCSS = ["NONE", "rainbow", "snowberg"];
var bgDefaultMode = 2;
var isIE = navigator.appName == "Microsoft Internet Explorer";
var editUrl, checked = false,
editBtnDoEnd = false;
function doWidthEditBtn() {
    var profile = $("#profile_block");
    var cmtFrmContainer = $("#comment_form_container");
    if (!checked && (!profile.length || !profile.children("a").length || !cmtFrmContainer.length || !cmtFrmContainer.children().length)) {
        setTimeout(doWidthEditBtn, 100);
        return;
    }
    checked = true;

    // 评论者名
    var cmtAuthorIpt = $("#tbCommentAuthor");
    if (!cmtAuthorIpt.length) {
        // 登录按钮
        if (!cmtFrmContainer.children(".login_tips").length) {
            setTimeout(doWidthEditBtn, 100);
            return;
        }
    } else {
        // 作者名
        var author = profile.children("a")[0].innerHTML;
        var commentAuthor = cmtAuthorIpt.val();
        if (author == commentAuthor) {
            var editBtn = $("<a href='" + editUrl + "'>");
            editBtn.append("<div class='vd-menu-item'>编辑</div>");
            $("#vd-right-menu").append(editBtn);
        }
    }
    editBtnDoEnd = true;
}
// 收藏 关注
var tryCount = 0;
function doWithFollowBtn() {
    if (!editBtnDoEnd) {
        setTimeout(doWithFollowBtn, 100);
        return;
    }
    if (! ($("#p_b_follow").length && $("#p_b_follow").children().length)) {
        if (tryCount++==50) return;

        setTimeout(doWithFollowBtn, 100);
        return;
    }

    var label;
    // 未关注
    if ($("#p_b_follow").html().charAt(0) == "<") {
        label = "+关注";
    } else {
        label = "已关注"
    }
    if (!document.getElementsByClassName("diggit").length) {
        setTimeout(doWithFollowBtn, 100);
        return;
    }

    var hold_same_view = document.getElementsByClassName("diggit")[0];
    hold_same_view.className = "vd-menu-item like_view";
    $("#vd-right-menu").append(hold_same_view);

    var followBtn = $("<a href='javascript:void(0);'>");
    followBtn.append("<div class='vd-menu-item'>" + label + "</div>");
    followBtn.click(function() {
        if (label == "+关注") {
            $("#p_b_follow").children("a")[0].click();
            label = "已关注"followBtn.children().html(label);
        }
    });
    $("#vd-right-menu").append(followBtn);
    var collection = '<a onclick="if(cb_entryId !=undefined){AddToWz(cb_entryId)}"  href="javascript:void(0);"><div class="vd-menu-item">收藏该文</div></a>'$("#vd-right-menu").append(collection);

    document.getElementById("digg_count").innerHTML = document.getElementById("digg_count").innerHTML + '<p style="color: #757575;">点个赞</p>';
    console.log($("#digg_count").innerHtml);
}

$("body").ready(function() {
    // 非首页
    if (!isHomePage) {
        var editLink = $("a[href^='https://i.cnblogs.com/EditPosts.aspx?postid=']");
        editUrl = editLink.attr("href");
        doWidthEditBtn();
        doWithFollowBtn();
    } else {
        editBtnDoEnd = true;
        vDiv = document.getElementById('remark');
        vDiv.style.display = 'none';
        vDiv = document.getElementById('main_page');
        vDiv.style.display = 'none';
    }
}); 
< /script>/

3.访问统计

flg counter，在这个网站可以自定义一个类似我的blog上的访问统计

定制之后点击GET YOUR FLAG COUNTER，可以选择SKIP跳过

复制Code for website下面的代码到侧边栏公告中，保存

4.RevolverMaps

刚遇到觉得还挺好玩的，一起来试试

在侧边公告栏中加入：

<div style="text-align:center; margin:0; padding:0; 202px;"> 
   <embed src="//rf.revolvermaps.com/f/g.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" wmode="window" allowscriptaccess="always" allownetworking="all" width="202" height="202" flashvars="m=0&amp;i=5yljlh8s44a&amp;r=false&amp;v=true&amp;b=000000&amp;n=false&amp;s=202&amp;c=ff0000" /> 
   <br /> 
   <img src="//rf.revolvermaps.com/js/c/5yljlh8s44a.gif" width="1" height="1" alt="" /> 
  </div>

 5.背景更换

首先得有图片，在页首html中加入以下代码（JS代码，加在任意位置都可以）：

<!--背景切换-->
<script>
function GetRandomNum(Min,Max){
    var Range=Max-Min;
    var Rand=Math.random();
    return(Min+Math.round(Rand * Range));
}
function ChangePicture(){
        dx=document.body;
        dy=GetRandomNum(0,23);
        if (dy==0){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174010688-1830584338.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==1){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174017360-1796590868.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==2){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174022047-853249916.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==3){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174029141-1608852048.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==4){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174035141-1267899028.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==5){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174040782-379920149.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==6){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174047860-2089092748.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==7){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174055110-760691979.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==8){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174104078-1668647264.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==9){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174123610-1330753439.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==10){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174128907-905693440.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==11){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174204485-2036992334.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==12){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174211563-1891350663.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==13){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174217813-1439526251.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==14){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174223313-1473348115.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==15){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174229063-639587638.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==16){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174235313-1682256911.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==17){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174243094-1382641129.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==18){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174249782-1878167894.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==19){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174256703-514964046.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==20){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174302813-2113078791.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==21){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174309203-1666245225.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==22){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174314782-1332659971.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==23){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174320828-1435950696.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }
    }
    ChangePicture();
</script>

加入页面后，访问页面的时候能够随机显示其中的图片，如果要更换怎么办，来个button吧！

<!--更换背景 -->
<input type="image" id="Uright" src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132057500-1294518696.png" onmouseover="this.style.top='10px'; this.src='http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132044282-1070510381.png' " onmouseout="this.style.top='-55px'; this.src='http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132057500-1294518696.png' " onclick="ChangePicture()" style="top: -55px;">

6.网页天气插件

在心知天气自定义一个喜欢的风格：

将生成的JS代码放入页脚

 OK！感觉界面好看了一点呢！

 大佬甚至禁用模板CSS，自己DIY整个博客页面，不过在熟悉CSS和JS之后，我们也能改变界面的一些布局。

 推荐几个dalao的文章：

博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)

详谈如何定制自己的博客园皮肤

博客园美化手记——CSS javascript html

欢迎在评论区留言提问！