ikxin

Ads 插件制作高大上的友链栏
正文先来一个演示图看看效果下面说下操作方法1、后台开启 Ads 插件(什么?你卸载了? 那我跟你说拜拜了)2、在 ...
扫描右侧二维码阅读全文
29
2018/07

Ads 插件制作高大上的友链栏

正文

先来一个演示图看看效果

下面说下操作方法

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="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=http://www.163.com" width="16" height="16" />
      <a href="http://www.163.com" target="blank">网易</a></li>
    <li>
      <img src="https://a.5e.cx/getFavicon/?url=http://music.163.com" 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>前面就行了)。

3、很重要的一步,完成第二步之后,在后台 - 外观设置 - 自定义样式 里点击按钮输入以下代码保存

.links {margin-top: 10px;}
.links .links-list {margin-top: 10px;}
.links .links-list a {position: absolute;margin-left: 10px;line-height: 16px;}

至此整个教程已完成

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

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

@media(max-width:995px) {
.item-flagrow-ad .sideNav {display: none !important;}
}
Last modification:June 27th, 2019 at 02:24 pm
如果觉得我的文章写得不错,请赏我一杯咖啡

Leave a Comment