美化博客园界面（让您的博客更加赏心悦目）但愿对您有用

写在前面

上次无心间写了一篇博文，谁知仍是有挺多人关注的。评论当中都是问我界面看起来挺别致的，是怎样设计的？

 

我很差一个一个的告知，特此，写了这篇博文，但愿你们的博客界面都看起来更加悦目。

博客界面设计原理

其实要让本身的博客更加好看（好看与否每一个人的眼光不同），无非就是覆盖原先的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样式就能够。。。

但愿有前端高手能指点我一二，每一个人都会有瓶颈的时候，强中自有强中手，但愿我这个小菜可以获得高手指点