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

原创 彭淇  2017-10-04 15:39:11  阅读 2261 次 评论 1 条

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

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
版权声明:本文为原创文章,版权归 彭淇 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. 露露
    露露 【县长】  @回复

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