打造浮动推荐框
最近想把博客改改: 1. 推荐框固定在页面右下角; 2. javascript代码可以直接运行看效果;
这篇说说推荐框固定的事, 其实这个有好多例子, 我看了看 这个人的比较有意思, 参考了一些代码, 我做的效果就看右下角.
转载请注明出处 http://www.cnblogs.com/zaiyuzhong/p/float-digg.html
推荐框的id是div_digg.
首先是css, 没什么好说的自己找吧. (非博客园的网站看到了找到博客园的链接)
其实把css贴在后台管理的页面定制css里就初步满足要求了, 但是仅仅是这样那就不用写博客了.
我也想要能加关注, 能调到评论能回顶部的按钮, 后两个好说:
$('#div_digg').append('<div><a onclick="javascript:document.getElementById("tbCommentBody").focus();" href="javascript:void(0);" style="font-weight: bold; padding-left: 5px;">快速评论</a> <a href="#top" style="font-weight: bold; padding-left: 5px;">返回顶部</a></div>');
哦, 添加这个需要先申请js权限, 样式自己调整吧.(博客园有引用jQuery库, 无需自己再添加)
下面说说加关注怎么弄上去:
查看页面代码发现加关注的js方法c_follow(); 我又不想再直接添加a标签了, 而是把 #author_profile 层里的dom用上:
1 一堆代码
just kidding. 总之找不到 #author_profile_detail . 研究发现这块是异步加载的, 做个定时器吧.
十几分钟过去了~
中间遇见了一个兼容性问题: remove()有兼容问题, 改为removeChild().
还发现在IE下, 把代码添加到window.onload事件中会导致很长时间之后才执行(想到在哪看过Chrome和IE在onload上的区别), 遂改为$('#blog-comments-placeholder').load
//吐槽: 前天抢票装了个360抢票专版, 今天为了测兼容性打开了好多天没用的IE, 发现主页变成了 duba(其余部分忘记了), 还不让改, 囧~ 360浏览器卸了就好了, 再囧.
好了, 实际代码和上面有点出入. 另外我把#author_profile隐藏了. //对于不能跳转的<a>, 我觉得还是onclick事件最后加上'return false;'阻止跳转, href="#"这样写比较好.
你没看见代码? 自行F12.
加关注那块可能有问题, 因为博客园这块是异步修改的, 如果是刷新的话就没问题了. //想找人测测又怕被说是骗关注的T_T
