早在几周前,就有人跟水冷眸提过鸟叔的点赞分享打赏的样式很好看,水冷眸也去看了,确实不错,并且将之应用到Solome主题里面了。恰好,今天百度上也有人提问,鸟叔的点赞分享打赏实现方法,水冷眸顺势就回答了,不过由于篇幅问题,写的不甚详细,所以,这里出一篇详细的教程。
需要注意的是,水冷眸的Tooltip特效采用的是Jbox的插件,不确定是否会与你们本身的主题特效有冲突。还有的就是,动手之前,记得备份,养成好习惯!
下面开始教程,首先附上截图一张,或者移至本文底部查看效果。

移植知更鸟的点赞、分享、打赏的样式教程-萌草酱

1、html代码

上面这段代码,添加到single.php里面,具体位置自己调整,需要注意的是,代码中有个的代码,这是调用fontawesome图标字体的代码,如果你的主题没有采用fontawesome图标字体的代码,可能需要你另行载入fontawesome字体的文件,或者是替换成你主题所采用的图标字体;

2、css代码

这一段、可以直接添加到主题style.css里面;PS:部分主题可能不是直接主题根目录下style.css里面写css代码,遇到此情况,可以将此css代码添加到任何一个页面有载入的CSS文件即可

3、关于点赞的js代码

这段js,作用于点赞样式,直接将其添加到你主题的任意一个js文件里面。

到此,如果环节不出错,样式已经可以在你的文章中正常显示的,但是关于打赏、分享这两个样式,尚未处理完成,知更鸟采用的是点击弹出相关的模态窗口的样式。水冷眸将其变成了Tooltip样式效果,在本文,Tooltip的实现水冷眸直接使用Jbox这个插件。

首先,引入jbox相关的js以及css文件。

(PS:Jbox需要jquery库的支持,大部分主题都已经默认有引入的,如果没有,请自行百度。)

上面的两个引入文件,为官方的cdn地址,速度如何未曾测试,如果嫌速度慢,可以在本文末尾,自行下载文件将其放进主题内引入。

引入了Jbox相关文件之后,我们开始开始处理打赏、分享这两个Tooltip样式效果。

打赏js、分享Tooltip样式js、百度分享js:

上面这段代码,其中第四行,将里面的图片地址替换为你的支付宝付款码地址,然后将整段代码放在footer.php文件,就大功告成了。

附上Jbox下载地址:https://codeload.github.com/StephanWagner/jBox/zip/v0.3.2