这个博客已经申请快四年了,却一直没有好好利用,悔啊。不过话又说回来,从现在开始行动起来,无悔。
此篇博文权当是正式入博的一种仪式、一道开胃菜、一次练手、一场前戏、、、、、、whatever
我应该是属于外貌协会中偏理性的一类人,对于自己博客界面当然也不会例外,谁不喜欢嫩嘟嘟水灵灵的皮肤呢,一款好的样式更能激起我阅读更新博客的兴趣,这种来自于外在的客观刺激是不容小觑的。
博客园除了可以选择优秀的博客模板外,还可以对选定的模板进行更进一步的自定义,详细介绍请自行前往 数据之巅 ,本文的基础样式就是扒之于此博友的博客美化系列文章,我的自定义样式是扒之于 CSS Tricks ,看着简单大方有食欲。
自行前往 数据之巅 系列博文,非常详细的介绍。
选择的基础模板是“SimpleMemory”,数据之巅的样式基于原有的样式做了一些美化处理,本人的样式又基于他的做了一些个性化的处理。
主要包括:
头部
- #header
- #blogTitle
- #navigator
首页列表
- .day
- .dayTitle
- .postTitle
- .postCon
- .postDesc
- #topics
- #postTitle
- #postBody
- #postDesc
若想尝试此样式的可以点击下载,另存为之后上传至你自己的博客园文件中,然后在 博客设置->设置->页首Html代码 中添加引用:
monospace; width: 100%; margin: 0em; background-color: #fbfbfb"><link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/seanshao/bundle-SimpleMemory-A5_v29.css"/>
主要用fixed来约束此按钮的位置,将其置于屏幕右下角
#div_digg{position:fixed;bottom:5px;width:140px;right:30px;border:2px solid #085;padding:10px;background-color:#fff;opacity:0.3;border-radius:5px 5px 5px 5px !important;box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);transition-duration: 0.5s;}#div_digg:hover{opacity:1;}
将下面的样式和Javascript直接复制到 博客设置->设置->页首Html代码:
<style>#back-top {
position: fixed;bottom: 10px;right: 5px;z-index: 99;}#back-top span {
width: 50px;height: 64px;display: block;background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}#back-top a{outline:none}
</style><script type="text/javascript">
$(function() {
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(window).scroll(function() {if ($(this).scrollTop() > 500) {$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}});// scroll body to 0px on click
$('#back-top a').click(function() {$('body,html').animate({scrollTop: 0}, 800);return false;});});</script><p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
在 数据之巅 系列文章中介绍了两种形式的目录导航,按需索取即可。
将下面的Javascript直接复制到 博客设置->设置->页脚Html代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><script type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{var jquery_h3_list = $('#cnblogs_post_body h1');//如果你的章节标题不是h3,只需要将这里的h3换掉即可if(jquery_h3_list.length>0){var content = '<a name="_labelTop"></a>';content += '<div id="navCategory">';
content += '<p style="font-size:16px"><b>阅读目录</b></p>';
content += '<ul>';for(var i =0;i<jquery_h3_list.length;i++){var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到目录</a><a name="_label' + i + '"></a></div>';$(jquery_h3_list[i]).before(go_to_top);var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';content += li_content;}content += '</ul>';content += '</div>';if($('#cnblogs_post_body').length != 0 ){$($('#cnblogs_post_body')[0]).prepend(content);}}}GenerateContentList();</script>
侧边栏公告出显示自己的头像,首先将想要显示的图片上传至博客相册,然后将下面的引用复制到 博客设置->设置->博客侧边栏公告:
<img src="http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_saw_billy.png" alt="嘻哈烧饼的头像" class="img_avatar" width="250px" style="border-radius:50%">
本次博客园美化之旅虽说是我正式发博的开胃菜,但对我这样的前端小菜也是一次对CSS/Javascript的学习和温故的过程。这种高度个性化的形式确实为我增添了几分乐趣,只是这种嵌入式的Javascript难道就没有安全风险么?持续学习,To Be Continued…