博客园美化_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > 博客园美化

博客园美化

 2016/7/30 5:32:39  嘻哈烧饼  程序员俱乐部  我要评论(0)
  • 摘要:这个博客已经申请快四年了,却一直没有好好利用,悔啊。不过话又说回来,从现在开始行动起来,无悔。此篇博文权当是正式入博的一种仪式、一道开胃菜、一次练手、一场前戏、、、、、、whatever我应该是属于外貌协会中偏理性的一类人,对于自己博客界面当然也不会例外,谁不喜欢嫩嘟嘟水灵灵的皮肤呢,一款好的样式更能激起我阅读更新博客的兴趣,这种来自于外在的客观刺激是不容小觑的。博客园除了可以选择优秀的博客模板外,还可以对选定的模板进行更进一步的自定义,详细介绍请自行前往数据之巅
  • 标签:博客

这个博客已经申请快四年了,却一直没有好好利用,悔啊。不过话又说回来,从现在开始行动起来,无悔。

此篇博文权当是正式入博的一种仪式、一道开胃菜、一次练手、一场前戏、、、、、、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…

发表评论
用户名: 匿名