美化博客園首頁

来源:https://www.cnblogs.com/Tom-shushu/archive/2019/04/13/10702441.html
-Advertisement-
Play Games

一，更換背景： 1.首先需要上傳幾張圖片到自己的博客園相冊中：如圖： 2.然後點擊其中一張單擊右鍵複製圖片地址鏈接 3.切換到博客園設置頁面中(我這裡選擇的是CornflowerBlue這個皮膚)： 4.複製下麵代碼到“頁面定製CSS”中： 5.找到這一段代碼： 將url更改為剛纔複製的圖片鏈接； ...


一，更換背景：

1.首先需要上傳幾張圖片到自己的博客園相冊中：如圖：

2.然後點擊其中一張單擊右鍵複製圖片地址鏈接

3.切換到博客園設置頁面中(我這裡選擇的是CornflowerBlue這個皮膚)：

4.複製下麵代碼到“頁面定製CSS”中：

  1 /*simplememory*/
  2 #google_ad_c1, #google_ad_c2 {display:none;}
  3 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, 
  4 .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, 
  5 .syntaxhighlighter textarea {
  6 font-size: 14px!important;
  7 }
  8 #home {
  9 opacity: 0.80;
 10 margin: 0 auto;
 11 width: 85%;
 12 min-width: 950px;
 13 background-color: #fff;
 14 padding: 30px;
 15 margin-top: 30px;
 16 margin-bottom: 50px;
 17 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 18 }
 19 #blogTitle h1 {
 20 font-size: 30px;
 21 font-weight: bold;
 22 font-family: "Comic Sans MS";
 23 line-height: 1.5em;
 24 margin-top: 20px;
 25 color: #515151;
 26 }
 27 #navList a:hover {
 28 color: #4C9ED9;
 29 text-decoration: none;
 30 }
 31 #navList a {
 32 display: block;
 33 width: 5em;
 34 height: 22px;
 35 float: left;
 36 text-align: center;
 37 padding-top: 18px;
 38 }
 39 #navigator {
 40 font-size: 15px;
 41 border-bottom: 1px solid #ededed;
 42 border-top: 1px solid #ededed;
 43 height: 50px;
 44 clear: both;
 45 margin-top: 25px;
 46 }
 47 .catListTitle {
 48 margin-top: 21px;
 49 margin-bottom: 10.5px;
 50 text-align: left;
 51 border-left: 10px solid rgba(82, 168, 236, 0.8);
 52 padding: 10px 0 14px 10px;
 53 background-color: #f5f5f5;
 54 }
 55 #ad_under_post_holder #google_ad_c1,#google_ad_c2{  
 56 display: none !important;
 57 }
 58 body {
 59 color: #000;
 60 background: url(http://images.cnblogs.com/cnblogs_com/Tom-shushu/1435205/o_324125.jpg
 61 ) fixed;
 62 background-size: 100%;
 63 background-repeat: no-repeat;
 64 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
 65 font-size: 12px;
 66 min-height: 101%;
 67 }
 68 #topics .postTitle {
 69 border: 0px;
 70 font-size: 200%;
 71 font-weight: bold;
 72 float: left;
 73 line-height: 1.5;
 74 width: 100%;
 75 padding-left: 5px;
 76 }
 77 
 78 div.commentform p{
 79 margin-bottom:10px;
 80 }
 81 .comment_btn {
 82 padding: 5px 10px;
 83 height: 35px;
 84 width: 90px;
 85 border: 0 none;
 86 border-radius: 5px;
 87 background: #ddd;
 88 color: #999;
 89 cursor:pointer;
 90 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋體, Arial, sans-serif;
 91 text-shadow: 0 0 1px #fff;
 92 display: inline !important;
 93 }
 94 .comment_btn:hover{
 95 padding: 5px 10px;
 96 height: 35px;
 97 width: 90px;
 98 border: 0 none;
 99 border-radius: 5px;
100 background: #258fb8;
101 color: white;
102 cursor:pointer;
103 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋體, Arial, sans-serif;
104 text-shadow: 0 0 1px #fff;
105 display: inline !important;
106 }
107 #commentform_title {
108 background-image:none;
109 background-repeat:no-repeat;
110 margin-bottom:10px;
111 padding:0;
112 font-size:24px;
113 }
114 #commentbox_opt,#commentbox_opt + p {
115 text-align:center;
116 }
117 .commentbox_title {
118 width: 100%;
119 }
120 #tbCommentBody {
121 font-family:'Microsoft Yahei', Microsoft Yahei, 宋體, sans-serif;
122 margin-top:10px;
123 max-width:100%;
124 min-width:100%;
125 background:white;
126 color:#333;
127 border:2px solid #fff;
128 box-shadow:inset 0 0 8px #aaa;
129 // padding:10px;
130 height:250px;
131 font-size:14px;
132 min-height:120px;
133 }
134 .feedbackItem {
135 font-size:14px;
136 line-height:24px;
137 margin:10px 0;
138 padding:20px;
139 background:#F2F2F2;
140 box-shadow:0 0 5px #aaa;
141 }
142 .feedbackListSubtitle {
143 font-weight:normal;
144 }
145 
146 #blog-comments-placeholder, #comment_form {
147 padding: 20px;
148 background: #fff;
149 -webkit-box-shadow: 1px 2px 3px #ddd;
150 box-shadow: 1px 2px 3px #ddd;
151 margin-bottom: 50px;
152 }
153 .feedback_area_title {
154 margin-bottom: 15px;
155 font-size: 1.8em;
156 }
157 .feedbackItem {
158 border-bottom: 1px solid #CCC;
159 margin-bottom: 10px;
160 padding: 5px;
161 background: rgb(248, 248, 248);
162 }
163 .color_shine {background: rgb(226, 242, 255);}
164 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
165 #comment_form .title {
166 font-weight: normal;
167 margin-bottom: 15px;
168 }

