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

2010年12月24日16:12:13 116 21,295

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

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

  1. <div id="demo"><a href="http://zmingcx.com/">主题演示</a></div>
  2. <div id="download"><a href="http://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="http://zmingcx.com">主题下载</a></div></td>
  8. </tr>
  9. </tbody>
weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:116   其中:访客  68   博主  4   引用   34

    • 游戏评测网 1

      好方法,这就去加上。

      • ilove3d 2

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

        • ilove3d 2

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

          • 奋而不斗 1

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

            • hzqedison 1

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

                • 知更鸟 Admin

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

                    • hzqedison 1

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

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

                      谢谢!

                        • 知更鸟 Admin

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

                    • hidoo 1

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

                      • 钻石之地 2

                        不错,受用,谢谢分享

                        • 落梵 1

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

                          • dlzj4508 1

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

                            • 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

                                        • WWW.TUIKEW.com 2

                                          主题演示
                                          主题下载</div

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

                                          • 分享吧 0

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

                                          • 来自外部的引用: 34

                                            • hotnewspro plus主題使用說明[繁中]歐塔庫部落 | 歐塔庫部落
                                            • WordPress主题:HotNews Pro 2.7 | Xiaoswift's Website
                                            • 本站主体功能 | 漯彬客
                                            • WP主题丨HotNews Pro 2.7 | ZIISA's World
                                            • WordPress主题:HotNews Pro 2.7Plus | CN站
                                            • WordPress主题:HotNews Pro 2.7 | 360ITO技术社区
                                            • HotNews Pro 2.7主题使用说明 | 老萨工作室
                                            • WordPress主题:HotNews Pro 2.7 | fish的小站
                                            • WordPress主题:HotNews Pro 2.7 | 百度王
                                            • 为日志中的链接添加一个按钮 | 李辉的博客
                                            • WordPress主题:HotNews Pro 2.7 | 58迷你空间
                                            • 模板使用说明 | 千度电脑网
                                            • WordPress主题:HotNews Pro 2.7 – XiaoXiao Photo Blog
                                            • HotNews Pro 2.7主题使用说明 | 三雨二草
                                            • 用Smart Apache搭建Wordpress本地测试环境 | RGQ
                                            • 为日志中的链接添加一个按钮 | 开溜网
                                            • 为日志中的链接添加一个按钮(转) | 开溜网
                                            • sfsf | 798
                                            • Read more 链接更换为按钮 | 螳螂虾
                                            • HotNews Pro 2.7主题使用说明 | 水月阁
                                            • WordPress主题:HotNews Pro 2.7 | 西楚seo
                                            • 为日志中的链接添加一个按钮 | 杂客网
                                            • 为日志中的链接添加一个按钮 | Darren的个人博客
                                            • 更之鸟2.7模板HotNewspro27Plus | 德宇免费网
                                            • [每周推荐]强大集合各种功能的主题 — HotNews Pro 2.7 | Lwesn!
                                            • 如何为WordPress日志中的链接添加一个按钮 | 金钱网络
                                            • 更之鸟2.7模板HotNewspro27Plus | JiHong
                                            • 初识DIV+CSS图片调用 | 小白之家
                                            • 本主题使用说明 | 石家庄SEO
                                            • WordPress主题:HotNews Pro 2.7(转) | 酸甜苦辣
                                            • 为日志中的链接添加一个按钮 | 千壹网 cheeyeebuy.com
                                            • 耕博网站主题分享(HotNews) | 耕博空间
                                            • 为日志中的链接添加一个按钮 | 乌托『不再』邦
                                            • 为日志中的链接添加一个按钮 | 乌托『不再』邦