仿异次元百度分享工具条张戈修改版

只要不是高度近视,就会发现张戈博客的文章最近加上了这个仿异次元百度分享工具条。增加这个跟随横条的初衷,其实是最近启用百度两侧漂浮广告后,发现博客左侧的分享条以及右侧的卷动按钮在1280*800分辨率下,会被广告遮盖,有点不爽。于是就想起了以前看到过的这个玩意儿。

前天,经过一番折腾后,如愿以偿的加上了这个功能,感觉挺不错的!当我回访重量网络博客时,发现他的工具条有个很棒的功能,那就是字体大小侧边栏控制,可使用大字体,并开启宽屏浏览!感觉很棒!

于是,就给他留言,想他给下源码。第二天还是没回复我(应该是被多说拉黑了)。。。按耐不住,直接动手扒代码。在取得相应的CSS和图片后,开始了第二轮的折腾!这一轮是痛苦的,也是快乐的。。。。

张戈博客一直以分享为主旨,好东西绝不吝啬!现在把我DIY之后的源码分享出来给有需要的人。

一、模块名称

仿异次元百度分享工具张戈修改版

仿异次元百度分享工具条张戈修改版

二、原版出处

C++爱好者(第①版)、WP大学(第②版)

三、修改内容

①、加入文章字体大小控制按钮;

②、加入文章宽/窄屏浏览控制按钮及颤抖特效;

③、加入工具条随界面一起拉伸/压缩效果;

④、创意修改支付宝捐赠为弹出二维码模式(原创创意,点击可以看到效果)

四、其他说明

①、大体以WP大学的为蓝本,参考第①版以及重量网络的工具条制作。

②、因为支付宝收款主页下线,张戈修改成支付宝新出的扫码支付二维码,算是弥补了这个按钮的空缺,虽说没人给俺付款。。。。

③、弹出二维码需要主题支持暗箱功能,比如知更鸟。不支持的请自行加入暗箱功能,比如安装暗箱插件。

五、添加步骤

①、下载share.zip

下载解压后得到share文件夹,上传到WordPress当前主题目录下。

②、调用代码

Ps:先行调用,是为了后面修改后的即时测试预览。

首先,在主题function.php里面添加获取特色图片函数(添加前请先检查是否已存在此函数):

接着,打开主题的文章模版,一般是single.php,在文章(副)标题下面添加如下代码:

下图为张戈博客所放位置,仅供参考:

仿异次元百度分享工具条张戈修改版

 

然后,在header.php里面添加CSS调用代码:

最后,在footer.php里面添加JS调用代码,完成部署:

②、按照实际情况修改代码:

share.php

第16、70行中的ID请修改成你自己的百度分享ID;

第26、27、28行是字体控制按钮,适合知更鸟主题,其他主题请自行百度修改。

第52行,请改成收款二维码的实际路径(后文将会简单说明如何制作这个二维码)

最麻烦也是最重要的一步来了。。。

share_roll.js

文件的上下部分无需修改,就不贴出来了。以下代码中的第6~13、18~26行内容,请根据实际CSS标签名和对应宽度修改。

6~13表示隐藏侧边栏之后,需要变宽的那些标签元素;18~26则表示恢复侧边栏,需要变窄的那些元素。

Ps:行数不是固定的,具体根据宽度发生改变的标签元素而定。如果宽度一样,理论上可以合并成一行。

但是如何确定这些标签元素名称(id名、class名),及宽度呢?

张戈使用的是 看文章模版single.php源码+谷歌开发模式查看元素 的方法,找到需要变化的元素,并且确定他们前后的宽度的。使用知更鸟主题的博客基本上可以直接使用,不用修改!其他主题博客,请自行修改(估计新手会挺苦逼的,不过也能学到不少东西...),张戈仅提供如下参考图:

仿异次元百度分享工具条张戈修改版

 

③、制作收款二维码

支付宝应该是为了强推手机支付宝,下线了收款主页,推出了支付宝条码支付功能。

前往并登陆:https://qr.alipay.com/paipai/personal.htm 就可以按照向导制作你的专属收款二维码了!

仿异次元百度分享工具条张戈修改版

仿异次元百度分享工具条张戈修改版

 

下载二维码图片之后,请上传到share.php第52行相应位置(路径和文件名一致即可,没弄好的话,有人给你付款那就到张戈的腰包了哦!)。

如果,以上操作无误的话,恭喜你,仿异次元百度分享工具条张戈修改版就添加成功了!赶紧打开文章试下吧!添加中有任何问题,欢迎在下面留言反馈!

如果添加成功,高兴的话可以给张戈赏点零花钱,AD赞助,或者扫码赏赐张戈一杯咖啡或是一杯香茗亦可,*^_^*

文件下载

博客小广告:网络加速服务推荐(点击图片查看)

网络加速

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:108   其中:访客  73   博主  35

  1. 余人陶艺 1 来自天朝的朋友 谷歌浏览器 Windows 7 天津市 电信IDC机房

    这个滑动提交评论也很棒呀,还有选词复制、搜索,博主这个站很多细节地方很用心

  2. 龙笑天 5 来自天朝的朋友 火狐浏览器 Windows 7 湖北省武汉市 鹏博士长城宽带

    你好,这个js里的width怎么改成max-width后点击按钮就没反应了。为啥呢?
    PS:你这回复了,我怎么没收到邮件呢…

  3. 龙笑天 5 来自天朝的朋友 火狐浏览器 Windows 7 湖北省武汉市 鹏博士长城宽带

    终于弄出来了 :oops: ,谢谢此教程!看效果

加载中,请稍候...