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

知更鸟
知更鸟
知更鸟
站长
2584
文章
0
粉丝
WordPress11622,184阅读模式

很多童鞋对我日志中,主题演示及下载链接按钮很好奇,总是问如何添加的,其实很简单,准备一张按钮图片,然后在文章中加入一个盒子(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
    • 游戏评测网
      游戏评测网

      好方法,这就去加上。

      • ilove3d
        ilove3d

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

        • ilove3d
          ilove3d

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

          • 奋而不斗
            奋而不斗

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

            • hzqedison
              hzqedison

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

                • 知更鸟
                  知更鸟

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

                    • hzqedison
                      hzqedison

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

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

                      谢谢!

                  • hidoo
                    hidoo

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

                    • 钻石之地
                      钻石之地

                      不错,受用,谢谢分享

                      • 落梵
                        落梵

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

                        • dlzj4508
                          dlzj4508

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

                          • dlzj4508
                            dlzj4508

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

                            • 电动轮椅
                              电动轮椅

                              加油

                              • 花鼓子
                                花鼓子

                                来看看

                                • 网络菜鸟帮
                                  网络菜鸟帮

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

                                  • 花飞
                                    花飞

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

                                      • 开溜网
                                        开溜网

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

                                          • 花飞
                                            花飞

                                            @ 开溜网 谢谢哥了!

                                        • WWW.TUIKEW.com
                                          WWW.TUIKEW.com

                                          主题演示
                                          主题下载</div

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

                                          • 分享吧
                                            分享吧

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

                                          • 来自外部的引用

                                          匿名

                                          发表评论

                                          匿名网友

                                          拖动滑块以完成验证