本文详细介绍了如何个性化博客的样式，包括开启JS权限、选择模板、设置自定义CSS和HTML代码，实现鼠标图标、目录导航、悬浮元素、背景特效等功能。同时，还提供了评论样式和音乐播放器的定制方法，帮助提升博客的用户体验。
之前调整了两个样式的，好看是好看，用着不方便，把不需要的全都删掉了
样式效果就是现在的
使用方法
一、开通博客园的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>';
else
li1_content = '<li><a href="#_label' + i + '">' + $(h1_list[i]).text() + '</a></li>';
content += li1_content;
}
content += '</ul>';
content += '</div><p> </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-js
id="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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
