先来一个演示图看看效果,下面说下操作方法:

演示图

  1. 后台开启 Ads 插件(什么?你卸载了?那我跟你说拜拜了)。
  2. 在 Ads 设置页面里的 - 首页左侧节点栏下方的广告位 - 下方代码输入框输入如下范例代码:
<div class="sideNav links">
  <a>
    <i class="fa fa-link Button-icon"></i>
    <span class="Button-label">友情链接</span>
  </a>
  <li class="Dropdown-separator"></li>
  <ul class="links-list">
    <li>
      <img src="" width="16" height="16" />
      <a href="https://www.baidu.com/" target="_blank">百度</a>
    </li>
    <li>
      <img src="" width="16" height="16" />
      <a href="http://www.163.com" target="_blank">网易</a>
    </li>
    <li>
      <img src="" width="16" height="16" />
      <a href="http://music.163.com" target="_blank">网易云音乐</a>
    </li>
  </ul>
</div>

范例中添加了三个网址,每个网址你需要改的是三个地方:两个是 URL 链接和图标链接,一个是网站名称。以将百度的链接改为本站为例:

修改前:

<li><img src="https://a.5e.cx/getFavicon/?url=https://www.baidu.com/" width="16" height="16" /><a href="https://www.baidu.com/" target="_blank">百度</a></li>

修改后:

<li><img src="https://a.5e.cx/getFavicon/?url=https://www.ikxin.com/" width="16" height="16" /><a href="https://www.ikxin.com/" target="_blank">Notte博客</a></li>

注意:修改第一个链接位置是修改 https://a.5e.cx/getFavicon/?url= 后面部分,这个链接是获取网站图标的,不要误删。另外,如果你没有 HTML 基础的话,要注意每个网站完整代码是 <li> 开始,</li> 结尾的。

如果你觉得三个友链太少的话,按以上方法(推荐用文本编辑工具)写完粘贴在整段代码最后的 </li>这里</ul></div>(也就是每添加一条就放到 </ul> 前面就行了)。

  1. 很重要的一步,完成第二步之后,在后台 - 外观设置 - 自定义样式里点击按钮输入以下代码保存:
.links {margin-top: 10px;}
.links .links-list {margin-top: 10px;}
.links .links-list a {position: absolute; margin-left: 10px; line-height: 16px;}

至此整个教程已完成。

什么?你想放完友链再放广告图?你直接把你的广告图代码贴在我这段代码后面不就行了?

补充一个自定义样式,因为手机浏览时这个友链模块直接显示在主页上方,比较碍眼,所以加入这个 CSS 让其在手机浏览时隐藏:

@media (max-width: 995px) {
  .item-flagrow-ad .sideNav {display: none !important;}
}
如果觉得我的文章对你有用,请随意赞赏