Let's first take a look at a demonstration image to see the effect, and then we'll go over the steps:

1. Enable the Ads plugin in the admin panel (What? You uninstalled it? Then I'll have to say goodbye to you).
2. On the Ads settings page, in the ad slot below the left-side node area on the homepage, enter the following example code in the code input box:

<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>

The example adds three URLs. For each URL, you need to change three things: two are the URL and icon links, and one is the website name. Taking changing the Baidu link to this site as an example:

Before modification:

<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>

After modification:

<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>

Note: To modify the first link, change the part after https://a.5e.cx/getFavicon/?url=. This link is used to retrieve the website icon, so do not accidentally delete it. Also, if you have no HTML experience, note that the complete code for each website starts with <li> and ends with </li>.

If you think three friend links are too few, follow the method above (a text editing tool is recommended), and paste the completed code at the very end of the entire code, at </li>这里</ul></div> (that is, place each new entry before </ul>).

3. This is a very important step. After completing the second step, go to Admin - Appearance Settings - Custom Styles, click the button, enter the following code, and save it:

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

At this point, the entire tutorial is complete.

What? You want to place an ad image after the friend links? Just paste your ad image code after my block of code, right?

Here is an additional custom style. Since this friend-links module is displayed directly above the homepage when browsing on a phone, which can be distracting, add this CSS to hide it on mobile devices:

@media (max-width: 995px) {
  .item-flagrow-ad .sideNav {display: none !important;}
}