为日志中的链接添加一个按钮

知更鸟
知更鸟
站长
2331
文章
0
粉丝
WordPress11621,914阅读模式

很多童鞋对我日志中,主题演示及下载链接按钮很好奇,总是问如何添加的,其实很简单,准备一张按钮图片,然后在文章中加入一个盒子(DIV),几行CSS样式就可作出这个效果,现在就教大家如何添加这个按钮效果.

首先,在编辑日志时切换到代码模式(HTML),在适当位置加入以下代码:

  1. <div id="demo"><a href="https://zmingcx.com/">主题演示</a></div>
  2. <div id="download"><a href="https://zmingcx.com/">主题下载</a></div>

接着再把以下样式文件加到主题的style.css中:

  1. #download {
  2. background: url(images/dd.png) no-repeat;
  3. width:105px;
  4. height:25px;
  5. color: #fff;
  6. padding-left:15px;
  7. }
  8. #demo {
  9. background: url(images/dd.png) no-repeat 0 -25px;
  10. width:105px;
  11. height:25px;
  12. color: #fff;
  13. padding-left:15px;
  14. }

把下面这张按钮图片上传到主题的图片目录中,一般是images文件夹
为日志中的链接添加一个按钮

具体参数可作适当修改

我文章中加入的代码用table表格进行定位,完整代码如下:

  1. <table border="0" width="240" align="center">
  2. <tbody>
  3. <tr>
  4. <td width="120" height="25">
  5. <div id="demo"><a href="http://demo.zmingcx.com/">主题演示</a></div></td>
  6. <td width="120" height="25">
  7. <div id="download"><a href="https://zmingcx.com">主题下载</a></div></td>
  8. </tr>
  9. </tbody>

