博客園美化

這個博客已經申請快四年了，卻一直沒有好好利用，悔啊。不過話又說回來，從現在開始行動起來，無悔。

此篇博文權當是正式入博的一種儀式、一道開胃菜、一次練手、一場前戲、、、、、、whatever

我應該是屬於外貌協會中偏理性的一類人，對於自己博客界面當然也不會例外，誰不喜歡嫩嘟嘟水靈靈的皮膚呢，一款好的樣式更能激起我閱讀更新博客的興趣，這種來自於外在的客觀刺激是不容小覷的。

 

博客園除了可以選擇優秀的博客模板外，還可以對選定的模板進行更進一步的自定義，詳細介紹請自行前往 數據之巔 ，本文的基礎樣式就是扒之於此博友的博客美化系列文章，我的自定義樣式是扒之於 CSS Tricks ，看着簡單大方有食欲。

 

基本設置

自行前往 數據之巔 系列博文，非常詳細的介紹。

選擇的基礎模板是“SimpleMemory”，數據之巔的樣式基於原有的樣式做了一些美化處理，本人的樣式又基於他的做了一些個性化的處理。

主要包括：

 

頭部

- #header

- #blogTitle

- #navigator

首頁列表 

- .day

- .dayTitle

- .postTitle

- .postCon

- .postDesc

博客文章

- #topics

- #postTitle

- #postBody

- #postDesc                         

若想嘗試此樣式的可以點擊下載，另存為之后上傳至你自己的博客園文件中，然后在 博客設置->設置->頁首Html代碼 中添加引用：

<link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/seanshao/bundle-SimpleMemory-A5_v29.css"/>

自定義“推薦|反對”按鈕

主要用fixed來約束此按鈕的位置，將其置於屏幕右下角

#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:30px;
  border:2px solid #085;
  padding:10px;
  background-color:#fff;
  opacity:0.3;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
  transition-duration: 0.5s;
}
#div_digg:hover{
  opacity:1;
}

自定義返回頂部小火箭

將下面的樣式和Javascript直接復制到 博客設置->設置->頁首Html代碼：

<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>

添加博文目錄

在 數據之巔 系列文章中介紹了兩種形式的目錄導航，按需索取即可。

將下面的Javascript直接復制到 博客設置->設置->頁腳Html代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript">
//生成目錄索引列表
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h1');//如果你的章節標題不是h3,只需要將這里的h3換掉即可
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';     
        content    += '<p style="font-size:16px"><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>

 

添加頭像

側邊欄公告出顯示自己的頭像，首先將想要顯示的圖片上傳至博客相冊，然后將下面的引用復制到 博客設置->設置->博客側邊欄公告：

<img src="http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_saw_billy.png" alt="嘻哈燒餅的頭像" class="img_avatar" width="250px" style="border-radius:50%">

小結

本次博客園美化之旅雖說是我正式發博的開胃菜，但對我這樣的前端小菜也是一次對CSS/Javascript的學習和溫故的過程。這種高度個性化的形式確實為我增添了幾分樂趣，只是這種嵌入式的Javascript難道就沒有安全風險么？持續學習，To Be Continued…