正文

博客园美化-darkgreentrip(代码片段)

ch520  ch520  2022-12-16  778

关键词：

1、第一步，样式的形成与博客皮肤的选择有很大关系

本文选择
```
    darkgreentrip
```

2、代码插入

2.1页面定制CSS代码

``` Objective-C
#home
margin: 0 auto;
width: 95%;/原始65/
min-width: 980px;/页面顶部的宽度/
background-color: rgba(245, 245, 245, 0.7);
padding: 30px;
margin-top: 0px;
margin-bottom: 0px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

body
background: rgba(12, 100, 129, 1) url(‘https://files.cnblogs.com/files/CH520/2018-07-17_222016.bmp‘) fixed no-repeat;
background-position: 50% 5%;
background-size: cover;

blogTitle

height: 100px; /高度/
clear: both;
background-color: rgba(245, 245, 245, 0);

blogTitle h1

font-size: 36px;
font-weight: bold;
line-height: 1.8em;/原始 1.6em/
margin-top: 10px;/原始 15px /
color: #548B54;

blogTitle h2

font-weight: normal;
font-size: 17px;/原始 16px ；font-size: 1.0rem;/
line-height: 1.8;
color: #111;
font-weight: bold;
text-align: right;
float: right;

navigator

background-color: rgba(33, 160, 139, 0.9);

navList a:link, #navList a:visited, #navList a:active

color: #eee;
font-size: 18px;
font-weight: bold;

.blogStats
color: #eee;

.postTitle
border-left: 8px solid rgba(33, 160, 139, 0.68);
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: #21759b;
transition: all 0.4s linear 0s;

.postTitle a:hover
margin-left: 30px;
color: #0f3647;
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(33, 160, 139, 0.9);

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

qbackground: rgba(255, 255, 255, 0);

.CalNextPrevbackground: 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);

.entrylist
background: rgba(255, 255, 255, 0.5);

/推荐和反对/

div_digg

padding: 10px;
position: fixed;
_position: absolute;
z-index: 1000;
bottom: 10px;
right: 100px;
_right: 17px;
border: 1px solid #D9DBE1;
background-color: #FFFFFF;
filter: alpha(Opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;

border:1px solid #DDDDDD;
border-radius:5px;

.diggit
border-radius:5px;

.buryit
border-radius:5px;

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

sideCatalogBtn

border-radius:5px;

/*******************************************************/
/
代码高亮开始，使用了一个叫Monokai Sublime的黑色主题皮肤，直接拿过来还不行，有一些样式冲突，还要自己稍微改一些地方
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
/
pre
/控制代码不换行/
white-space: pre;
word-wrap: normal;

border: 2px solid rgba(0,0,0,0.1);
/* 内边距 */

/* padding: 5px 10px 5px 20px; /
/ 外边距 /
margin: 15px 10px 5px 20px;
/ 圆角 */
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

.cnblogs-markdown .hljs
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f !important;
color: #FFF;
white-space: pre;
word-break: normal;

.hljs,
.hljs-tag,
.hljs-subst
color: #f8f8f2;

.hljs-strong,
.hljs-emphasis
color: #a8a8a2;

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link
color: #ae81ff;

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class
color: #a6e22e;

.hljs-strong
font-weight: bold;

.hljs-emphasis
font-style: italic;

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr
color: #f92672;

.hljs-symbol,
.hljs-attribute
color: #66d9ef;

.hljs-params,
.hljs-class .hljs-title
color: #f8f8f2;

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable
color: #e6db74;

.hljs-comment,
.hljs-deletion,
.hljs-meta
color: #75715e;

/黑色主题皮肤结束/

- ## 2.2 博客侧边栏公告（支持HTML代码）（支持JS代码）
    - 用于记录访问计数
    ``` Objective-C
<div align="center"><a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3224637&c=9674224" alt="AmazingCounters.com"></a></div>

2.3 页首Html代码

<a href="https://github.com/Jackson0714" target="_blank">
<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;" src="http://images.cnblogs.com/cnblogs_com/jackson0714/779808/o_github.png" >
</a>

2.4 页脚Html代码
``` Objective-C

```

博客园美化操作(代码片段)

之所以写这篇文章的原因了主要就是博客园的默认样式太单一，而且很多人都在用，就想与众不同一样，不做大多数准备工作想要美化自己的博客园默认界面，首先需要申请js权限步入正题当你的这一步做完之后就可以... 查看详情

博客园个人界面美化（初入博客园）(代码片段)

刚入博客园，小白也要有一个“高大上”的个人博客页面啊，鼓捣了一下午，感觉自己棒棒的，叉腰得瑟个人感觉Simple的主页样式很美观，大气，哈哈首先，在博客园后台管理的设置里，申请js代码的权限（默认是没有打... 查看详情

博客园界面美化(代码片段)

博客园界面美化0x00.写在前面皮肤作者：@SevenNight皮肤作者博客：SevenNight修改人：@Ryanjie修改人：Ryanjie前几天无意之中看到了一款特别好看（每个人的眼光都不一样）的博客皮肤“verdant”，皮肤的作者是@SevenNight。当时感觉这款... 查看详情

博客园的美化(代码片段)

前言第一次写博客想从美化页面开始。页首html代码这里引入的是来自https://www.cnblogs.com/jingmoxukong/p/7826982.html的css文件12<linkrel="stylesheet"href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.cs 查看详情

博客园美化(代码片段)

闲着没事对博客皮肤做了些美化，主要是css，js写了些小功能css部分：整体采用蓝色简洁风，有些部分我不用，所以没优化，比如标签，日历，相册，头部固定在顶部，侧边栏固定250px;右边内容主体自适应，支持，收藏和关注按... 查看详情

