博客园美化(代码片段)

sunbines sunbines     2022-11-12     223

关键词:

侧栏字体更改

 1 .catListTitle 
 2 font-weight: bold;
 3 line-height: 1.2;
 4 margin-top: 21px;
 5 margin-bottom: 10.5px;
 6 border-left:10px solid #008000;
 7 padding: 10px 0 10px 14px;
 8 text-align: left;
 9 font-family: 微软雅黑;
10 
11 #profile_block 
12 font-family: 微软雅黑;
13 
14 #navigator 
15 font-family: 微软雅黑;
16 
17 * 
18 font-family: 微软雅黑;
19 

 

主页面大小调整

 1 body 
 2  
 3    text-align:center; 
 4  
 5 
 6 #home 
 7  
 8    margin: 0px auto; 
 9    text-align:left; 
10    max-width:1060px;
11 

 背景图片

1 body 
2 color: #000;
3 background: url("http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg") fixed;
4 background-size: cover;
5 background-repeat: no-repeat;
6 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
7 font-size: 12px;
8 min-height: 101%;
9 

 标题

• 绿色背景标题

 1 /*标题2*/
 2 #cnblogs_post_body h2 
 3     color: #fff;
 4     padding-left: 15px;
 5     background-color: #00CED1 !important;
 6     text-shadow: 2px 2px 3px #222222;
 7     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 8     margin-bottom: 5px;
 9 
10 /*标题3*/
11 #cnblogs_post_body h3 
12     color: #00CED1;
13     border-left: 13px solid #00CED1;
14     padding: 5px;
15     background-color: #f5f5f5;
16 

红色背景标题

/*标题2*/
#cnblogs_post_body h2 
    color: #fff;
    padding-left: 15px;
    background-color: #FF0000 !important;
    text-shadow: 2px 2px 3px #222222;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    margin-bottom: 5px;

/*标题3*/
#cnblogs_post_body h3 
    color: #000000;
    border-left: 13px solid #FF0000;
    padding: 5px;
    background-color: #f5f5f5;

小飞机 页脚Html代码

 1 <style>
 2 #back-top 
 3      position: fixed;
 4      bottom: 10px;
 5      right: 5px;
 6      z-index: 99;
 7 
 8 #back-top span 
 9      width: 50px;
10      height: 64px;
11      display: block;
12      background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
13 
14 #back-top aoutline:none
15 </style>
16 <script type="text/javascript">
17 $(function() 
18     // hide #back-top first
19     $("#back-top").hide();
20     // fade in #back-top
21     $(window).scroll(function() 
22         if ($(this).scrollTop() > 500) 
23             $(#back-top).fadeIn();
24          else 
25             $(#back-top).fadeOut();
26         
27     );
28     // scroll body to 0px on click
29     $(#back-top a).click(function() 
30         $(body,html).animate(
31             scrollTop: 0
32         , 800);
33         return false;
34     );
35 );
36 </script>
37 <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

 右下角目录博客侧边栏公告(支持HTML代码)(支持JS代码)

传送门

1 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>   
2 <link href="http://files.cnblogs.com/files/ning-wang/marvin.nav.css" rel="stylesheet">
3 <script type="text/javascript" src="http://files.cnblogs.com/files/ning-wang/marvin.nav.js"></script>

 制作博客园文章签名

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

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

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

前言第一次写博客想从美化页面开始。页首html代码这里引入的是来自https://www.cnblogs.com/jingmoxukong/p/7826982.html的css文件1<!--自定制样式文件-->2<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&amp;uin=xxxxxxxxxxx&amp;site=qq&amp;menu=yes">  <imgalign="absmiddle"border="0"src="http://wpa.qq.com/pa?p=2:xxxxxx 查看详情

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

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

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

1、第一步,样式的形成与博客皮肤的选择有很大关系本文选择darkgreentrip2、代码插入2.1页面定制CSS代码```Objective-C#homemargin:0auto;width:95%;/原始65/min-width:980px;/页面顶部的宽度/background-color:rgba(245,245,245,0.7);padding:30px;margin-top:0px; 查看详情

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

先简单展示下效果吧:首先需要导入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中:<!--tctip支付赞赏/打赏--><scripttype="text/javascript"src="https://blog-static.cnblogs.com/files/zhangshuhao1116/pay.js"></script><!--js文件引入--><script>newtct 查看详情

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

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

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

将以下代码复制粘贴到博客侧边栏公告HTML: <!--联系qq--><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.添加快速... 查看详情

博客园样式美化ii(代码片段)

前言感谢大家对之前博客园样式美化的认可,我终于更新啦啦啦啦更新内容01|优化首页显示效果优化前:优化后:有没有感觉瞬间立体起来了呢~02|增加管理入口这个很简单,就是导航条上加了个管理的入口原本想设置为只有博... 查看详情

博客园主题美化配置(awescnb)(代码片段)

...题为awescnb系列主题中的geek主题 Awescnb文档Awescnb作者博客配置步骤一、准备工作申请js权限(参考链接:https://www.cnblogs.com/maczhen/p/14372738.html) 二、博客配置1.基本配置、代码高亮修改博客默认主题为Custom其他默认 2.博... 查看详情