2. 程式人生 > 其它 >部落格園新手之美化部落格介面

部落格園新手之美化部落格介面

阿新 • • 發佈：2021-10-07

一、前言

  喜歡一句話：“任何職業都可以成為黑客。你可以是一個木匠黑客。不一定是高科技。只要與技能有關，並且傾心專注於你正在做的事情，你就可能成為黑客。”我覺得認定要做的事就要盡全力去做好，接下來就通過美化部落格來開啟自己的部落格之旅吧！

二、申請寫博功能

  1. 點選頭像進入我的園子
  2. 點選寫博開通部落格功能，理由如實填寫，一般兩三個小時通過

三、設定部落格中的版式

  1. 部落格開通後，點選頭像——賬號設定——部落格設定
  2. 選擇部落格面板darkgreentrip後，在頁面定製CSS程式碼中複製以下程式碼（程式碼可以根據自己喜好修改引數）然後儲存即可
點選檢視程式碼 
/* 設定版式 */
#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*頁面頂部的寬度*/
    background-color: rgba(245, 245, 245, 0.7);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
border-radius: 12px;  /*調節邊框圓度*/
}
/*boby調節背景圖片*/
body {
    background:url("https://images.cnblogs.com/cnblogs_com/nthforsth/1636966/o_2001210816401565149939605.png");  /*背景圖片連結*/
    background-position:center left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment:fixed;
}
#blogTitle {
    height: 100px;  /*高度/
border-radius: 12px;
    clear: both;
    background-color: #cccccc69;   /*部落格標題的背景*/

}
#blogTitle h1 {
    font-size: 36px;
color:#808080;
    font-weight: bold;

    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */

}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px; /*原始 16px ；font-size: 1.0rem;*/
    line-height: 1.8;
    color: #320f9d;
    font-weight: bold;
    text-align: right;
    float: right;
}
#navigator{
border-radius: 7px;
    background-color:rgba(135,206,205, 0.5);          /*標題欄下的顏色*/

}
#navList a:link, #navList a:visited, #navList a:active{
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(132,112,255, 0);
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    float: right;
    width: 100%;
    clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color:     #FF6A6A;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #EE6363;
    text-decoration: none;
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear: both;
    padding: 10px 0;
}
.day .postTitle a {
    padding-left: 10px;
}
.day {
    background: rgba(255, 255, 255, 0.5);
}
/*文章附加資訊*/
.postDesc {
    background: url(images/posted_time.png) no-repeat 0 1px;
    color: #757575;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 13px;
    padding-right: 20px;/*5px  padding-left: 90px;posted 發表時間左邊距離*/
    margin-top: 20px;
    line-height: 1.8;
    padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
    background: rgba(255, 255, 255, 0.5);
    margin-bottom: 35px;
    word-wrap: break-word;
}
.CalTitle{
    background: rgba(255, 255, 255, 0);
}
.catListTitle{
    background-color: rgba(255,110,180,0.6);   //欄目的條紋顏色
}
#topics{
    background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{
    display: none;
}
#tbCommentBody{
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
}
#q{background: rgba(255, 255, 255, 0);}

.CalNextPrev{background: rgba(255, 255, 255, 0);}

.cnblogs_code{
    background: rgba(255, 255, 255, 0);
}
.cnblogs_code div{
    background: rgba(255, 255, 255, 0);
}
.cnblogs_code_toolbar{
    background: rgba(255, 255, 255, 0);
}
#main{min-width: 640px;}
.entrylist{
    background: rgba(255, 255, 255, 0.5);
}
  1. 效果展示

四、新增動態特效

  1. 在"頁尾HTML程式碼"中複製以下程式碼