本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  116  访客  68  作者  4
    • 上海晒客
      上海晒客 1

      正需要 谢谢鸟哥!

      • 喽啰
        喽啰 3

        谢谢!

        • lw0
          lw0 4

          好办法,留下备用

          • 小屁人
            小屁人 6

            其实可以更方便的,在后台编辑器添加按钮,类似添加代码高亮插件的按钮代码一样,这个网上都有教程,哈哈

            还有大家注意css里的图片路径,如果放到主题的images里就要删除前面的父路径 ../
            否则不显示的!

            已装好代码,给个演示,AD……哈哈
            http://xiaopiren.com/u0026quotyou-are-the-one-2u0026quot-dvd-download

              • xuan律
                xuan律 5

                @ 小屁人 提醒的好,不是很懂代码的人很容易忽悠掉,加分,呵呵

                • 苹果
                  苹果 5

                  @ 小屁人 原来如此,试试看

                • 蛋糕
                  蛋糕 4

                  手机支持不容易。收藏了。

                  • 大志若勇
                    大志若勇 4

                    支持鸟哥,呵呵

                    • 蓝莓绿茶
                      蓝莓绿茶 4

                      你太无私了~呵呵

                      • 小屁人
                        小屁人 6

                        鸟哥啊,我感觉首页新添的标签还不如放到侧边哪,放到上面效果不是很好啊!感觉破坏整体风格了!

                        • wmtimes
                          wmtimes 7

                          这个按钮和主题风格很是搭配。

                          • 优趣
                            优趣 2

                            Happy Christmas Eve !

                            • 嗜睡的蚂蚁
                              嗜睡的蚂蚁 1

                              哈哈,不错,转了~~

                              • lw0
                                lw0 4

                                鸟兄,你的搜索栏放大镜掉下来了!!

                                  • 小屁人
                                    小屁人 6

                                    @ lw0 你的什么浏览器?我的好像没有啊?

                                      • lw0
                                        lw0 4

                                        @ 小屁人 我用的搜狗,IE7内核

                                          • 小屁人
                                            小屁人 6

                                            @ lw0 直接用ie试试,不同浏览器支持的代码不一样!兼容性不一定能全部做好!

                                              • lw0
                                                lw0 4

                                                @ 小屁人 试过了,建议其他人试一下

                                              • 知更鸟
                                                知更鸟

                                                @ lw0 嗯,这个问题会修正的

                                          • 易维营销seo
                                            易维营销seo 5

                                            鸟哥的东西总是经典,每天都来转转

                                            • lostalps
                                              lostalps 4

                                              鸟大加油!分享更多新手喜欢的东西!

                                              • aunsen
                                                aunsen 5

                                                鸟哥V5!

                                                • steve
                                                  steve 3

                                                  和我的SCOOL主题里的设计有点相似,不过没有采用table

                                                    • 小屁人
                                                      小屁人 6

                                                      @ steve 一点都不像,你的scool太杂乱,还是鸟哥的这个简洁大方!关键是鸟哥的这个完全免费,“售后”一流!

                                                    • lovesoo
                                                      lovesoo 5

                                                      原来是这样 收藏+学习了···

                                                      • 外贸业务员
                                                        外贸业务员 0

                                                        鸟哥的东西总是经典,每天都来转转

                                                        • 7silen
                                                          7silen 4

                                                          为什么我的字体颜色不是白的 而是黑色的

                                                            • 小屁人
                                                              小屁人 6

                                                              @ 7silen 你博客好慢啊!你检查下css有没有复制错的?

                                                                • 7silen
                                                                  7silen 4

                                                                  @ 小屁人 不会吧我 博客国内的服务器。

                                                              • xqiushi
                                                                xqiushi 5

                                                                鸟哥,我太需要你这个了。谢谢

                                                                • 山寨惹人爱
                                                                  山寨惹人爱 3

                                                                  小屁人的方法有没有详细操作?我用鸟哥的这个好像不行,汗一个先

                                                                  • 过马路不看灯
                                                                    过马路不看灯 1

                                                                    弄了弄没成功 小屁人说的父路径不知道去哪里删除 知道的说下。。谢谢了

                                                                    • 善良的小狗
                                                                      善良的小狗 1

                                                                      这一个怎么再后台天际一个固定的按钮囊

                                                                      求解释

                                                                      • svcoo
                                                                        svcoo 4

                                                                        挺实用,自己的博客外观方面不怎么,学习美化一下自己的博客

                                                                        • Town
                                                                          Town 0

                                                                          鸟哥的东西真不错哈,呵呵

                                                                          • 不着调
                                                                            不着调 3

                                                                            东西很是不错的哦

                                                                            • 有鱼
                                                                              有鱼 4

                                                                              鸟哥,问一下你文章中显示代码样式用的是什么插件,我安装了一个不是很好用。

                                                                              • Leejoa
                                                                                Leejoa 3

                                                                                鸟哥,在你完整代码的后面是否还要加
                                                                                【/table】这样才完整呢

                                                                                • 约定
                                                                                  约定 3

                                                                                  鸟哥,有透明背景按钮的吗,我主题是黑色的

                                                                                  • 鸿鹄博客
                                                                                    鸿鹄博客 1

                                                                                    table表格代码最后少了个
                                                                                    我现在用的是鸟哥的主题,可以说是经过精挑细选的,支持鸟哥,不知可否加个友情链接

                                                                                    • 亿品元素
                                                                                      亿品元素 3

                                                                                      这个功能不错

                                                                                      • 王长江
                                                                                        王长江 3

                                                                                        很喜欢鸟哥的这个主题,马上就去试试这个功能

                                                                                        • maxling
                                                                                          maxling 1

                                                                                          再次学习!

                                                                                          • pangel
                                                                                            pangel 0

                                                                                            强大的主题,不顶不行啊!!!!

                                                                                            • 明志达
                                                                                              明志达 0

                                                                                              很好哦。。

                                                                                              • 魅力临沂
                                                                                                魅力临沂 3

                                                                                                不错,很喜欢,我先试试

                                                                                                • jackey1203
                                                                                                  jackey1203 3

                                                                                                  看看头像是不是变化了

                                                                                                  • 淘宝网女鞋
                                                                                                    淘宝网女鞋 3

                                                                                                    非常好,改天一定亲自测试~~

                                                                                                    • Win7en乐园
                                                                                                      Win7en乐园 8

                                                                                                      我又来学习了,鸟哥,我已经升级新主题了!等赚到钱了,就来捐助你!谢谢你

                                                                                                      • LEGEND
                                                                                                        LEGEND 2

                                                                                                        很有用哈,十分感谢。

                                                                                                        • 游戏评测网
                                                                                                          游戏评测网 1

                                                                                                          好方法,这就去加上。

                                                                                                          • ilove3d
                                                                                                            ilove3d 2

                                                                                                            鸟哥 不知道这个问题有人提过没。 最新文章的热度 怎么一直显示是零啊?

                                                                                                            • ilove3d
                                                                                                              ilove3d 2

                                                                                                              还有 wp编辑器怎么换回 原来自带的? 文章评论内容总是显示匿名,刷新一下就没有了。 重装了WP 禁用了查件 都没法解决。

                                                                                                              • 奋而不斗
                                                                                                                奋而不斗 1

                                                                                                                我弄了几次也没成功,用的UFO的cms主题,他的css文件是在主题目录里的子目录里的
                                                                                                                /wp-content/themes/UFO/themes/UFO_Cms/STYLE/UFO_Cms.css
                                                                                                                代码应该加在哪啊,主题目录里的style.css里面是空的

                                                                                                                • hzqedison
                                                                                                                  hzqedison 1

                                                                                                                  如果这个下载按钮 要出现在摘要 首页 怎么搞? 样子就是两个并列“阅读全文”“下载主题”这样的。

                                                                                                                    • 知更鸟
                                                                                                                      知更鸟

                                                                                                                      @ hzqedison 此文的方法不能应用到摘要中

                                                                                                                        • hzqedison
                                                                                                                          hzqedison 1

                                                                                                                          @ 知更鸟 谢谢答复。如果要做成“阅读全文”“下载主题” 在摘要中显示应该怎么写?或者说有插件吗?

                                                                                                                          在正文中可能“阅读全文”按钮就没有了,需要同时存在“返回”和“下载主题”按钮又应该怎么写?

                                                                                                                          谢谢!

                                                                                                                            • 知更鸟
                                                                                                                              知更鸟

                                                                                                                              @ hzqedison 你不会认为,在留言中就能教会你作模版吧?

                                                                                                                        • hidoo
                                                                                                                          hidoo 1

                                                                                                                          哈哈,很使用的技巧!又学到新的东西了!

                                                                                                                          • 钻石之地
                                                                                                                            钻石之地 2

                                                                                                                            不错,受用,谢谢分享

                                                                                                                            • 落梵
                                                                                                                              落梵 1

                                                                                                                              每次发文章都要另加代码!~麻烦!~~

                                                                                                                              • dlzj4508
                                                                                                                                dlzj4508 1

                                                                                                                                鸟哥 好像我的调用不了图片!~

                                                                                                                                • dlzj4508
                                                                                                                                  dlzj4508 1

                                                                                                                                  鸟哥(images/dd.png) 应该是这样写得吧(“images/dd.png”)否则就会出现无法调用图片的! 我的是那样 不知道你的是不是!~

                                                                                                                                  • 电动轮椅
                                                                                                                                    电动轮椅 1

                                                                                                                                    加油

                                                                                                                                    • 花鼓子
                                                                                                                                      花鼓子 2

                                                                                                                                      来看看

                                                                                                                                      • 网络菜鸟帮
                                                                                                                                        网络菜鸟帮 0

                                                                                                                                        感谢鸟哥提供这么好的主题,庆幸鸟哥这么细心、负责

                                                                                                                                        • 花飞
                                                                                                                                          花飞 1

                                                                                                                                          鸟哥,当鼠标放在链接上的时候,右下角的提示框怎么去掉呀,感觉挡住视线了,不怎么好!像你的博客一样,右下角就没有了提示框,而是在鼠标右侧。

                                                                                                                                            • 开溜网
                                                                                                                                              开溜网 2

                                                                                                                                              @ 花飞 我这里有解决办法,你可以去看看!
                                                                                                                                              http://kailiuwang.net/the-robin-hotnewspro-template-how-to-get-a-title-to-display-normal-not-in-the-lower-right-corner.html

                                                                                                                                                • 花飞
                                                                                                                                                  花飞 1

                                                                                                                                                  @ 开溜网 谢谢哥了!

                                                                                                                                              • WWW.TUIKEW.com
                                                                                                                                                WWW.TUIKEW.com 2

                                                                                                                                                主题演示
                                                                                                                                                主题下载</div

                                                                                                                                                鸟哥 你丢了闭标签, 怪不得,我开始测试的时候不能显示,跟后面的DIV标签重合还是什么回事。还是得按照W3C标准来。

                                                                                                                                                • 分享吧
                                                                                                                                                  分享吧 0

                                                                                                                                                  为什么我的不能够显示按钮图片呢?还只能显示文字链接形式,不见图片。 各位该怎么解决? 代码应该放在主题下的style.css 哪一行? 我放在最后一行,以及中间一行都不行啊。急求解决?谢谢各位!

                                                                                                                                                • 来自外部的引用

                                                                                                                                                匿名

                                                                                                                                                发表评论

                                                                                                                                                匿名网友
                                                                                                                                                :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                                                                                                                                拖动滑块以完成验证