我的思想随着这些闪耀的绿叶而闪耀;我的心灵因了这日光的抚触而歌唱;

侧边栏添加小白鼠插件

技术专栏 致远 44℃ 0评论

今天浏览网页的时候无意间看到一个小插件很好玩,如图所示,就准备cp过来

第一步:查看小插件的源代码

在审查元素的面前,一切特效都是渣渣,这项高亮的代码想必就是小老鼠的代码了,具体原理我不懂,但是只要把代码搞过来,就可以拥有自己的小老鼠了

第二步:在博客园的设置栏,将小老鼠的代码复制粘贴

如果想在侧边栏添加js内容,需要先点击申请js的链接,申请成功后,页面会显示红框的字样,再把我们的小老鼠代码粘贴进去,ok,点击保存,再次进入博客园

就可以看到自己的小老鼠了,是不是有点小激动呢?

小老鼠实际显示效果,如下图所示:

可以根据自己的需要在不同的模板上定义自己的样式,欢迎大家多学习交流!

css样式代码:

 

#home {
margin: 0 auto;
width: 90%;
margin-top: 20px;
margin-bottom: 20px;
}
#blogTitle h1 a {
font-family: 微软雅黑;
}
#blogTitle h2 {
font-family: 微软雅黑;
}
#navList {
font-size: 14px;
font-family: 微软雅黑;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
font-family: 微软雅黑;
color: #3167FF;
}
.c_b_p_desc {
font-family: 微软雅黑;
}
.postTitle {
border-left: 3px solid #0339FD;
}
.catListTitle {
font-weight: bold;
line-height: 1.2;
margin-top: 21px;
margin-bottom: 10.5px;
border-left:10px solid #FFB04F;
padding: 10px 0 10px 14px;
text-align: left;
font-family: 微软雅黑;
}
#profile_block {
font-family: 微软雅黑;
}
#navigator {
font-family: 微软雅黑;
}
* {
font-family: 微软雅黑;
}

白色小老鼠插件代码:(注:更改bodyCololr选项可以得到不同风格的小老鼠)

<object type=”application/x-shockwave-flash” style=”outline:none;” data=”http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;” width=”200″ height=”160″>
<param name=”movie” value=”http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;”>
<param name=”AllowScriptAccess” value=”always”>
<param name=”wmode” value=”opaque”></object>

黑色小老鼠插件代码:

<object type=”application/x-shockwave-flash” style=”outline:none;” data=”http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=000000&amp;up_feetColor=D4B898&amp;up_eyeColor=FFFFFF&amp;up_wheelSpokeColor=000000&amp;up_wheelColor=FFFFFF&amp;up_waterColor=66CDAA&amp;up_earColor=FFFFFF&amp;up_wheelOuterColor=000000&amp;up_snoutColor=FFFFFF&amp;up_bgColor=F5DEB3&amp;up_foodColor=000000&amp;up_wheelCenterColor=000000&amp;up_tailColor=FFFFFF&amp;” width=”200″ height=”160″>
<param name=”movie” value=”http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;”>
<param name=”AllowScriptAccess” value=”always”>
<param name=”wmode” value=”opaque”></object>

自定义博客园的参考链接:http://www.jianshu.com/p/23b2bfc9a90d

转载请注明:致远博客 » 侧边栏添加小白鼠插件

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址