美化博客园(代码片段)

设置与我联系侧边栏公告代码<atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=xxxxxxxxxxx&site=qq&menu=yes">　　<imgalign="absmiddle"border="0"src="http://wpa.qq.com/pa?p=2:xxxxxx 查看详情

[博客美化]博客园syntaxhighlighter代码高亮(代码片段)

...ndowsLiveWriter/OpenLiveWriter代码着色太繁琐了，仅仅为了实现博客代码着色功能就要下载新软件和搞一堆配置。Win10用户只能使用OpenLiveWriter。Web端能干的事干嘛多搞功夫。如果不愿意网页登陆账号只想通过OLW软件编辑全文并且发布... 查看详情

博客园代码高亮美化教程(代码片段)

先简单展示下效果吧：首先需要导入js代码，在侧边栏公告处将以下代码复制进入：<scripttype="text/javascript">!function()varq=null;window.PR_SHOULD_USE_CONTINUATION=!0;(function()functionS(a)functiond(e)varb=e.charCodeAt(0);if(b!==9 查看详情

博客园美化(代码片段)

侧栏字体更改1.catListTitle2font-weight:bold;3line-height:1.2;4margin-top:21px;5margin-bottom:10.5px;6border-left:10pxsolid#008000;7padding:10px010px14px;8text-align:left;9font-family:微软雅黑;1011#profile_blo 查看详情

博客园美化代码备份(代码片段)

#Header1_HeaderTitlefont-family:"华文行楷";font-size:62px;font-weight:bold;padding-top:15px;padding-bottom:5px;padding-left:20px;padding-right:0px;text-align:center;Header2_HeaderTitlefont-fa 查看详情

博客园美化：添加赞赏功能(代码片段)

将以下代码复制粘贴到侧边栏HTML中：<scripttype="text/javascript"src="https://blog-static.cnblogs.com/files/zhangshuhao1116/pay.js"></script><script>newtct 查看详情

博客园主题自定义美化(代码片段)

...com/files/JetpropelledSnake/cnblogs.css，然后按ctrl+s，即可将本人博客用到的自定义css下载下来。接着在博客的管理页面，找到文件选项卡，上传刚刚下载的文件：上传之后，记下该文件的url，如上图中的红框所示。注：上图中的url... 查看详情

博客园美化：添加qq联系按钮(代码片段)

将以下代码复制粘贴到博客侧边栏公告HTML： <divalign="center"><atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=744461004&site=qq&menu=yes"><imgalign="absmiddle"borde 查看详情

博客园页面美化(代码片段)

　对以前的我来说，我觉得博客只有自己搭建的才有页面美化，像博客园这样的可能没有。但是，突然有一天在我查资料的时候，发现了一篇很好看的博客，我就留意了一下他的域名，发现竟然是博客园的。就开始决定把自己的... 查看详情

博客园主题美化diy教程(代码片段)

...到友人启发，部署了个静态页面，想着太单调了，要不连博客园的修一修，就去网上翻找了一下，果然给我发现了，但是在DIY的中途，遇到一大堆问题，因为是几年前的源码了，很多链接已经噶了。首先这个DIY页面的作者是这位... 查看详情

博客美化(代码片段)

...r/cnblogs-theme-silence介绍Silence是一款界面简洁、运行高效的博客园主题，主要面向于经常混迹博客园的朋友。简单概括其几个主要特点：专注阅读、精致漂亮的UI；事无巨细的部署文档；兼容移动端浏览器；源码结构清晰、易扩展... 查看详情

博客园美化教程大集合（超详细，看这篇就够了）(代码片段)

阅读目录：　　1. 前言　　2.定制自己的博客0.美化整体效果1.准备工作2.自定义个性化导航栏3.添加顶部博主信息4.添加顶部滚动公告5.为博客文章添加目录导航6.添加分享功能按键7.定制推荐和反对按键的炫酷样式8.添加快速... 查看详情

darkgreentrip博客搭建成功

本博客(https://www.cnblogs.com/zhangshuhao1116)自2021年6月19日由Shu-HowZ 搭建成功，2018年搭建过hexo+next、Wordpress，奈何部署在GitHub上很慢，Gitee不好用，Wordpress搭了一年服务器到期了，没钱继续续费，所以就停止做博... 查看详情

正文

博客园美化-darkgreentrip(代码片段)

1、第一步，样式的形成与博客皮肤的选择有很大关系

本文选择

2、代码插入

2.1页面定制CSS代码

blogTitle

blogTitle h1

blogTitle h2

navigator

navList a:link, #navList a:visited, #navList a:active

topics

tbCommentBody

qbackground: rgba(255, 255, 255, 0);

div_digg

blog_post_info_block a

sideCatalogBtn

2.3 页首Html代码

2.4 页脚Html代码

博客园美化操作(代码片段)

博客园个人界面美化（初入博客园）(代码片段)

博客园界面美化(代码片段)

博客园的美化(代码片段)

博客园美化(代码片段)

美化博客园(代码片段)

[博客美化]博客园syntaxhighlighter代码高亮(代码片段)

博客园代码高亮美化教程(代码片段)

博客园美化(代码片段)

博客园美化代码备份(代码片段)

博客园美化：添加赞赏功能(代码片段)

博客园主题自定义美化(代码片段)

博客园美化：添加qq联系按钮(代码片段)

博客园页面美化(代码片段)

博客园主题美化diy教程(代码片段)

博客美化(代码片段)

博客园美化教程大集合（超详细，看这篇就够了）(代码片段)

darkgreentrip博客搭建成功