點選檢視程式碼 
/* 設定動態特效 */
<script type="text/javascript">
   window.onload = function () {
                var minSize = 10; //最小字型
                var maxSize = 20;//最大字型
                var newOne = 600; //生成雪花間隔
                var flakColor = "#f5f5f5fa"; //雪花顏色
                var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("✽");//定義一個雪花
                var dhight = $(window).height(); //定義檢視高度
                var dw =$(window).width()-80; //定義檢視寬度
                setInterval(function(){
                var sizeflak = minSize+Math.random()*maxSize; //產生大小不等的雪花
                var startLeft = Math.random()*dw; //雪花生成是隨機的left值
                var startOpacity = 0.7+Math.random()*0.3; //隨機透明度
                var endTop= dhight-100; //雪花停止top的位置
                var endLeft= Math.random()*dw; //雪花停止的left位置
                var durationfull = 5000+Math.random()*3000; //雪花飄落速度不同
                flak.clone().appendTo($("body")).css({
                "left":startLeft ,
                "opacity":startOpacity,
                "font-size":sizeflak,
                "color":flakColor
                }).animate({
                "top":endTop,
                "left":endLeft,
                "apacity":0.1
                },durationfull,function(){
                $(this).remove()
                });
                },newOne);
            }
 </script>
<script language="javascript" type="text/javascript">
//生成目錄索引列表
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章節標題不是h3,只需要將這裡的h3換掉即可
    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>

五、設定背景音樂

  1. 登陸網頁版的網易雲音樂，點選歌曲名或歌單名，然後點選生成外鏈播放器。

  2. 複製iframe程式碼

  3. 將上個步驟中所複製的程式碼，複製到“部落格側邊欄公告”中，然後儲存。（有的網站不支援iframe可以用embed替換）

六、設定部落格文章評論功能

  1. 在“頁首HTML程式碼”中最後新增如下程式碼
    <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">
  2. 在“頁尾Html程式碼”中最後新增如下程式碼
點選檢視程式碼 
/* 設定文章評論功能 */
<script type="text/javascript">
$(function(){
    $('#blogTitle h1').addClass('bounceInLeft animated');
    $('#blogTitle h2').addClass('bounceInRight animated');
    // 刪除反對按鈕
    $('.buryit').remove();
    initCommentData();
});
function initCommentData() {
    $('.feedbackItem').each(function() {
        var text = $(this).find('.feedbackListSubtitle .layer').text();
        // 將樓層資訊放到data裡面
        // $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));
        if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');
        var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';
        $(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')
    });
}

$(document).ajaxComplete(function(event, xhr, settings) {
  // 監聽獲取評論ajax事件
  if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {
    initCommentData();
  }
});
</script>

七、設定部落格點贊按鈕

  1. 在“頁面定製CSS程式碼”中新增如下CSS程式碼
點選檢視程式碼 
/* 設定部落格點贊按鈕 */
#div_digg{
  padding: 5px;
  border-radius: 5px;
  position: fixed;
  left: 0;
  bottom: 80px;
  width:80px;
  z-index:100;
}
.diggit{
  background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
  width: 60px;
  height: 60px;
}
#div_digg .diggnum{
  position: absolute;
  bottom: -20px;
  left: 6px;
  background: #D0D0D0;
  padding: 2px 0;
  display: block;
  color: #555;
  font-size: 12px;
  text-align: center;
  width: 60px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  font-weight: bold;
}
/* 刪除反對按鈕,有點邪惡了 */
.buryit{
  display: none;
}

八、設定部落格文章放回頂端按鈕

  1. 在"頁面定製CSS程式碼"中新增如下程式碼
點選檢視程式碼 
/* 定製返回頂部按鍵 */
#back-to-top {
    background-color: #87cefe;
    bottom: 0;
    box-shadow: 0 0 6px #bdc3c7;
    color: #444444;
    padding: 10px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
    border-radius: 30px;
}
  1. 在"頁尾Html程式碼"中新增如下程式碼（可以將文字改為圖片）
    <span id="back-to-top"><a href="#top">返回頂端</a></span>

最後很開心完成了部落格中的第一遍筆記，也裝飾好了自己的部落格介面。還有感謝別人的分享！

相關推薦

部落格園新手之美化部落格介面

一、前言   喜歡一句話：“任何職業都可以成為黑客。你可以是一個木匠黑客。不一定是高科技。只要與技能有關，並且傾心專注於你正在做的事情，你就可能成為黑客。”我覺得認定要做的事就要盡全力去做好，接下來就

