之前调整了两个样式的,好看是好看,用着不方便,把不需要的全都删掉了

样式效果就是现在的

使用方法

一、开通博客园的JS权限

管理>设置>勾选JS权限,等待审核通过。

二、选择模板

JS权限审核通过后,在设置>博客皮肤选择SimpleMemory。(必须选择这个皮肤,因为后面代码是基于这个皮肤)

三、设置自定义代码

1、页面定制css代码

直接复制以下代码就行(Ctrl+C & Ctrl+V)
下边代码框中获取,只设置了鼠标图标

鼠标图标
/*全局基础样式*/
/*下面的样式放到全局css里面去*//*--页面鼠标默认样式--*/
body{/* 鼠标图标 */
cursor: url(https://blog-static.cnblogs.com/files/blogs/409706/BLOG_cursor.ico),auto;/*url("你的鼠标指针图标路径")*/
}

2 、首尾首HTML代码

目录在侧边栏
// 侧边栏目录
// https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.js"></script>//目录导航
<link href="https://files.cnblogs.com/files/clwydjgs/cnblog-scroller.css" type="text/css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/clwydjgs/scrollspy.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/files/clwydjgs/stickUp.min.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/files/clwydjgs/cnblog-scroller.js" type="text/javascript"></script>//生成目录索引列表
<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{var mainContent = $('#cnblogs_post_body');var h1_list = $('#cnblogs_post_body h1');//如果你的章节标题不是h2,只需要将这里的h2换掉即可if(mainContent.length < 1)return;if(h1_list.length>0){var content = '<a name="_labelTop"></a>';content += '<div id="navCategory" style="color:#152e97;">';content += '<p style="font-size:18px;"><b>目录</b></p>';content += '<ul>';for(var i=0; i<h1_list.length; i++){var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';$(h1_list[i]).before(go_to_top);var h2_list = $(h1_list[i]).nextAll("h2");var li2_content = '';for(var j=0; j<h2_list.length; j++){var tmp = $(h2_list[j]).prevAll('h1').first();if(!tmp.is(h1_list[i]))break;var li2_anchor = '<a name="_label' + i + '_' + j + '"></a>';$(h2_list[j]).before(li2_anchor);li2_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h2_list[j]).text() + '</a></li>';}var li1_content = '';if(li2_content.length > 0)li1_content = '<li><a href="#_label' + i + '">' + $(h1_list[i]).text() + '</a><ul>' + li2_content + '</ul></li>';elseli1_content = '<li><a href="#_label' + i + '">' + $(h1_list[i]).text() + '</a></li>';content += li1_content;}content += '</ul>';content += '</div><p>&nbsp;</p>';content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';if($('#cnblogs_post_body').length != 0 ){$($('#cnblogs_post_body')[0]).prepend(content);}}
}GenerateContentList();
</script>

3 、首尾HTML代码

直接复制以下代码就行(Ctrl+C & Ctrl+V)
下边代码框中获取

点击查看代码
<!-- 悬挂的喵 -->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/blogs/409706/BLOG_szgotop.js"></script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/409706/BLOG_szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -999px;"></div><!--背景彩带-->
<script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js" size="100" alpha="0.6" zIndex="-1" mobile="false" data-click="true"></script><!--鼠标点击特效-->
<script type="text/javascript">//定义获取词语下标var a_idx = 0;jQuery(document).ready(function ($) {//点击body时触发事件$("body").click(function (e) {//需要显示的词语var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");//设置词语给span标签var $i = $("<span/>").text(a[a_idx]);//下标等于原来下标+1  余 词语总数a_idx = (a_idx + 1) % a.length;//获取鼠标指针的位置,分别相对于文档的左和右边缘。//获取x和y的指针坐标var x = e.pageX, y = e.pageY;//在鼠标的指针的位置给$i定义的span标签添加css样式$i.css({"z-index": 999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": rand_color()});// 随机颜色function rand_color() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}//在body添加这个标签$("body").append($i);//animate() 方法执行 CSS 属性集的自定义动画。//该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。//详情请看http://www.w3school.com.cn/jquery/effect_animate.asp$i.animate({//将原来的位置向上移动180"top": y - 180,"opacity": 0//1500动画的速度}, 1500, function () {//时间到了自动删除$i.remove();});});});
</script><!-- 底部加了小鱼<・)))><<~ --><div id="jsi-flying-fish-container" class="container"></div><script src='https://files.cnblogs.com/files/blogs/409706/BLOG_fish.js'></script><style>@media only screen and (max-width: 767px){#sidebar_search_box input[type=text]{width:calc(100% - 24px)}}</style><!--音乐-->
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-jsid="594243151"lrc-type="0"server="netease"order="random"type="playlist"fixed="true"list-olded="true">
</meting-js><!--自定义评论样式--><!--拥有聊天一样的评论功能心不心动,在页脚里添加以下-->
<link  type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/zouwangblog/comment.css">
<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>

博客侧边公告代码空着就行

博客园美化(10)博客园 SimpleMemory 博客皮肤设置(简单简洁)相关推荐

  1. 博客的美化配置(NexT主题)

    欢迎各位大佬来参观我的博客:AmosMeer's Blog 搭建过程中出现的任何问题请参考博客:常见问题解决 完整的博客搭建过程的文章汇总: 利用 Github Pages 和 Hexo 初步搭建博客 ...

  2. 博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了)...

    阅读目录: 1. 前言 2. 定制自己的博客 00. 美化整体效果 01. 准备工作 02. 自定义个性化导航栏 03. 添加顶部博主信息 04. 添加顶部滚动公告 05. 为博客文章添加目录导航 0 ...

  3. 博客园五月纪念日——去你的写博无用论

    博客园五月纪念日--去你的写博无用论 纪念祝福 今天是我注册博客园的第五个月,此时此刻,我想吟诗一首: 你问我爱你有多深 我爱你有几分 我的情也真 我的爱也真 博客代表我的心 写博初心 为什么坚持写博 ...

  4. 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  5. 10 年 bloger 告诉你要不要写博客,又该如何优雅地写博客?

    点击上方蓝色字体,关注我 -- 一个在阿里云打工的清华学渣! 关于作者:程序猿石头(ID: tangleithu),现任阿里巴巴技术专家,清华学渣,前大疆后端 Leader.公众号后台回复关键字 &q ...

  6. 2021年WordPress博客装修美化(一)

    2021年Wordpress博客装修美化(一) 2021年WP博客Blocksy主题安装和基础配置 接上篇,2021年Wordpress博客搭建 ,关于搭建WP的步骤,基本上都已经讲了.看完后,照着操 ...

  7. CSDN博客访问量突破10万

    CSDN博客访问量突破10万,纪念一下.

  8. 主题博客成功的10个理由

    虽然说创建一个题材广泛的成功博客并不是不可能,但据我观察大多数赢利的博客都有一个明确的定位. 看看你经常阅读的博客列表里面的那些博客,你会发现其中半数以上针对性都很强.虽然有一些定位比其他的要广,但都 ...

  9. 程序员为什么一定要有一个属于自己的博客网站?10大理由告诉你

    原文地址:https://www.yundashi168.com/358.html 前不久,网易博客发布公告,宣布将从2018年11月30日00:00起正式停止网易博客的运营.届时将关闭服务器,用户将 ...

  10. 个人博客搭建之一步步使用Github Page创建博客主页(1)

    前几天突发奇想,准备完成我以前一直想做却因为各种原因推迟的工作:建立一个技术向的个人博客 这个想法在我心里已经存在很多年了,这也是我在CSDN,在简书,在Testerhome里面写各种文章的原因之一. ...

