美化博客園 添加網易雲音樂及生成文章目錄

一.向官方申請Js權限

批准時間很快，成功有郵件提示：

二.生成文章目錄

1.將下段代碼添加到 頁腳Html代碼

<script language="javascript" type="text/javascript">
　　 //生成目錄索引列表
    function GenerateContentList() {
        var jquery_h3_list = $('#cnblogs_post_body h3'); //博客園的正文的div的id為cnblogs_post_body，然后查找下面所有的h3
        if (jquery_h3_list.length > 0) {
            var content = '<a name="_labelTop"></a>'; //此處開始拼閱讀目錄
            content += '<div id="navCategory">';
            content += '<p style="font-size:18px"><b onclick="DivHide();" style="cursor:pointer;" title="點擊隱藏目錄，再次點擊顯示目錄">閱讀目錄</b></p>';
            content += '<ul id="Catalog">';
            //循環所有的h3，然后在h3的前面添加回到頂部的功能。
            for (var i = 0; i < jquery_h3_list.length; i++) {
                var go_to_top = '<div style="text-align: right">';
                if (i > 0) {
                    go_to_top += '<a href="#_labelTop" style="color: Blue">回到頂部</a>';
                }
                go_to_top += '<a name="_label' + i + '"></a></div>';
                $(jquery_h3_list[i]).before(go_to_top);
                var li_content = '<li><a href="#_label' + i + '" style="color: Blue">' + $(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);
            }
        }
    }
    function DivHide() {
        if ($("#Catalog").css("display") == "none") {
            $("#Catalog").show(200);
        } else {
            $("#Catalog").hide(200);
        }
    }
    GenerateContentList();
</script>

2.在編輯文章的時候將想要生成目錄的字選成“標題三”

效果：

三.添加網易雲音樂

1.將下段代碼添加到 頁面定制css代碼

.content-wrap {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
/* Menu Button */
.menu-button {
    position: fixed;
    top: 22px;
    right: 10px;
    z-index: 1000;
    padding: 0 !important;
    margin: 0 !important;
    width: 45px;
    height: 35px;
    border: none;
    font-size: 1.5em;
    color: #373a47;
    background: transparent;
    cursor: pointer;
    border: none;
    outline: none;
}
/* 圖片旋轉*/
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
/* 圖片旋轉樣式*/
.menu-rotation{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
/* 圖片旋轉樣式*/
.menu-button img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.menu-button:hover {
    opacity: 0.8;
}

/* Menu */
.menu-wrap {
    position: fixed;
    z-index: 999;
    /* background: #ebedf4; */
    -webkit-transition: width 0.3s, height 0.3s;
    transition: width 0.3s, height 0.3s;
    width: 0;
    height: 0;
    font-size: 1.5em;
    top: 0;
    right: 0;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
/* 屏幕適應*/
@media screen and (max-width: 50em) {
    .menu-button {
        margin: 0.25em;
    }
    .menu-wrap {
        /*bottom: 0.25em;
        left: 0.25em;*/
    }
}
/* Shown menu */
.show-menu .menu-wrap {
    width: 360px;
    height: 440px;
    -webkit-animation: anim-jelly 0.8s linear forwards;
    animation: anim-jelly 0.8s linear forwards;
}

1.將下段代碼添加到 博客側邊欄公告（支持HTML代碼）（支持JS代碼）

<!--網易雲播放器樣式-->
<div class="menu-wrap"><embed src="//music.163.com/style/swf/widget.swf?sid=2232155814&type=0&auto=1&width=310&height=430" width="330" height="450"  allowNetworking="all"></embed></div>

<button class="menu-button" id="open-button" onclick="toggleMenu();"><img id="img_music" class="menu-rotation" src="http://images.cnblogs.com/cnblogs_com/cang12138/1219437/o_o_play.png"></button>
<div class="content-wrap"></div>

<script language="javascript" type="text/javascript">
    var openbtn = document.getElementById( 'open-button' ),
    isOpen = false;

    function toggleMenu() {
        if( isOpen ) {
            $("body").removeClass("show-menu");
        }
        else {
            $("body").addClass("show-menu");
        }
        isOpen = !isOpen;
    }
    $(document).click(function (e) {
        var e = e || window.event; //瀏覽器兼容性 
        var elem = e.target || e.srcElement; 
        if( isOpen && elem.id != "img_music") {
            $("body").removeClass("show-menu");
            isOpen = !isOpen;
        }
    })
</script>
<!--網易雲播放器樣式end-->

3.網易雲的播放器代碼

1) 打開網易雲 http://music.163.com/ 找到擁有 “生成外鏈播放器” 的專輯或歌曲

2) 點擊 flash插件 按鈕，並復制下面的代碼。來替換上面的  <!--網易雲播放器樣式--> 里的代碼

效果：

四.添加 單擊顯示隨機文字

1.將下段代碼添加到 頁腳Html代碼 中

<script language="javascript" type="text/javascript">
    //單擊顯示隨機文字
    var a_idx = 0; 
    jQuery(document).ready(function($) { 
        $("body").click(function(e) { 
        var a = new Array("路見不平一聲吼，吼完繼續往前走。","咸魚翻身，還是咸魚。", "水能載舟，亦能煮粥！", "明月幾時有，抬頭自己瞅。", "天哪！我的衣服又瘦了。", "聽君一席話，回家烤白薯。", "流氓不可怕，就怕流氓有文化。", "知識就像內褲，看不見但很重要。" ,"為了祖國下一代，再丑也得談戀愛。", "窮玩車，富玩表，牛B加班敲電腦。", "英雄不問出路，流氓不看歲數。", "我們的目標：向錢看，向厚賺。", "帥有個屁用！到頭來還不是被卒吃掉！");
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index":5, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#FF69B4" 
        }); 
        $("body").append($i); 
            $i.animate({ 
                "top": y - 180, 
                "opacity": 0 
            }, 
            3000, 
            function() { 
                $i.remove(); 
            });
        }); 
    });
</script>

效果：

五.推薦按鈕樣式（固定右下角）

#div_digg
{
    position: fixed;
    bottom: 5px;
    width: 120px;
    right: 0px;
    border: 2px solid #6FA833;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px 5px 5px 5px !important;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

效果：