5.找到這一段代碼：

1 body {
2 color: #000; 
3 background: url(http://images.cnblogs.com/cnblogs_com/Tom-shushu/1435205/o_324125.jpg) fixed;

將url更改為剛纔複製的圖片鏈接；

6.點擊保存完成背景設置！

二，News下麵的圖片設置：

註意需要開啟JS許可權

 

找到“博客側邊欄公告”的代碼框插入如下代碼：

1 <img src="http://images.cnblogs.com/cnblogs_com/Tom-shushu/1435205/o_324183.jpg" width="150">

圖片地址自己順便換當然用我的圖片也是可以的！！

三，點擊有帶字變色的心形設置：

找到“頁腳Html代碼”代碼框插入如下代碼：

<script type="text/javascript">
/* 滑鼠特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤Java❤","❤Git❤","❤MySQl❤","❤Netty❤","❤MyBatis❤","❤Spring❤","❤SpringBoot❤","❤Redis❤","❤Shiro❤","❤SpringMVC❤","❤TomCat❤","❤Linux❤","❤AOP❤","❤IOC❤","❤ElasticSearch❤","❤Maven❤","❤Servlet❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

兩個心形之間的文字自己可以順便定義

四，標題和子標題漸變色的設置

1.標題：

1 <h3   align="center">Tom-shushu</h3>

2.子標題：

1 <h3  align="center">
2 <font color="#80FF00">我</font><font color="#95EA15">賺
3 </font><font color="#AAD52A">錢</font><font color="#BFC03F">養
4 </font><font color="#D4AB54">你</font><font color="#E99669">呀
5 </font><font color="#FE817E">！</font><font color="#FF6C93">-
6 </font><font color="#FF57A8">-</font><font color="#FF42BD">-
7 </font><font color="#FF2DD2">周</font><font color="#FF18E7">紅
8 </font>
9 </h3>

OK完成！！！

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ES 16 - 對Elasticsearch中的索引數據進行增刪改查 (CRUD)
    如何對Elasticsearch的索引數據進行增刪改查操作? 新增數據時是否指定id? 如何通過`_id`和`_source`元欄位查詢文檔, 全量修改和強制替換文檔的使用, 刪除文檔的原理...... 本篇文章作個比較詳細的說明~ ...
  • pod command
    pod 基礎使用命令 創建Podfile文件 使用命令打開Podfile文件 搜索pod 庫 更新本地Repo庫 安裝pod 庫 升級pod 庫 cocoapods庫安裝命令 檢查ruby源 1 gem sources -l 刪除原有ruby源 1 gem sources -remove https ...
  • android消息處理源碼分析
    一、簡介消息處理機制主要涉及到這幾個類：1.Looper2.MessageQueue3.Message4.Handler 二、源碼分析 Looper.class的關鍵源碼: 消息迴圈退出過程 從上面可以看到loop()方法是一個死迴圈，只有當MessageQueue的next()方法返回null時才 ...
  • 小米手機Usb之studio安裝不瞭解決辦法
    近段時間剛學習完安卓基礎，在一家小公司入職，昨天晚上翻出了幾年前買的小米Note手機，打算用來真機調試Studio,結果運行一直安裝不了。 忘記截圖了，大概頁面差不多這樣。 網上看了好多貼子，開發者選項和USB調試就不用說了，這個大家都會。 還有說關掉“開發者選項-啟用MiUi優化”的，但是完關閉了 ...
  • iOS----------Mac維修預約-如何找到電腦維修單
    先打開蘋果官網，找到技術支持 2、選擇維修選項 3.查看維修狀態 4.顯示維修時間訂單 ...
  • apply,call和bind的用法區別
    apply-call-bind用法 ...
  • async函數結合promise的小案例
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
  • koa+mysql+vue+socket.io全棧開發之前端篇
    React 與 Vue 之間的對比，是前端的一大熱門話題。 vue 簡易上手的腳手架，以及官方提供必備的基礎組件，比如 vuex ， vue router ，對新手真的比較友好； react 則把這些都交給社區去做，雖然這壯大了 react 的生態鏈，但新手要弄出一套趁手的方案挺麻煩的，不過好在現在 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類