Wordpress超给力滑动导航:土豆右下角订阅

无聊了,逛了逛土豆,发现了右下角的订阅滑动按钮挺不错的,就扒拉下来了。特此给大家分享分享~

特效演示

1234

完整代码

CSS代码

.gbtn{position:fixed;right:0;bottom:30px;z-index:10009;-position:absolute;width:100px}
.gbtn .btn{display:block;position:relative;margin:0 0 5px 0;padding:0;height:20px;line-height:20px;padding:10px;text-decoration:none;border:1px solid #E9E9E9;border-right:0;border-radius:5px 0 0 5px;margin-top:5px;background:#FFF;color:#808080;-webkit-transition:right .3s ease-in-out;-moz-transition:right .3s ease-in-out;-o-transition:right .3s ease-in-out;transition:right .3s ease-in-out}
.gbtn .btn .iconfont{cursor:pointer;font-size:16px;line-height:1em;width:16px;height:16px;overflow:hidden;display:inline-block;vertical-align:text-top;margin-right:10px}
.gbtn .btn:hover{right:0;*margin-left:.01%;text-decoration:none}
.gbtn .clight{width:55px;margin-left:19px;right:-40px}
.gbtn .clight:hover{*right:-19px}
.gbtn .watchcenter,.gbtn .ttop,.gbtn .qrbtn,.gbtn .help{right:-59px}
.gbtn .ttop{display:none}
.gbtn .watchcenter{color:#37A4E3}
.gbtn .watchcenter:hover{background:#37A4E3;color:#FFF}
.gbtn .watchcenter b{position:absolute;top:-12px;left:-12px;display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;background:#F00;border:2px solid #E9E9E9;color:#FFF;font-weight:400;border-radius:20px;font-weight:700}
.gewm{position:relative;right:10px;_margin-right:-9px;width:102px;height:140px;margin-top:10px}
.gewm .qrcode{display:block;width:100%;height:100%;background:#e2e2e2 no-repeat 0 0;border:1px solid #EDEDED}
.gewm .qrcode:hover{background-color:#EAEAEA}
.gewm .close{position:absolute;right:8px;top:8px;display:block;width:8px;height:8px;background:url("http://css.tudouui.com/v3/dist/img/watchlater/global5_33816.png") no-repeat -43px -68px;overflow:hidden;text-decoration:none}
@font-face{font-family:"tuiicon";src:url("http://css.tudouui.com/v3/dist/embed/fonts/tuiicon_33663.eot");src:url("http://css.tudouui.com/v3/dist/embed/fonts/tuiicon_33663.eot?#iefix") format("embedded-opentype"),url("http://css.tudouui.com/v3/dist/embed/fonts/tuiicon_33663.svg#tuiicon") format("svg"),url("http://css.tudouui.com/v3/dist/embed/fonts/tuiicon_33663.ttf") format("truetype"),url("http://css.tudouui.com/v3/dist/embed/fonts/tuiicon_33663.woff") format("woff");font-weight:normal;font-style:normal}
.iconfont{font-family:"tuiicon";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;vertical-align:middle;vertical-align:baseline\9;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{-ms-interpolation-mode:bicubic}

 HTML代码:调用到footer.php中</footer>前。

源代码:仅供参考

<div id="gBtn" class="gbtn"><a href="http://www.tudou.com/watch/" target="_blank" class="btn watchcenter" title="我的订阅"><i class="iconfont"></i><span>我的订阅</span></a><a href="http://www.tudou.com/service/feedback/" target="_blank" class="btn help" title="帮助反馈"><i class="iconfont"></i><span>帮助反馈</span></a><a href="#" class="btn ttop" title="返回顶部" style="display: block;"><i class="iconfont"></i>返回顶部</a><div id="gEwm" class="gewm" style="display: none;"><a class="qrcode" title="立即下载" href="http://mobile.tudou.com/" style="background-image:url(http://i3.tdimg.com/b/20130529/co17.png);" target="_blank"></a><a href="#" class="close" title="关闭"></a></div><a href="#" class="btn qrbtn" target="_blank" title="土豆App" style="display: block;"><i class="iconfont"></i>土豆App</a></div>

修改后的代码

<div id="gBtn" class="gbtn"><a href="http://feed.feedsky.com/Fan_Rss" target="_blank" class="btn watchcenter" title="我的订阅"><i class="iconfont"></i><span>我的订阅</span></a><a href="#" target="_blank" class="btn help" title="帮助反馈"><i class="iconfont"></i><span>帮助反馈</span></a><a href="#" class="btn ttop" title="返回顶部" style="display: none;"><i class="iconfont"></i>返回顶部</a><div id="gEwm" class="gewm" style="display: none;"><a class="qrcode" title="关注我们" href="http://blog.weeiy.com/" style="background-image:url(#);" target="_blank"></a><a href="#" class="close" title="关闭"></a></div><a href="http://i3.tdimg.com/b/20130529/co17.png" class="btn qrbtn" target="_blank" title="关注我们" style="display: block;"><i class="iconfont"></i>关注ME</a></div>

 

请自行修改链接为自己的,更多功能请自行发现!

发表评论
加载中...

相关文章