博客园已经很不错了,但作为比较“挑剔”的用户,在使用的过程中,还是有一些地方不爽的。

我不是一个专业的前台程序员,也只能凭借自己蹩脚的JS和CSS知识完成对页面的小改造(专业的大虾莫要鄙视呀。。)。

这里给大家分享出来,博大家一笑。觉得有用的可以直接拿去。(本来也没啥技术含量的)



先说说我不习惯的部分:

1、在大概扫一眼别人写的博客的时候,我就有“推荐”或者“反对”冲动,
可是,两个按钮在哪儿呢? 在正文的最底部,我还得拉到最底部才能完成对一篇文章的“批判”。

2、一般比较负责任的博客(篇幅比较小的例外,例如本文),都会有目录,这样读者读起来也方便,直接读自己感兴趣的章节就好了。
于是乎,点击了某段的链接,读完该段之后,想回到目录处。这个时候咋办呢? 我次啊,要么到对底部,点击返回顶部,要么用滚轮滚到顶部。
也许有的人说,那有什么啊。但对于“挑剔”的“懒惰”的我,那简直是噩梦。

3、如果觉得文章比较靠谱,也比较合口味,通常情况下就会关注博主,但是我到哪里找博主呢?
如果没有对模板进行改动的话,博主一般在正文的最底部。

4、如果文章哪里写的比较好,或者哪里写的和自己想的有些出入,我想要“吐槽”,这时候要咋整?
Oh god  还在最底部,作为像我这样记性不好人来说,没准刚滑到底部我就忘了“槽点”了。



开始动手DIY

第一步:查看“推荐”、“反对”的元素

可以看到 “推荐”和“反对” 元素共同在一个ID为 div_digg 的div元素中。图中中间红框部分是该元素的CSS代码。

我想让它锁定在正文的右下方,保持不动。于是就在博客设置->页面定制CSS代码里添加该元素的CSS代码。

#div_digg {
position: fixed;
bottom: 0px;
right: 250px;
padding: 8px 8px 8px 10px;
background-color: #fff;
border: 1px solid #D9DBE1;
}

就可以达到我想要的效果了。这里我想说的是,具体的位置得根据每个人使用的博客模板设定

第二步:在第一步的基础上,往该元素上添加元素“关注博主”。

原理是这样的,在元素中添加一个子元素,子元素有链接到“加关注”的JS函数。

关注的JS函数已经存在了,我能只需要找到这个函数名就可以了。(关于怎么查找的,应该很简单,由于要截很大的图,这里就略过了。)

函数名为c_follow(); 但是你要是用JS功能,你得申请JS权限,给人家发个邮件说明下就好了。

我要做的就是找到父元素,生成一个新元素,添加到父元素中即可。废话少说,看代码。

 <head>
<script type="text/javascript"> /*在div_digg中添加关注链接*/
var div_digg = document.getElementById("div_digg"); var my_div = document.createElement("div");
my_div.style.padding="0 0 5px 0";
my_div.innerHTML = "<a onclick=\"javascript:c_follow"+"();\" href=\"javascript:void(0);\" style=\"font-weight: bold; padding-left: 5px;\">关注 Googny</a>" div_digg.insertBefore(my_div,div_digg.firstChild);
/*添加关注链接结束*/
</script>
</head>

这里要说明一个问题,第9行代码中的onclick属性,我将c_follow(); 分在了字符串的两部分中。 

我这样做的原因是:如果我写成 c_follow();后,在我保存之后再看这段代码,c_follow() 被空字符串代替了。

我明明申请了JS的使用权限的,而且也得到肯定的回复了,为什么还要这样?(现在还不太明白)所以我将函数调用分在了两个字符串的两部分。

效果如下图所示:

第三步:添加"快速评论"和"返回顶部"功能:

先给出代码(在第二步的基础上),再进行分析。

 <head>
<script type="text/javascript">
function focusFunction(){ document.getElementById("tbCommentBody").focus(); } /*在div_digg中添加关注链接*/
var div_digg = document.getElementById("div_digg"); var my_div = document.createElement("div");
my_div.style.padding="0 0 5px 0";
my_div.innerHTML = "<a onclick=\"javascript:c_follow"+"();\" href=\"javascript:void(0);\" style=\"font-weight: bold; padding-left: 5px;\">关注 Googny</a>" div_digg.insertBefore(my_div,div_digg.firstChild);
/*添加关注链接结束*/
/*添加评论快速入口*/
document.getElementById("digg_tips").innerHTML = "<a onclick=\"javascript:focusFunction();\" href=\"javascript:void(0);\" style=\"font-weight: bold; padding-left: 5px;\">快速评论</a>&nbsp;&nbsp;<a href=\"#top\" style=\"font-weight: bold; padding-left: 5px;\">返回顶部</a>"; </script>
</head>

首先 在第3行声明一个函数 focusFunction () ,该函数通过ID获取textarea元素,并获取焦点。

然后在第15行添加元素到digg_tipps元素(其实就是将原来元素里的内容“(请您对文章做出评价)”给覆盖了)。
=====修正未登录客户快速评论无响应bug====

function focusFunction(){
var tbEl = document.getElementById("tbCommentBody");
if(tbEl)
tbEl.focus();
else
window.location.href = "http://passport.cnblogs.com/login.aspx?";
}

=====完毕(那些点反对的人难道是为了帮楼主测试bug的吗?放心,我没有把推荐的响应函数放在反对上。)=====

最终结果如图所示:



好了,这样是不是方便读者许多,虽然没啥技术含量,但是的确很爽。

