寫在前面
上次無意間寫了一篇博文，誰知還是有挺多人關注的。評論當中都是問我界面看起來挺別致的，是怎樣設計的？
我不好一個一個的告知，特此，寫了這篇博文，希望大家的博客界面都看起來更加悅目。
博客界面設計原理
其實要讓自己的博客更加好看（好看與否每個人的眼光不一樣），無非就是覆蓋原先的css，然后自己寫一些css讓界面符合自己的審美觀。
我當前的博客園首頁是怎樣設計的
每個人的博客都有自己的管理后臺,大家可以跟我一步一步設置下去
1、進入管理后臺
2、進入管理后臺的“設置”界面
3、選擇博客皮膚
4、鏈接相關的css樣式：在頁首html文本框中輸入<link href="http://files.cnblogs.com/files/liyunhua/cnblogs.css" rel="stylesheet" />
5、點擊保存按鈕即可。（大家不信可以自己試試，然后看下自己博客園界面是否...）
分享是怎樣實現的
有園友問我，右側分享是怎樣實現的
百度輸入“百度分享代碼”，就知道怎么做了，
注冊之后把那段代碼輸入到“博客側邊欄公告”，
具體代碼如下所示：
<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樣式就可以。。。
希望有前端高手能指點我一二，每個人都會有瓶頸的時候，強中自有強中手，希望我這個小菜能夠得到高手指點
 |
不含病毒。www.avast.com |
留言列表
