自定義博客園模板

唔。。。。實在是找不到什麼別的事情好幹了，省選涼涼回去學文化課真的說實話很無聊。。。並且致使如今OI作題並無什麼目的性和系統性。。。還不如去作物理。。。

可能有對我博客樣式感興趣的朋友。。。我這裏省去大家F12的時間來介紹一下個人博客模板吧。。。

首先總的stylecss和大模板都是當初angel_Kitty學姐的，嗯，鏈接在這，能夠本身去看：博客園自定義頁面風格設計 後續篇(頁面設計模式及代碼高亮 鼠標點擊效果升級)。

這裏着重感謝學姐幫我指導和完善了博客的樣式。

看完了上面的應該就已經有了一個比較好的樣式了，而後一點是鼠標的點擊效果可能還不夠精確，以致於不能變色什麼的。。。其實我在學姐那博客底下也評論過了，不過是在不會修改的照搬個人也能夠。。。

<script type="text/javascript"> 
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("你本身想寫的話。。。); 
        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": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

而後就是一些細枝末節的東西了，好比右邊的打賞(表示高中生暫時不須要這個啦)，右上角的天氣預報，網頁的播放音樂之類的了。

先說一下那個自動播放的音樂，這個其實很好搞。。首先支持外聯播放器的音樂平臺貌似只有網易雲和蝦米。因此直接從網易雲上找到你想要的歌，而後點擊生成外鏈播放器，直接把flash的html代碼扔到頁首就能夠了。

而後是那個右下角的小火箭。這個也好辦，因爲懶，個人js文件直接套用了學姐現成的。。。基於這一點，咱們只須要在頁尾添加這樣的一串代碼：

<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png)no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
<script src="http://files.cnblogs.com/files/flipped/prettify.js"></script>
<script type="text/javascript">
(function() {
     $("pre").addClass("prettyprint");
     prettyPrint();
})();
</script>

嗯，加上以後回去看看，小火箭已經在底下顯示了。。。。

公告欄裏的時間顯示你們可能都感興趣，這個好辦，其實你把網頁放大就能夠看到那個時間顯示的右下角有一個網站，你直接搜那個網站應該就有前輩們寫的代碼直接分享了，我在這也寫上吧：

<div id="myTime"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="center">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" /><embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="center" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object></div>

應該就是這樣了。。

那個訪問人數的統計能夠直接點擊進去本身設置，這個因爲每一個人的網頁都是記錄本身我的的，並無辦法套用別人的。應該會進入這個網站：

http://www.amazingcounters.com/

而後本身設置就能夠。。

大體就是這樣了。。。

update：

至於左下角的pio醬，她如今要顯示出來還得看臉了。。。我也不知道爲啥就忽然這樣了，明明沒有代碼衝突什麼的啊。。。仔細排查以後發現是博客園禁止了某個js。。。在別的網站就跑的好好的。。。有沒有大神能解決這個問題啊。。。。。。

而後背景變換的問題，我直接打包放在一個文件裏了，F12找找應該就能找到.......吧。

旁邊的一言：首先你有一個emm，叫什麼好呢，名言庫？而後直接套上就好了，樣式什麼的，copy就行了，我以爲LOJ那個就不錯可是一直沒找到。。。

記得之前還有什麼下雪的背景特效什麼的，請謹慎添加，可能會與其餘插件互相沖突。。。