很多童鞋对我日志中,主题演示及下载链接按钮很好奇,总是问如何添加的,其实很简单,准备一张按钮图片,然后在文章中加入一个盒子(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
很有用哈，十分感谢。
天津市 41F
好方法，这就去加上。
北京市 42F
鸟哥 不知道这个问题有人提过没。 最新文章的热度 怎么一直显示是零啊？
中国 B1
@ ilove3d 那不是神马热度，是评论数
北京市 43F
还有 wp编辑器怎么换回 原来自带的？ 文章评论内容总是显示匿名，刷新一下就没有了。 重装了WP 禁用了查件 都没法解决。
山东省 44F
我弄了几次也没成功，用的UFO的cms主题，他的css文件是在主题目录里的子目录里的
/wp-content/themes/UFO/themes/UFO_Cms/STYLE/UFO_Cms.css
代码应该加在哪啊，主题目录里的style.css里面是空的
广东省珠海市 45F
如果这个下载按钮 要出现在摘要 首页 怎么搞？ 样子就是两个并列“阅读全文”“下载主题”这样的。
中国 B1
@ hzqedison 此文的方法不能应用到摘要中
广东省珠海市 B2
@ 知更鸟 谢谢答复。如果要做成“阅读全文”“下载主题” 在摘要中显示应该怎么写？或者说有插件吗？
在正文中可能“阅读全文”按钮就没有了，需要同时存在“返回”和“下载主题”按钮又应该怎么写？
谢谢！
中国 B3
@ hzqedison 你不会认为，在留言中就能教会你作模版吧？
贵州省贵阳市 46F
哈哈，很使用的技巧！又学到新的东西了！
上海市 47F
不错，受用，谢谢分享
广东省广州市天河区 48F
每次发文章都要另加代码！~麻烦！~~
上海市 49F
鸟哥 好像我的调用不了图片！~
上海市 50F
鸟哥(images/dd.png) 应该是这样写得吧(“images/dd.png”)否则就会出现无法调用图片的！ 我的是那样 不知道你的是不是！~
上海市 51F
加油
湖北省荆州市 52F
来看看
河南省南阳市 53F
感谢鸟哥提供这么好的主题，庆幸鸟哥这么细心、负责
湖南省衡阳市 54F
鸟哥，当鼠标放在链接上的时候，右下角的提示框怎么去掉呀，感觉挡住视线了，不怎么好！像你的博客一样，右下角就没有了提示框，而是在鼠标右侧。
湖北省恩施州 B1
@ 花飞 我这里有解决办法，你可以去看看！
http://kailiuwang.net/the-robin-hotnewspro-template-how-to-get-a-title-to-display-normal-not-in-the-lower-right-corner.html
湖南省衡阳市 B2
@ 开溜网 谢谢哥了！
山东省青岛市 55F
主题演示
主题下载</div
鸟哥 你丢了闭标签， 怪不得，我开始测试的时候不能显示，跟后面的DIV标签重合还是什么回事。还是得按照W3C标准来。
河南省周口市 56F
为什么我的不能够显示按钮图片呢？还只能显示文字链接形式，不见图片。 各位该怎么解决？ 代码应该放在主题下的style.css 哪一行？ 我放在最后一行，以及中间一行都不行啊。急求解决？谢谢各位！
来自外部的引用