【博客美化】01.推薦和反對炫酷樣式

博客園美化相關文章目錄：

【博客美化】01.推薦和反對炫酷樣式

【博客美化】02.公告欄顯示個性化時間

【博客美化】03.分享按鈕

【博客美化】04.自定義地址欄logo

【博客美化】05.添加GitHub鏈接

【博客美化】06.添加QQ交談鏈接

【博客美化】07.添加打賞按鈕

【博客美化】08.添加"擴大/縮小瀏覽區域大小" 按鈕

【博客美化】09.評論帶頭像，且支持旋轉

【博客美化】10.圖片預覽放大

1.設置“推薦與反對”，固定在窗口的底部

進入自己的博客園->設置，將以下css代碼添加到“頁面定制CSS代碼”

/*推薦和反對*/
#div_digg {
    padding: 10px;
    position: fixed;
    _position: absolute;
    z-index: 1000;
    bottom: 20px;
    right: 0;
    _right: 17px;
    border: 1px solid #D9DBE1;
    background-color: #FFFFFF;
    filter: alpha(Opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

.icon_favorite {
    background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;
    padding-left: 16px;
}

#blog_post_info_block a {
    text-decoration: none;
    color: #5B9DCA;
    padding: 3px;
}

 

 效果圖如下：

 

2.添加一個“關注一下樓主吧”

進入自己的博客園->設置，將以下css代碼添加到“頁腳Html代碼”

<script type="text/javascript" language="javascript"> 
//為右下角推薦推薦區域添加關注按鈕
window.onload = function () {
    $('#div_digg').prepend('<div style="padding-bottom: 5px"><span class="icon_favorite" style="padding-top: 2px"></span><a onclick="cnblogs.UserManager.FollowBlogger(\'9a35f2c7-18ab-e111-aa3f-842b2b196315\');" href="javascript:void(0);" style="font-weight: bold; padding-left:5px;">關注一下樓主吧</a> </div>');
}
</script>

這個地方的GUID的獲取可以通過以下方法獲取：

　　1.進入博客園http://www.cnblogs.com/，如果登陸了，請退出登錄，然后進入自己的主頁http://www.cnblogs.com/xxxx/

　　2.快捷鍵F12打開網頁調試工具

　　3.用查找按鈕選中“添加關注”這個button

　　4.復制Guid，然后替換上面的Guid

3.其他樣式

/*推薦和反對*/
#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:390px;
  border:2px solid #6FA833;
  padding:10px;
  background-color:#fff;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

 

作　　者： Jackson0714
出　　處：http://www.cnblogs.com/jackson0714/
關於作者：專注於微軟平台的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！