一个分享WordPress、Zblog、Emlog、Typecho等主流博客的教程网站!
当前位置:网站首页 > 博客教程 > WordPress教程 > 正文

WordPress 博客右下角拉风Feed订阅图标

作者:xlnxin发布时间:2021-04-15分类:WordPress教程浏览:557


导读:去IM路人的博客,发现他博客的Feed订阅图标放置于博客右下角,鼠标悬浮时改变形态,感觉很拉风,于是在其博客中找到相关教程,顺便在上也添加上去了。放置方法操作起来很简单,...

去IM路人的博客,发现他博客的Feed订阅图标放置于博客右下角,鼠标悬浮时改变形态,感觉很拉风,于是在其博客中找到相关教程,顺便在上也添加上去了。放置方法操作起来很简单,上传图标后,添加HTML代码和CSS样式代码即可。下面是转载过来的教程,想美化博客的博主可以参考设置下。

WordPress 博客右下角Feed订阅图标:

  1. 上传下面的Feed图标到网站空间,的是上传到主题目录中
  2. 在当前主题的footer.php文件中添加HTML代码。
  3. 登陆博客后台,点击“外观”选项卡下的“编辑”选项进入主题编辑界面
  4. 选择footer.php文件进行编辑,在其中添加以下HTML代码
    <div class="feedimg">
    <a href="<?php bloginfo('rss2_url');?>" rel="external" tip="Feed">
    <img border="0" title="Feed" alt="Feed" src="rss.png图标地址"></a>
    </div>
  5. 选择当前主题的css文件进行编辑,一般是style.css,在其中添加以下样式代码
    .feedimg {position: fixed; bottom: 0px; right: 0px; opacity: 0.5;_position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
    .feedimg:hover{opacity: 1;}
  6. 保存文件后,刷新博客首页,在右下角就会显示Feed订阅图标了

提示:该效果不限于 WordPress 博客使用,Typecho 经过测试同样适用

提醒:以上方法参考IM路人博客相关教程。

标签:wordpresstypecho空间htmlcssdiv教程主题博客