首页 > 其他分享 >博客园美化

博客园美化

时间：2023-12-17 20:35:44浏览次数：32  
标签：border 博客园 padding background font margin top 美化

浅浅的美化一下

先申请js权限，理由就说是美化博客园即可

然后依次在以下各个区域粘贴代码即可，在background: url(图片的网址链接) fixed;这一行把你的图片链接复制进去即可，我的代码也参考了网上许多博客

侧边栏公告：

<!-- 添加公告栏时钟 -->
<div style="border-top: 1px dashed #ccc;padding: 5px;border-bottom: 1px dashed #ccc;height: 120px;">
<div id="clockdiv">
    <canvas id="dom" width="120" height="120">时钟canvas</canvas>
</div>
</div>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/shwee/clock.js"></script>

页面定制CSS代码

/*simplememory*/
#google_ad_c1, #google_ad_c2 {display:none;}
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
font-size: 14px!important;
}
#home {
opacity: 0.80;
margin: 0 auto;
width: 85%;
min-width: 950px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#blogTitle h1 {
font-size: 30px;
font-weight: bold;
font-family: "Comic Sans MS";
line-height: 1.5em;
margin-top: 20px;
color: #515151;
}
#navList a:hover {
color: #4C9ED9;
text-decoration: none;
}
#navList a {
display: block;
width: 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 18px;
}
#navigator {
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 10px 0 14px 10px;
background-color: #f5f5f5;
}
#ad_under_post_holder #google_ad_c1,#google_ad_c2{ 
display: none !important;
}
body {
color: #000;
background: url(图片的网址链接) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
#topics .postTitle {
border: 0px;
font-size: 200%;
font-weight: bold;
float: left;
line-height: 1.5;
width: 100%;
padding-left: 5px;
}


div.commentform p{
margin-bottom:10px;
}
.comment_btn {
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #ddd;
color: #999;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
.comment_btn:hover{
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #258fb8;
color: white;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
#commentform_title {
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:0;
font-size:24px;
}
#commentbox_opt,#commentbox_opt + p {
text-align:center;
}
.commentbox_title {
width: 100%;
}
#tbCommentBody {
font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
margin-top:10px;
max-width:100%;
min-width:100%;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
// padding:10px;
height:250px;
font-size:14px;
min-height:120px;
}
.feedbackItem {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
font-weight:normal;
}

#blog-comments-placeholder, #comment_form {
padding: 20px;
background: #fff;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
margin-bottom: 50px;
}
.feedback_area_title {
margin-bottom: 15px;
font-size: 1.8em;
}
.feedbackItem {
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
padding: 5px;
background: rgb(248, 248, 248);
}
.color_shine {background: rgb(226, 242, 255);}
.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
#comment_form .title {
font-weight: normal;
margin-bottom: 15px;
}
/* 文章title自定义带动画样式 */
.postTitle {
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  clear: both;
  background-color: #FBF9F9;
  margin-bottom: 8px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 20px;
  border-left: 3px solid #21759b;
  padding-left: 20px;
  font-size: 20px;
  border-radius:0px;
}
.postTitle a:hover {
  text-decoration: none;
  margin-left: 20px;
  color: #E00000;
}
.postTitle a:link,
.postTitle a:visited,
.postTitle a:active {
  transition: all 0.4s linear 0s;
}

/* 定制公告栏时钟位置 */
#clockdiv {
  text-align: center;
}

/*scroll to top*/
#scrollTop div{
  left:0;
  overflow:hidden;
  position:absolute;
  top:0;
  width:149px;
  margin:0;
  padding:0
}
#scrollTop .level-2{
  background:url(https://blog-static.cnblogs.com/files/hafiz/rocket.bmp) no-repeat scroll -149px 0 transparent;
  display:none;
  height:250px;
  opacity:0;
  z-index:1
}
#scrollTop .level-3{
  background:none repeat scroll 0 0 transparent;
  cursor:pointer;
  display:block;
  height:150px;
  z-index:2
}
#scrollTop{
  background:url(https://blog-static.cnblogs.com/files/hafiz/rocket.bmp) no-repeat scroll 0 0 transparent;
  cursor:default;
  display:block;
  height:180px;
  overflow:hidden;
  position:fixed;
  right:0;
  top:90%;
  width:149px;
  z-index:11;
  margin:-125px 0 0;
  padding:0
}

/*目录样式*/
#sideCatalog a{
  font-size:12px;
  font-weight:normal !important;
}

/*好看的滚动条*/
::-webkit-scrollbar{
    width:10px!important;
    height:10px!important;
    -webkit-appearance:none;
}
::-webkit-scrollbar-thumb{
    height:5px;border:1px solid transparent;
    border-top:none;border-bottom:none;
    -webkit-border-radius:6px;
    background-color:rgba(0,0,0,.3);
    background-clip:padding-box;
}

页首html代码

<script src="https://files-cdn.cnblogs.com/files/woju/tctip.min.js"></script> 
<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/hafiz/myRewards.css">



<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/hafiz/myRewards.css">


<link  type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/hafiz/feedback.css">

<link  type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/hafiz/my-maodian.css">




