给头部加个我的微博图标

2011年11月3日22:57:04HotNews主题8410.5K阅读模式

摘要　　有童鞋在http://faq.wopus.org问如何在头部加个关注微博的图标，其他人也可能有此需要，于是把回复内容转过来，供大家折腾玩。　　HotNews主题LOGO右侧有...

有童鞋在http://faq.wopus.org问如何在头部加个关注微博的图标，其他人也可能有此需要，于是把回复内容转过来，供大家折腾玩。

HotNews主题LOGO右侧有一小块空白，很多童鞋可能也一直想挤出些地方放点什么，其实作网页与写书法绘画一样，需要留白，给人更多想象的空间，更有层次感，否则密密麻麻的，看着让人眼花，心烦，不过放个小图标装饰一下也不为过，效果如图。

下面开始。打开所有以header开头的模版文件在：

<?php include('includes/time.php'); ?>

下面加上：

<div class="topimg"><a title="关注微博" target="_blank" href="https://zmingcx.com/">关注微博</a></div>

打开主题样式文件style.css首先把:

.header_c {
width: 980px;
}

改为：

.header_c {
width: 980px;
position:relative;
}

为方便图标定位之用。

随后在这句后面加上一句：

.topimg a {
position: absolute;
background:url(images/dd.png) no-repeat;
top:27px;
right:20px;
width:100px;
height:25px;
text-indent:-10000px;
}

其中的文字、链接及图片可根据自己的喜好更换，左右位置通过修改right:20px控制，本人不写围脖就不加了，提供一张作好的图片。

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

我的微信

本站原创文章转载请注明文章出处及链接，谢谢合作！

获取本主题

598845006

咨询主题请加Q：598845006

多功能主题 Begin

本文由 知更鸟 发表于 2011年11月3日22:57:04
转载请注明：https://zmingcx.com/of-concern-in-the-head-plus-the-icon-of-microblogging.html | 知更鸟

HotNews Pro
HotNews主题

HotNews Pro 2.7 Plus正式版使用说明初步完成

09月15日 138 12.4K

为留言模板添加字数统计

11月25日 126 10.1K

为WordPress添加自定义小工具（widget）

07月23日 53 51.1K

HotNews主题不同分类显示不同的随机缩略图

06月11日 100 7.6K

获取本主题

598845006

咨询主题请加Q：598845006

多功能主题 Begin

评论 84 访客 69 作者 13

