很多童鞋对我日志中,主题演示及下载链接按钮很好奇,总是问如何添加的,其实很简单,准备一张按钮图片,然后在文章中加入一个盒子(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 哪一行？ 我放在最后一行，以及中间一行都不行啊。急求解决？谢谢各位！
来自外部的引用