当前位置:首页 > 软件和技术分享 > 正文内容

zblog侧边栏如何实现一图三按钮的效果?

彭淇3年前 (2017-10-04)软件和技术分享29621

可能有的人不太明白什么是一图三按钮的效果,其实就是在侧边栏某一个文本工具中显示有一张图片和三个链接按钮,具体效果请移步参观飞翔勿扰博客站点侧边的一图三按钮效果,或见下图所示:

zblog侧边栏如何实现一图三按钮的效果?  系统 博客 模板 emlog 第1张

其实这个一图三按钮效果,虽然每次都说这个是比较简单的代码,直接浏览器中查看元素复制相应的 HTML 代码及 CSS 代码即可,但是还是有很多人不太懂得如何下手去折腾,所以今天就特意把它写成教程,以便让更多喜欢这个效果的博主们能够用上它



侧边栏实现一图三按钮效果步骤





  1. 将以下 CSS 代码添加到所使用主题的 style.css 文件中

    

#update_version img{margin:5px 0 15px}
#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff}
.blog_link{background-color:#2ba9fa}
.blog_link,.cms_link{float:left;margin-right:5%}
.cms_link{background-color:#ff6969}
.grid_link{float:left;background-color:#70c041}


       2.登录站点后台 >>侧边栏 >> 将『文本』小工具添加到指定侧边栏中。



    3.接着输入标题(可选,可不输入),然后将以下代码添加进去并保存即可


zblog侧边栏如何实现一图三按钮的效果?  系统 博客 模板 emlog 第2张

<div id="update_version"><a target="_blank" href="http://www.pengqi.club"><img src="https://www.pengqi.club/tg1.jpg" title="飞翔勿扰博客" alt="飞翔勿扰博客"></a><a target="_blank" href="https://www.pengqi.club/?plugin=tougao/" class="blog_link">我要投稿</a><a target="_blank" href="https://www.pengqi.club/13.html" class="cms_link">在线留言</a><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=715366739&site=qq&menu=yes
" class="grid_link">联系博主</a></div>

说明其他代码不用修改,只需将代码中的链接名称及链接地址等内容修改成自己想要的名称及地址即可。



温馨提示

这个一图三按钮的效果,不单单适用于 emlog,也适用于 zblogPHP 站点的侧边栏,更是适用于其他程序所见的站点侧边栏。当然,如果添加到不到侧边栏的地方应该也是可以,具体效果请自行测试和修改。



扫描二维码至手机访问

扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

转载请注明出处:https://www.pengqi.club/blog/135.html

分享给朋友:

相关文章

让Console漂亮起来,在浏览器控制台添加网站说明

让Console漂亮起来,在浏览器控制台添加网站说明

让喜欢按F12的访客不至于看到空空的控制台,console打印的文字是可以添加样式的,不过不是全部css效果都有效,这里只介绍一小部分样式。    \n是换行,...

QQ装机必备合集包 2018.05.14

QQ装机必备合集包 2018.05.14

装机必备合集包产品简介: 装机必备合集包是为了方便广大网友更加快捷便利地推广产品和赚取积分而倾力打造的。集成了腾讯电脑管家、QQ浏览器等最赚钱计费产品以及微信PC版,QQ等装机必备软件。所有软件可以根...

新浪微博一件关注html代码

新浪微博一件关注html代码

这几天在完善博客内容,想增加一个新浪微博的关注,但是并没有找到html的,一般都是增加head和js标签的,因为之前弄过这个,所以找了一下之前的代码,代码如下:<iframe width=&qu...

如何给你的网站加上favicon.ico图标

如何给你的网站加上favicon.ico图标

如何给你的网站加上fvicon.ico图标,第一步在线生成favicon.ico文件,第二步上传ico文件到网站目录,第三部在</head&...

自定义博客侧边栏添加百度一下的方法

自定义博客侧边栏添加百度一下的方法

自定义博客网站侧边栏添加百度一下组件,进行seo优化,也可作为其他使用  首先进入你的博客网站后台-->找到侧边栏-->自定义一个组件-->名称随意啊,然后在框里写入一下代...

图片无损放大工具Benvista PhotoZoom Pro 7.0.6 中文多语免费版

图片无损放大工具Benvista PhotoZoom Pro 7.0.6 中文多语免费版

今天给小伙伴们整理分享一款图片无损放大工具Benvista PhotoZoom Pro 7.0.6 中文多语免费版。 图片无损放大(BenVista PhotoZoom Pro 中文...

评论列表

露露
露露
3年前 (2017-10-04)

[code][S19]好羞射,文章真的好赞啊,顶博主![/code]

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。