部落格園新手主題美化教程

因為自己已經工作了一段時間了， 覺得自己還是應該開始學習部落格幫助自己吸收理解知識點了， 最後還是選擇了在部落格園安家， 原因很簡單部落格園廣告少相對專業。

部落格園SimpleMemory主題美化

所有內容來自marsggbo\'github 頁面定製CSS程式碼 由於js檔案太長，點選連結獲取。

部落格園看板娘美化教程

看部落格園中好多人都添加了看板娘，效果十分nice，好吧，我心動了，研究！查了一下教程，一抓一大把，非常多，也不復雜，弄完效果在左下角可以看哈。再寫一遍其實沒什麼用……就當做自己做個筆記好了，直接上乾貨。

部落格園的第一篇部落格

我會把在CSDN上的自己覺得還不錯的文章搬運過來，CSDN使用者名稱：TheCalm，以後釋出部落格的主要陣地估計就是在部落格園了，第一天對人來說果然還是特別一點，我覺得我今天就特別囉嗦。

部落格園美化介面

首先進入設定，在設定中勾選禁用模板預設css， 然後就可以把對應的程式碼複製上去了

部落格園美化日記

搞了一整天，沒做多好，以後再做吧。 首頁佈局還可以，開啟一篇文章就亂了，心累。

部落格園裝飾樣式 部落格園美化樣式

部落格園美化樣式一條龍服務 部落格園作為自己總結知識、見證自己技術成長的技術家園，就像自己的房間一樣，想收拾的乾淨，舒服，與眾不同

部落格園介面美化

1. 選擇一款部落格面板 Simplelified 2. 申請js 3. 在頁面定製 CSS 程式碼新增下面程式碼

部落格園美化

設定部落格面板為：SimpleMemory 新增美化css （css程式碼） #google_ad_c1, #google_ad_c2 {display:none;}

我的部落格園美化

部落格園後臺 - 設定 時區&語言與地區&部落格面板 頁面定製 CSS 程式碼 /*新增側邊欄目錄*/

美化部落格之實際操作

　　　　　　滑鼠點選特效 1.心形效果 <!-- 為頁面新增愛心特效 --> <script type=\"text/javascript\">

部落格園美化去除預設左側的通知欄、正文全屏、隱藏底部第三方、添加回到頂部按鈕

1.關於 新增同款Github角標需要申請開通JS許可權 貼入 頁面定製CSS程式碼 我的面板選擇： SimpleMemory

部落格美化&typora寫部落格攻略（部落格園版）

部落格美化&typora編寫部落格攻略（部落格園版） 1、登入部落格後臺設定基礎選項

部落格園美化——全面

準備工作： 在設計部落格前，需申請JS程式碼許可權，例如下圖 進入部落格編輯網頁：https://i.cnblogs.com/settings

部落格園樣式美化(相容為知筆記)

目錄部落格園樣式美化(相容為知筆記)樣式優化準備上傳檔案css樣式部落格側邊欄公告（支援HTML程式碼） （支援 JS 程式碼）頁首 HTML 程式碼頁尾 HTML 程式碼

部落格園樣式美化(相容為知筆記)2

@目錄部落格園樣式美化(相容為知筆記)2設定面板頁面css禁用模板預設CSS部落格側邊欄公告頁首 HTML 程式碼頁尾 HTML 程式碼允許 MetaWeblog 部落格客戶端訪問選項頁隨個人定義

部落格園樣式美化(相容為知筆記)3

目錄部落格園樣式美化(相容為知筆記)3面板頁面定製 CSS 程式碼禁用模板預設CSS部落格側邊欄公告（支援HTML程式碼） （支援 JS 程式碼）允許 MetaWeblog 部落格客戶端訪問

部落格園樣式美化：給部落格新增一個音樂播放器---轉載

原地址https://www.cnblogs.com/mq0036/p/13856004.html 效果展示# 程式碼# 　　部落格園管理 -> 設定 -> 頁尾HTML程式碼

部落格園美化工程

底部新增小魚 在部落格園頁尾新增程式碼 <!-- 底部加了小魚<・)))><<~ -->