火星人 1
2011年11月3日 23:36:43 海南省海口市 1F
回复
火星人表示一定要支持…
不玩微博的路过…
（丶奋斗） 1
2011年11月4日 00:39:28 北京市西城区 2F
回复
菜鸟求教：
鸟哥，关注你的模版好几天了，一直在本地测试，过两天网站正式上线。
关于这个微博的我很喜欢，但是我试过几次了，图标是有显示，但是点击没有反映。
求鸟哥指教。关注微博这句话只需要把链接改成自己的就可以么？
- （丶奋斗） 1
  2011年11月4日 01:18:26 北京市西城区 B1
  回复
  @ （丶奋斗）经过不懂代码的菜鸟反复的测试出最终结果是这样的：.topimg a { 改成.weibo a {
  .weibo a {
  position: absolute;
  background:url(images/dd.png) no-repeat;
  top:25px;
  right:20px;
  width:100px;
  height:30px;
  text-indent:-10000px;
  }
  - 知更鸟
    2011年11月4日 07:26:08 中国 B2
    回复
    @ （丶奋斗）嗯，写的有点匆忙，少打了一个a
高高 3
2011年11月4日 05:04:16 北京市 3F
回复
请教一个问题，为什么在你文章中的图片上有的有放大镜图标有的没有？
- 知更鸟
  2011年11月4日 07:31:47 中国 B1
  回复
  @ 高高那只是图片上画了一个放大镜而已
  - 高高 3
    2011年11月4日 12:28:03 北京市 B2
    回复
    @ 知更鸟哦，明白，能不能实现这个小功能啊，就是自动在缩略图标上添加一个放大镜的按钮？
    - 知更鸟
      2011年11月4日 18:20:13 中国 B3
      回复
      @ 高高视频及图片模版有此功能，没看见？
励志 1
2011年11月4日 10:32:05 山东省临沂市 4F
回复
嗯，做的越来的越好了，等我的站做大了，专门叫你设计一个啊！另外弱弱的问一句，设计一个得多少钱？
高邦设计 5
2011年11月4日 11:33:12 河南省郑州市 5F
回复
打算在页面底部做一排图标挂上。。。正在研究。
- 知更鸟
  2011年11月4日 18:27:35 中国 B1
  回复
  @ 高邦设计友情链接支持图片显示
wmtimes 7
2011年11月4日 12:16:57 重庆市 6F
回复
样式不错
高邦设计 5
2011年11月4日 12:28:13 河南省郑州市 7F
回复
有个小问题请教一下，首页底部导航“返回首页站点地图……网盘图床” 的部分，如何自定义？为什么我自己加链接代码后会错位？
- 知更鸟
  2011年11月4日 18:28:58 中国 B1
  回复
  @ 高邦设计我是使用菜单功添加的自定义链接
博客学吧 1
2011年11月4日 12:49:15 四川省内江市 8F
回复
不知为什么,我也很不喜欢玩微博.
影楼礼品团购 4
2011年11月4日 13:55:22 江苏省无锡市 9F
回复
不错是个好东西学习了
囧闻联播 2
2011年11月4日 14:46:25 北京市 10F
回复
嘿嘿那个问题是我提问的！晒一下
扬州起源 2
2011年11月4日 14:48:30 江苏省扬州市 11F
回复
是啊可以秀美图
东写西读 0
2011年11月4日 15:12:32 江苏省扬州市 12F
回复
请问你的插入代码用的是什么插件，自己美化了吗？
- 知更鸟
  2011年11月4日 18:49:09 中国 B1
  回复
  @ 东写西读教程
  http://zmingcx.com/do-not-realize-wordpress-code-highlight-plugin.html
那年那事那人 2
2011年11月4日 15:47:28 四川省成都市 13F
回复
转到底部和返回顶部的新样式怎么改呀？
小小鱼 4
2011年11月4日 17:25:18 福建省福州市 14F
回复
微博这东西都是只看别人写的呵呵
Always.Life 1
2011年11月4日 18:25:53 辽宁省盘锦市 15F
回复
其实我更喜欢把这个微博换个40×40的小图标放在下面的公告栏右边，可以用来代替“腾讯微博新浪微博” 等
郑州驾校 4
2011年11月4日 18:29:55 浙江省台州市 16F
回复
我来晚了。你们这帮家伙。。。。。。。。。。
屈臣氏官网 5
2011年11月4日 20:45:12 四川省内江市 17F
回复
这个不错，增加了粘连性。谢了鸟哥
罗莱家纺四件套 0
2011年11月4日 20:47:07 四川省内江市 18F
回复
都是只看别人写的
小坚 4
2011年11月4日 21:13:45 广东省广州市 19F
回复
喜欢超简洁的人路过。。。
包头妇科 2
2011年11月4日 21:34:47 内蒙古包头市 20F
回复
一看就是编程高手，可是我不太董那些啊！羡慕啊
aladd设计量贩铺 3
2011年11月5日 01:48:26 天津市 21F
回复
这是个很值得推荐的东西。HOHO~
aladd设计量贩铺 3
2011年11月5日 01:49:08 天津市 22F
回复
矮油，鸟哥右边这个滚动新样式不错哦~ 请知识教程~
科普巴士 6
2011年11月5日 15:06:15 澳门 23F
回复
话说我也没有成功。。。。郁闷～
Win7en乐园 8
2011年11月5日 16:39:56 河南省信阳市固始县 24F
回复
还不错，呵呵
Win7en乐园 8
2011年11月6日 10:58:13 河南省信阳市固始县 25F
回复
鸟哥，怎么让留言板上的留言字数来个限制呢？比如说少于10个字节不能发表。哦
- 知更鸟
  2011年11月6日 11:35:16 中国 B1
  回复
  @ Win7en乐园插件：
  http://wordpress.org/extend/plugins/wp-anti-spamdali/
  - Win7en乐园 8
    2011年11月6日 11:35:52 河南省信阳市固始县 B2
    回复
    @ 知更鸟好的，谢谢表哥！
FansGo商城 0
2011年11月6日 20:14:34 上海市嘉定区 26F
回复
感觉挺好的，呵呵
我爱聊吧 4
2011年11月6日 21:25:40 北京市 27F
回复
喜欢这种图片，但是我是PS盲，不懂。想把新浪的换成腾讯的。
软件酷 5
2011年11月7日 20:50:37 福建省厦门市集美区 28F
回复
可以把那个我的微薄替换成，收藏，分享，等图标，在那个位置很好看！
我尝试过
屈臣氏官网 5
2011年11月8日 21:13:32 四川省内江市 29F
回复
感觉挺好的
电脑租赁 3
2011年11月10日 14:58:15 上海市长宁区 30F
回复
微博是？wordpress 也是微博？
MAGI 4
2011年11月11日 11:57:33 云南省大理州 31F
回复
加上去以后效果不错呀！感谢鸟哥
黄天运博客 4
2011年11月12日 11:19:29 广东省深圳市 32F
回复
文章第三行有东西挡住了，是怪什么？
谢谢！
- 知更鸟
  2011年11月12日 12:44:56 中国 B1
  回复
  @ 黄天运博客 @黄天运博客 :
  怪只能怪你不爱看使用说明
黄天运博客 4
2011年11月12日 13:24:16 广东省深圳市 33F
回复
不行啊。。。
黄天运博客 4
2011年11月12日 13:26:43 广东省深圳市 34F
回复
呵呵说明我看过很多次了鸟哥。
微博好像只能在文章页面显示，首页没有哦。
29的博客 3
2011年11月18日 12:30:06 湖北省武汉市 35F
回复
鸟哥，来看了，知更鸟的主题已经被你优化的不行了，太厉害太强大了，呵呵！
枝辛明雨 1
2011年11月25日 15:12:52 上海市 36F
回复
话说我用它DIY了个 QQ在线状态，谢谢鸟哥折腾
小z 4
2011年11月25日 17:39:48 四川省成都市 37F
回复
请问为什么我回复的楼层是-50 -49 这些呢？怎么解决呢？
- 知更鸟
  2011年11月26日 08:33:15 中国 B1
  回复
  @ 小z 看使用说明中的注意事项
- 中医养生 0
  2012年1月4日 16:18:57 湖南省衡阳市 B1
  回复
  @ 小z 在【讨论】栏目设置一下“分页显示评论”就可以正确显示楼层了！
如何学习seo 1
2011年11月27日 16:06:27 山东省济宁市 38F
回复
await 主题这个主题也是知更鸟的吗？这个主题中友情链接在全站中都显示，怎么才能在首页显示呢？
- 知更鸟
  2011年11月27日 20:46:04 中国 B1
  回复
  @ 如何学习seo 把主题作者版权链接去掉，还跑来问这问那，你们这种人真是让人无语….
流水线 3
2011年11月29日 14:20:03 上海市 39F
回复
技术很牛啊
meibeihu 2
2011年12月1日 13:39:29 陕西省西安市 40F
回复
很好很强大
vileny 1
2011年12月7日 16:18:52 河南省郑州市 41F
回复
你好，鸟哥
用了2.7的模板，分享的功能怎么没了呀，请给支个招，我需要那个功能，谢谢了，发我邮箱好吗？
Mulberry Outlet 3
2011年12月8日 14:13:47 福建省厦门市 42F
回复
我只看看，我不说话
Mulberry Outlet 3
2011年12月16日 13:54:15 福建省厦门市 43F
回复
楼主好！
fdsg 1
2012年1月4日 16:20:02 湖南省衡阳市 44F
回复
鸟哥威武！
楔子 0
2012年1月17日 15:39:17 江苏省无锡市 45F
回复
学习了！
风迷 3
2012年1月23日 16:28:37 上海市 46F
回复
功能很好，，小弟我笨手笨脚还没研究好。
淡定 1
2012年2月27日 13:12:56 内蒙古呼和浩特市 47F
回复
评论头像怎么设置啊？我的怎么没有呢？
- 知更鸟
  2012年2月27日 13:17:45 中国 B1
  回复
  @ 淡定 http://zmingcx.com/for-a-portrait-of-his-own-gravatar.html
  - 淡定 1
    2012年2月27日 15:59:51 内蒙古呼和浩特市 B2
    回复
    @ 知更鸟我申请了，也传了图片，Gravatar里头像变了，但发评论写了这个邮件地址后依然不显示，不知道是什么原因
milanda 1
2012年2月29日 21:29:03 辽宁省阜新市 48F
回复
哥哥为什么我的不显示呢，只在上方显示“关注微博”四个字
Yhan 1
2012年3月10日 17:56:34 河南省濮阳市 49F
回复
我的按照步骤下来显示的不对啊显示到正中间调那个right:20px没反应。
李征 1
2012年3月17日 16:17:38 河南省南阳市邓州市 50F
回复
一直在调试这个微博按键的位置，老是错位到跟 2012年3月17日星期六您是第 1898 位访客这句话平行，不知道是哪里出了错误，求鸟哥帮忙！
- 知更鸟
  2012年3月17日 19:53:16 中国 B1
  回复
  @ 李征如果完全按照教程修改的，不会有问题
yumanutong 6
2012年5月29日 13:27:21 广东省东莞市 51F
回复
鸟哥，我改了，错位也，样式走到中间那里了！
- yumanutong 6
  2012年5月29日 13:51:24 广东省东莞市 B1
  回复
  @ yumanutong OK了，都是我笨，文章中images/dd.png改为自己图片绝对地址，就OK了！
  - 真威武 1
    2012年6月12日 12:41:23 山东省济南市 B2
    回复
    @ yumanutong 我的问题跟你的一样，地址也改了，还是不行，是咋个原因呢
    - yumanutong 6
      2012年6月12日 13:12:45 广东省东莞市 B3
      回复
      @ 真威武今晚加我Q聊，我早上和下午都要上班！
      - 真威武 1
        2012年6月12日 14:32:38 山东省济南市 B4
        回复
        @ yumanutong 好的
        
        真威武 1
        2012年6月12日 15:04:04 山东省济南市 B5
        
        @ 真威武搞定了，哈哈，加上的是绝对地址。
- chachachade 1
  2013年2月10日 23:37:15 广东省广州市 B1
  回复
  @ yumanutong “熊猫烧香”病毒？你的头像怎么那么奇怪？你的电脑中毒了么？
  - yumanutong 6
    2013年2月12日 13:08:51 广东省东莞市 B2
    回复
    @ chachachade 头像和病毒毛线关系？我一直用这个头像
萧怀伦 3
2012年6月22日 14:11:45 浙江省温州市瑞安市 52F
回复
你好，我想在这个位置放上百度的我喜欢按钮请问怎么弄，谢谢！请指点
谷哥100° 2
2012年8月11日 17:43:05 北京市 53F
回复
学习楼主分享，搞定。
beyondme37 4
2012年10月26日 21:25:35 北京市朝阳区 54F
回复
添加了，然后被adblock给屏蔽了。。。那肿么办。。
手机巴士 2
2012年11月3日 14:38:18 福建省福州市 55F
回复
好像是2.7.1用不到，按教程改了，一样不显出来，图片也绝对地址也不行，下版本建议加个关注按键开关，因为现在用这个的多，感谢知更鸟
吴文辉IT博客 3
2012年12月19日 14:29:10 浙江省杭州市 56F
回复
鸟哥，能问下你代码高亮是怎么实现的吗？是用的哪个插件还是？就这篇文章的
- 知更鸟
  2012年12月19日 16:34:11 中国 B1
  回复
  @ 吴文辉IT博客看HotNews Pro 2.7主题使用说明■ 代码高亮

WordPress

Plugins

Web前端

设计资源

给头部加个我的微博图标

HotNews Pro 2.7 Plus正式版使用说明初步完成

为留言模板添加字数统计

为WordPress添加自定义小工具（widget）

HotNews主题不同分类显示不同的随机缩略图

来自外部的引用

发表评论

WordPress多功能主题： Begin

购买本站主题请加QQ：598845006