如果你觉得这个想法不错,分享给更多的人吧,不要钱的哟。

更多内容尽在这里:相关博客一览表

DIY 博客全文界面的推荐、反对、加关注、返回顶部、快速评论等小功能的集成的更多相关文章

  1. 博客圆美化主题推荐之Slience

    博客圆美化主题推荐之Slience 一.前言 本博客美化主题作者为:Esofar,本文仅在教导如何快速把该美化主题应用到自己的博客中,详细部署内容见Silence - 专注于阅读的博客园主题. 二.博 ...

  2. Chrome 插件自定义博客编辑界面

    总觉得博客园的编辑器太白了,特别是在晚上,太明亮了刺眼.在后台设置里面找不到任何可以修改UI的地方,考虑用浏览器插件自己改一下.要是做得好,可以给大家一起用. 新建目录 E:/cnblog.js,添加 ...

  3. Hexo博客部署codingNet静态资源无法加载

    用Hexo搭建的个人博客,部署到github的pages的话,好像百度搜索不到.所以在国内的codingNet的pages服务也一起部署一下,这样方便国内国外搜索引擎收录进来.具体部署教程我是参考这里 ...

  4. SLAM方向公众号、知乎、博客上有哪些大V可以关注?

    一.公众号 泡泡机器人:泡泡机器人由一帮热爱探索并立志推广机器人同时定位与地图构建(SLAM)技术的极客创办而成,通过原创文章.公开课等方式分享SLAM领域的数学理论.编程实践和学术前沿. ​ 经典文 ...

  5. 博客自定义1-皮肤模板 基于SimpleMemory 添加到顶部小按钮

    周五公司事不是很紧,打算好好弄下自己的博客,这是自己学习和记录分享地方, 首先请记得申请js权限,默认不支持的,博主是已经申请通过后的样子 接着先选择cnblogs一个现有的模板,我这个就是在他的模板 ...

  6. 使用LAMP创建基于wordpress的个从博客网站 分类: B3_LINUX 2014-07-15 16:45 800人阅读 评论(0) 收藏

    参考: http://blog.csdn.net/ck_boss/article/details/27866117 一.mysql配置 1.安装mysql yum install mysql-serv ...

  7. lamlmzhang的新博客开通了,欢迎大家的关注

    从这里开始lamlmzhang的java开发之路~!

  8. JavaScript学习系列博客_17_JavaScript中的函数的参数、返回值

    数的形参(形式参数) - 定义函数时,可以在()中定义一个或多个形参,形参之间使用英文逗号隔开:定义形参就相当于在函数内声明了对应的变量但是并不赋值,形参会在调用时才赋值. 函数的实参(实际参数) - ...

  9. 欢迎来到Googny的博客

    本博客主要分享笔者的学习知识,以及工程中遇到的技术问题. 由于笔者技术水平有限,博客不足之处在所难免,还请各位网友不吝交流,共同进步. 一起体会分享的乐趣. JavaScript 部分 该部分深入浅出 ...

随机推荐

  1. MapReduce工作原理图文详解 (炼数成金)

    MapReduce工作原理图文详解 1.Map-Reduce 工作机制剖析图: 1.首先,第一步,我们先编写好我们的map-reduce程序,然后在一个client 节点里面进行提交.(一般来说可以在 ...

  2. case class inheritance

    Scala 禁止case class inheritance case class Person(name: String, age: Int) case class FootballPlayer(n ...

  3. Visual C++ 6.0静态、动态链接库

    1.什么是静态连接库,什么是动态链接库          静态链接库与动态链接库都是共享代码的方式,如果采用静态链接库,则无论你愿不愿意,lib 中的指令都全部被直接包含在最终生成的 EXE 文件中了 ...

  4. hdu 4672 Present Day, Present Time 博弈论

    看了解题报告才知道怎么做!! 题意:有 N 堆石子和 M 个石子回收站,每回合操作的人可以选择一堆石子,从中拿出一些 放到石子回收站里(可以放进多个回收站,每个回收站可以使用无数次),但每个石子回收站 ...

  5. struts2 request内幕 为什么在struts2用EL表达式可以取值

    不知道大家有没有想过这样一个问题:为什么在action中的实例变量,没有使用request.setAttribute()方法将值添加到request范围内,却能在jsp中用EL表达式取出? 众所周知, ...

  6. MyBatis的动态SQL操作--查询

    查询条件不确定,需要根据情况产生SQL语法,这种情况叫动态SQL,即根据不同的情况生成不同的sql语句. 模拟一个场景,在做多条件搜索的时候,

  7. Servlet的一些细节问题

    Servlet的细节问题 1.一个已经注册的Servlet可以被多次映射即: <servlet> <!-- servlet的注册名 --> <servlet-name&g ...

  8. Python之异常篇 [待更新]

    简介 当你的程序中出现某些 异常的 状况的时候,异常就发生了.例如,当你想要读某个文件的时候,而那个文件不存在.或者在程序运行的时候,你不小心把它删除了.上述这些情况可以使用异常来处理. 假如你的程序 ...

  9. !! UML十四图打油诗记忆法

    http://www.cnitpm.com/pm/7458.html UML十四图打油诗记忆法 UML十四图打油诗记忆法 UML它有十四图 包含静态和动态(分类) 类图构件搞对象(类图.构件图.对象图 ...

  10. 在Ubuntu 12.04安装和设置Samba实现网上邻居共享

    转载:http://www.startos.com/ubuntu/tips/2012031333097.html          有微小改动. Samba 是一款功能强大的共享工具,可以实现与win ...