很多童鞋对我日志中,主题演示及下载链接按钮很好奇,总是问如何添加的,其实很简单,准备一张按钮图片,然后在文章中加入一个盒子(DIV),几行CSS样式就可作出这个效果,现在就教大家如何添加这个按钮效果.
首先,在编辑日志时切换到代码模式(HTML),在适当位置加入以下代码:
- <div id="demo"><a href="https://zmingcx.com/">主题演示</a></div>
- <div id="download"><a href="https://zmingcx.com/">主题下载</a></div>
接着再把以下样式文件加到主题的style.css中:
- #download {
- background: url(images/dd.png) no-repeat;
- width:105px;
- height:25px;
- color: #fff;
- padding-left:15px;
- }
- #demo {
- background: url(images/dd.png) no-repeat 0 -25px;
- width:105px;
- height:25px;
- color: #fff;
- padding-left:15px;
- }
把下面这张按钮图片上传到主题的图片目录中,一般是images文件夹
具体参数可作适当修改
我文章中加入的代码用table表格进行定位,完整代码如下:
- <table border="0" width="240" align="center">
- <tbody>
- <tr>
- <td width="120" height="25">
- <div id="demo"><a href="http://demo.zmingcx.com/">主题演示</a></div></td>
- <td width="120" height="25">
- <div id="download"><a href="https://zmingcx.com">主题下载</a></div></td>
- </tr>
- </tbody>
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
上海市长宁区 1F
正需要 谢谢鸟哥！
孟加拉 2F
谢谢！
江苏省常州市 3F
好办法,留下备用
河南省新乡市 4F
其实可以更方便的，在后台编辑器添加按钮，类似添加代码高亮插件的按钮代码一样，这个网上都有教程，哈哈
还有大家注意css里的图片路径，如果放到主题的images里就要删除前面的父路径 ../
否则不显示的！
已装好代码，给个演示，AD……哈哈
http://xiaopiren.com/u0026quotyou-are-the-one-2u0026quot-dvd-download
浙江省杭州市 B1
@ 小屁人 提醒的好，不是很懂代码的人很容易忽悠掉，加分，呵呵
浙江省温州市瑞安市 B1
@ 小屁人 原来如此，试试看
广东省 5F
手机支持不容易。收藏了。
甘肃省兰州市 6F
支持鸟哥，呵呵
四川省成都市锦江区 7F
你太无私了~呵呵
河南省新乡市 8F
鸟哥啊，我感觉首页新添的标签还不如放到侧边哪，放到上面效果不是很好啊！感觉破坏整体风格了！
陕西省西安市 9F
这个按钮和主题风格很是搭配。
广东省潮州市 10F
Happy Christmas Eve ！
四川省成都市 11F
哈哈，不错，转了~~
江苏省常州市 12F
鸟兄,你的搜索栏放大镜掉下来了!!
河南省新乡市 B1
@ lw0 你的什么浏览器？我的好像没有啊？
江苏省常州市 B2
@ 小屁人 我用的搜狗,IE7内核
河南省新乡市 B3
@ lw0 直接用ie试试，不同浏览器支持的代码不一样！兼容性不一定能全部做好！
江苏省常州市 B4
@ 小屁人 试过了,建议其他人试一下
B3
@ lw0 嗯，这个问题会修正的
北京市 13F
鸟哥的东西总是经典，每天都来转转
辽宁省大连市 14F
鸟大加油！分享更多新手喜欢的东西！
陕西省西安市 15F
鸟哥V5！
山东省临沂市 16F
和我的SCOOL主题里的设计有点相似,不过没有采用table
河南省新乡市 B1
@ steve 一点都不像，你的scool太杂乱，还是鸟哥的这个简洁大方！关键是鸟哥的这个完全免费，“售后”一流！
安徽省合肥市 17F
原来是这样 收藏+学习了···
上海市 18F
鸟哥的东西总是经典，每天都来转转
浙江省宁波市 19F
为什么我的字体颜色不是白的 而是黑色的
河南省新乡市 B1
@ 7silen 你博客好慢啊！你检查下css有没有复制错的？
浙江省宁波市 B2
@ 小屁人 不会吧我 博客国内的服务器。
陕西省西安市 20F
鸟哥，我太需要你这个了。谢谢
广西柳州市柳北区 21F
小屁人的方法有没有详细操作？我用鸟哥的这个好像不行，汗一个先
河北省唐山市 22F
弄了弄没成功 小屁人说的父路径不知道去哪里删除 知道的说下。。谢谢了
山东省淄博市 23F
这一个怎么再后台天际一个固定的按钮囊
求解释
浙江省杭州市 24F
挺实用，自己的博客外观方面不怎么，学习美化一下自己的博客
江苏省徐州市 25F
鸟哥的东西真不错哈，呵呵
北京市朝阳区 26F
东西很是不错的哦
内蒙古包头市 27F
鸟哥，问一下你文章中显示代码样式用的是什么插件，我安装了一个不是很好用。
四川省乐山市峨眉山市 28F
鸟哥，在你完整代码的后面是否还要加
【/table】这样才完整呢
广东省肇庆市 29F
鸟哥，有透明背景按钮的吗，我主题是黑色的
山东省青岛市 30F
table表格代码最后少了个
我现在用的是鸟哥的主题，可以说是经过精挑细选的，支持鸟哥，不知可否加个友情链接
广东省广州市天河区 31F
这个功能不错
北京市 32F
很喜欢鸟哥的这个主题，马上就去试试这个功能
江西省吉安市 33F
再次学习！
广东省深圳市 34F
强大的主题，不顶不行啊！！！！
广东省深圳市 35F
很好哦。。
山东省临沂市 36F
不错，很喜欢，我先试试
山东省临沂市 37F
看看头像是不是变化了
广东省东莞市 38F
非常好，改天一定亲自测试~~
河南省信阳市固始县 39F
我又来学习了，鸟哥，我已经升级新主题了！等赚到钱了，就来捐助你！谢谢你
河南省洛阳市 40F
很有用哈，十分感谢。
来自外部的引用