美化博客園界面（讓您的博客更加賞心悅目）但願對您有用

寫在前面

上次無心間寫了一篇博文，誰知仍是有挺多人關注的。評論當中都是問我界面看起來挺別緻的，是怎樣設計的？

 

我很差一個一個的告知，特此，寫了這篇博文，但願你們的博客界面都看起來更加悅目。

博客界面設計原理

其實要讓本身的博客更加好看（好看與否每一個人的眼光不同），無非就是覆蓋原先的css，而後本身寫一些css讓界面符合本身的審美觀。

我當前的博客園首頁是怎樣設計的

每一個人的博客都有本身的管理後臺,你們能夠跟我一步一步設置下去

一、進入管理後臺

二、進入管理後臺的「設置」界面

三、選擇博客皮膚

四、連接相關的css樣式：在頁首html文本框中輸入<link href="http://files.cnblogs.com/files/liyunhua/cnblogs.css" rel="stylesheet" />

五、點擊保存按鈕便可。（你們不信能夠本身試試，而後看下本身博客園界面是否...）

分享是怎樣實現的

有園友問我，右側分享是怎樣實現的

百度輸入「百度分享代碼」，就知道怎麼作了，

註冊以後把那段代碼輸入到「博客側邊欄公告」，

具體代碼以下所示：

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"6","bdPos":"right","bdTop":"100"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"}};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>

 

個人側邊欄時間控件是怎樣實現

也有園友問我，個人側邊欄時間框看起來挺雅緻，在此我也順便分享一下吧，要實現以下圖所示效果，其實也很是簡單

也如上同樣，進入設置界面，

在「博客側邊欄公告（支持HTML代碼）」文本框中輸入：

    <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="middle">
            <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="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
        </object>
    </div>

 

博客園界面目錄設置

目錄設置我也是看了園友的一篇文章《讓博客園博客自動生成章節目錄索引》，作了一個很簡單的功能。之因此要弄一個目錄，就在於你可能寫的博文特別長，那麼，在文章最開始就把相關目錄顯示起來，讓園友能方便查看你的文章，當瀏覽到文章的某一章節末尾，也能夠方便回頂部。

實現的原理很簡單，也就是用js得到你界面上全部的標題（h1到h6,這個在於你本身選用，我就是選擇的h4）,也是在設置界面，

在「頁腳HTML代碼」文本框中輸入：

<script language="javascript" type="text/javascript">
//生成目錄索引列表
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h4');//若是你的章節標題不是h4,只須要將這裏的h4換掉便可
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>閱讀目錄</b></p>';
        content    += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li><a href="#_label' + i + '">' + $(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);
        }
    }    
}
GenerateContentList();
</script>

有了上面這段js代碼，你的界面效果圖就會以下所示：

 

回頂部、收藏、添加評論、首頁側邊欄是如何實現？

其實實現也特別簡單，你們能夠一試。（因此有些事情真的在於細節，一丁點兒改變就能讓本身的博客頓生雅緻）

一樣是在設置界面，

在「頁腳Html代碼」文本框輸入：

<div class="scrollBtn" id="scrollBtn">
    <ul class="clearfix">
        <li class="sB-home">
            <a href="http://www.cnblogs.com/liyunhua" class="ff-t" title="首頁"></a>
        </li>
        <li class="sB-comment">
            <a href="#blog-comments-placeholder" onclick="$('#tbCommentBody').focus();" class="ff-t" title="添加評論"></a>
        </li>
        <li class="sB-share"><a onclick="if(cb_entryId !=undefined){AddToWz(cb_entryId)}" href="javascript:void(0);" title="收藏"></a></li>
        <li class="sB-goTop" id="goTop" style="display: list-item;">
            <a href="#top" title="回頂部"></a>
        </li>
    </ul>
</div>

 界面效果圖以下所示：

另外分享一個適合男孩的博客園界面

我想個人博客園界面可能並不是你們都喜歡，因此在此特地分享另一個博客園界面版本，但願對你們有用。

我相信以下的這個版本還算端莊（博客園友地址爲http://www.cnblogs.com/wangqiguo/），

其實實現起來也很簡單，只須要在設置界面裏面選擇「博客園皮膚」爲「ThinkInside」

而後在「頁首Html代碼」輸入

<link href="http://files.cnblogs.com/files/liyunhua/cnblogBlack.css" rel="stylesheet" />

點擊「保存」就能夠了。

還有一個更加雅緻的版本分享

其實我原本還有一個更加好看的皮膚要分享，但由於其兼容性很差而且太耗性能，因此就不分享了

在此說一句費話，其實我以前是作.net開發的，後來發現前端愈來愈好玩了，就只要改變一下css樣式就能夠。。。

但願有前端高手能指點我一二，每一個人都會有瓶頸的時候，強中自有強中手，但願我這個小菜可以獲得高手指點