300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 博客园美化(10)博客园 SimpleMemory 博客皮肤设置(简单简洁)

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

时间:2023-06-03 02:31:29

相关推荐

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

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

样式效果就是现在的

使用方法

一、开通博客园的JS权限

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

二、选择模板

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

三、设置自定义代码

1、页面定制css代码

直接复制以下代码就行(Ctrl+C & Ctrl+V)

下边代码框中获取,只设置了鼠标图标

鼠标图标

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

2 、首尾首HTML代码

目录在侧边栏

// 侧边栏目录// https://blog-/files/douzujun/marvin.nav.my1502.css<script src="/bootstrap/3.2.0/js/bootstrap.min.js"></script><link href="https://blog-/files/douzujun/marvin.nav.my1502.css" rel="stylesheet"><script type="text/javascript" src="https://blog-/files/douzujun/marvin.nav.my1502.js"></script>//目录导航<link href="/files/clwydjgs/cnblog-scroller.css" type="text/css" rel="stylesheet"><script src="/files/clwydjgs/scrollspy.js" type="text/javascript"></script><script src="/files/clwydjgs/stickUp.min.js" type="text/javascript"></script><script src="/files/clwydjgs/cnblog-scroller.js" type="text/javascript"></script>//生成目录索引列表<script language="javascript" type="text/javascript">// 生成目录索引列表// ref: /wangqiguo/p/4355032.html// modified by: zzqfunction 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-/files/blogs/409706/BLOG_szgotop.js"></script><link rel="stylesheet" type="text/css" href="https://blog-/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="/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属性值是逐渐改变的,这样就可以创建动画效果。//详情请看/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='/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="/npm/aplayer/dist/APlayer.min.css"><script src="/npm/aplayer/dist/APlayer.min.js"></script><!-- require MetingJS --><script src="/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-/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() || '/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>

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。