作为一个沉迷于各种博客美化的人来说,博客就相当于自己的脸一样,好看的博客无疑可以让人赏心悦目。那么博客到底有哪些可以美化的地方呢?这篇文章将把我所有的博客美化的内容都写在这里,大家可以自由选择自己喜欢的加到自己的博客上。
修改网页鼠标样式
进入别人的博客发现鼠标样式好像变的不一样了?那是因为别人用css修改了鼠标样式,那么我应该怎么修改呢?
我们只需要在自己博客的样式表里面添加这下面代码(下面是两个不同的样式,一个是默认的,还有一个是鼠标放到超链接上显示的)。
/** 鼠标样式 开始**/
/** 普通指针样式**/
body {
cursor: url(你的鼠标样式的位置(不需要引号,建议为png,cur等格式)), default;
/** 这里还可以放到其他的标签里面,这样当移动到这些标签时就可以变成自己想要的形状**/
}
/** 链接指针样式**/
a:hover{cursor:url(你的鼠标样式的位置), pointer;}
/** 鼠标样式 结束**/
网页音乐播放器
想给自己的博客来点音乐,但是默认的H5播放器有太丑?没关系,我们可以用插件,我自己使用的插件名字叫Qplayer,这个插件比较小巧和简洁,大家也可以搜索别的网页播放器。至于安装方法,这里可以直接下载压缩包然后选择上传插件即可安装。
鼠标点击显示跳动文字
实际效果就是你点击一下鼠标就可以显示文字,文字会移动然后消失。
使用方法也很简单,大家只需要在自己网页的页脚插入下面的js脚本:(里面的文字可以更改成自己喜欢的文字,文字颜色也可以更改)
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("技术宅", "二次元", "小白", "富有想象", "*:ஐ٩(๑´ᵕ`)۶ஐ:* 学习使我进步", "(๑*◡*๑)", "✧*。٩(ˊᗜˋ*)و✧*。" ,"(づ ̄3 ̄)づ╭❤~", "╰( ´・ω・)つ──☆✿✿✿", "充满激情", "(((┏(; ̄▽ ̄)┛装完逼就跑", "熬夜成瘾(,,•﹏•,,)");
var $i = $("").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 99999999999999999999999999999999999999999999999999999999999999999999999999 ,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
网页下雪特效
这个实际上就是在自己的网页上呈现出下雪的效果。
实现也很简单,直接引入相关的js文件即可。当然在这之前我们需要下载js和雪花的图片文件:下载地址
<!-- 下雪特效 -->
<script type="text/javascript" src="<?php bloginfo('template_url');?>/snow/snow.js"></script>
页面加载过场动画
这个不解释了,直接说怎么用吧。
首先我们需要下载css文件,然后在博客的页眉添加下面代码:
<!--页面加载start-->
<link rel="stylesheet" type="text/css" href="/style/loader.css">
<script type="text/javascript">
// 等待所有加载
$(window).load(function(){
$('body').addClass('loaded');
$('#loader-wrapper .load_title').remove();
});
</script>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载LoveFeel站点<br><span>V1.0</span></div>
</div>