<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("雨淋湿了天空毁得很讲究", "你说你不懂为何在这时牵手", "雨下整夜", "我的爱溢出就像雨水", "雨纷纷 旧故里草木深", "我听闻 你始终一个人", "故事的小黄花", "从出生那天就飘着", "为你翘课的那一天",  "花落的那一天", "烛光照亮了晚餐", "照不出个答案", "恋爱不是温馨的请客吃饭", "我顶着大太阳", "只想为你撑伞", "你靠在我身旁","深呼吸怕遗忘", "谜一样的", "沉默着的", "故事你真的在听吗", "夜空中最亮的星", "能否听清", "那仰望的人", "心底的孤独和叹息", "我曾难自拔于世界之大", "也沉溺于其中梦话", "怎么了你累了", "说好的幸福呢", "没有什么能够阻挡", "你对自由的向往", "就像阳光穿过黑夜", "黎明悄悄划过天边", "繁华如三千东流水", "我只取一瓢爱了解", "最美的不是下雨天", "是曾与你躲过雨的屋檐", "我曾以为我会永远守在他身旁", "如今我们已经离去在人海茫茫", "慢慢喜欢你", "塞纳河畔", "左岸的咖啡", "我手一杯" ,"品尝你的美", "该怎么去形容你最贴切", "拿什么跟你做比较才算特别", "走廊灯关上 书包放", "迷人的笑脸吸引视线", "慵懒的靠在陌生的肩", "只期待 后来的你 能快乐","那就是 后来的我 最想的","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你","爱你",);
        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>

页脚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('/ajax/GetComments.aspx') >= 0) {
    initCommentData();
  }
});
</script>

<script src="https://blog-static.cnblogs.com/files/hafiz/jquery-migrate-1.2.1.js"></script>
<div id="scrollTop" style="display:none;">
      <div class="level-2"></div>
      <div class="level-3"></div>
</div>
<script src="https://blog-static.cnblogs.com/files/hafiz/scroll2top.js"></script>
<script type="text/javascript">
    UI.global_search();
    var uvOptions = {};
    // !important
    (function() {
        initScrollTop();
    })();
</script>

<script src="https://blog-static.cnblogs.com/files/hafiz/bootstrap.min.js"></script>

<!--鼠标特效-->
<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<!--鼠标特效 end-->

标签：border,博客园,padding,background,font,margin,top,美化
From： https://www.cnblogs.com/lizhuotong/p/17909704.html

相关文章

  • 小白玩转博客园
    简介记录自己在使用博客园过程中遇到的各种问题，与解决方法。安装皮肤明确个人需求，是要炫酷色彩，还是要简约线条。响应式布局，支持手机阅读。加载要快，别半天还出不来内容。以下作者可供参考：guangzan，博客预览地址。GShang，博客园主题-Bili2.0。定制个人签名......
  • linux下一键上传markdown文件到博客园
    工具链接dongfanger/pycnblog:博客园上传markdown文件(github.com)这是工具的作者，网址里也有些教程，我这里再把教程写一写，加上自己一些使用的方式。诚挚感谢工具作者的开发贡献！使用指南配置typora用Typora进行编写，需要修改图片的存储方式打开文件>偏好设置，找到'图片插入'......
  • 使用QSS美化qt界面
    Qt官方文档详细讲述了QSS文件的编辑格式和编辑方法：样式表语法|Qt4.8版本而询问chatGPT也可以得到如下示例（参照官方文档进行了修改）：/*注释：这是QSS文件的注释*/QWidget{background:gray/*设置所有QWidget的背景颜色*/color:#333;/*设置文字颜色*/fo......
  • 博客园美化：光明/暗黑模式自动切换参考
    我的博客主题是SimpleMemory。浏览器浅色时代码主题xcode，深色时代码主题为hybrid，字体为Consolas。你现在看到的我的博客就是使用了暗黑和光明模式自动切换，会根据浏览器的主题自动识别。自动识别的关键CSS代码为：/*Lightmode*/@media(prefers-color-scheme:light){}/*......
  • word表格美化设计
    一、美化表格 文字内容如上；添加标题栏，增加阅读感选中表格上栏，然后插入一行，并合并单元格，写上文字：调整整个表格大小，使其延伸到整个word版面选中整个表格:右键--自动调整---根据窗格自动调整内容；使左右占满整个版面视图---单页--然后鼠标下拉表格进行调节表格......
  • 迎接新的篇章 —— 我在博客园的第一篇博客
    大家好，欢迎来到我的博客！这是我在博客园的第一篇博客，很高兴能够与大家分享我的学习、经验和兴趣。让我简单介绍一下自己。我是一名热爱编程的Java后端开发者，喜欢探索新技术、挑战自我。通过不断的学习和实践，我积累了丰富的Java后端开发经验，擅长构建可扩展、高性能的应用程序。编程......
  • 关于博客园使用Markdown编辑器但是[TOC]无法正常生成目录
    目录这是一级标题这是二级标题这是三级标题这是四级标题一、fdisk工具创建一个磁盘分区1、虚拟机添加测试硬盘2、创建磁盘分区3、文件系统管理磁盘分区4、挂载二、parted命令使用场景操作命令'help'查看命令列表查看分区情况划分出主分区"parted1"删除分区格式化操作设置开机自动......
  • 博客园又崩了，这个锅要不要阿里云背？
    昨天下午博客园又崩了，不过与其它大厂的崩溃不同，博客园出现崩溃的频率好像有点高。这是怎么回事呢？和阿里云又有什么关系，这篇文章就来分析分析。到底是谁的问题？昨天下午（2023年12月8日）博客园官方发布了一个故障公告，官网截图如下：博客园的故障是数据库CPU100%，今年已经出现了7次，......
  • 博客园作为图床，上传图片自动添加图片水印
    专属于博客园的教程。markdown上传图片，添加图片水印，再上传到博客园图床。前言图床有防盗链什么的，处理起来实在是麻烦。既然博客园支持图床，我现在只在博客园写，那就捣鼓了一下。今天是通义千问工程师。菜鸡啥也不会。参考教程首先应参考教程配置，保证博客园图床正确，再对python......
  • 博客园
    1.页面<!--配置项详情见https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/Docs/Customization/config--><scripttype="text/javascript">window.cnblogsConfig={info:{name:'',//「待填内容」用户名startDate:......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99