最新文章

  1. 星辰变鸿蒙武器,星辰变手游亲手打造极品光武 成就炼器宗师
  2. 用python+tornado+mongodb写的一个博客系统
  3. 在matlab中有几种获得帮助的途径,matlab经典习题及解答
  4. 阿里巴巴分布式服务框架 Dubbo
  5. .NET开发必看资料53个+经典源码77个
  6. Luogu3702 SDOI2017 序列计数 矩阵DP
  7. JS~~~ 前端开发一些常用技巧 模块化结构 命名空间处理 奇技淫巧!!!!!!...
  8. java在一个类里实现存款_用Java编写一个简单的存款
  9. 【转】[你必须知道的.NET] 第八回:品味类型---值类型与引用类型(上)-内存有理...
  10. 2699元!魅族16s Pro现货售罄:将加紧备货
  11. python类的应用_如何剖析python应用程序的类方法?
  12. LeetCode 29. Divide Two Integers
  13. post url 后面跟参数_都2019年了,还问GET和POST的区别
  14. 从KRE到XRE:ASP.NET 5中正在消失的那些K
  15. 关于SMP IRQ affinity
  16. SSM 前台AJax传递参数和controller后台接收的方法
  17. DOTA数据集介绍(论文A Large-scale Dataset for Object Detection in Aerial Images)
  18. NBUT 1181 Big Mouth of Abyss - Kog'Maw(删k位留最大最小数)
  19. 跟着太白老师学python day10 函数嵌套, global , nonlocal
  20. HDU—校赛—1004

热门文章

  1. 基于jQuery弹性展开收缩菜单插件gooey.js
  2. 2019 杭电多校 HDU - 6625 three arrays 字典树+贪心
  3. VRTK功能教学(二):Unity3DVRTK手柄瞬移和UI交互射线切换功能丨3D模型射线交互切换丨直线和曲线的切换
  4. 毕业后,他百万年薪,我十万年薪,有时候选择比努力更重要
  5. 电源的恒压与恒流原理
  6. 区块链政策法律研究组成立会在京召开
  7. 5G NR信道编码简述
  8. 蓝牙HID——android利用手机来解锁电脑/平板/iPhone
  9. 全国计算机二级晚上6点的场,2017年6月计算机等级考试时间通知
  10. 【Day1.2】金银滩大草原