---
title: "Flarum Ads 플러그인으로 웹사이트 링크 사이드바 만들기 - 근심을 잊는 한 장"
description: "먼저 예시 이미지를 통해 효과를 확인한 다음, 아래에서 작업 방법을 설명하겠습니다."
canonical_url: "https://www.ikxin.com/ko/article/flarum-ads-links-sidebar"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ko
meta:
  "og:description": "먼저 예시 이미지를 통해 효과를 확인한 다음, 아래에서 작업 방법을 설명하겠습니다."
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIEFkcyDtlIzrn6zqt7jsnbjsnLzroZwg7Ju57IKs7J207Yq4IOunge2BrCDsgqzsnbTrk5zrsJQg66eM65Ok6riwIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~RmxhcnVtIEFkcyDtlIzrn6zqt7jsnbjsnLzroZwg7Ju57IKs7J207Yq4IOunge2BrCDsgqzsnbTrk5zrsJQg66eM65Ok6riw%2Cdescription_~66i87KCAIOyYiOyLnCDsnbTrr7jsp4Drpbwg7Ya17ZW0IO2aqOqzvOulvCDtmZXsnbjtlZwg64uk7J2MLCDslYTrnpjsl5DshJwg7J6R7JeFIOuwqeuyleydhCDshKTrqoXtlZjqsqDsirXri4jri6Qu%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2ZsYXJ1bS1hZHMtbGlua3Mtc2lkZWJhciI%2Cs_Rlbj70HTud4EV8-6.png"
  "og:image:alt": "Flarum Ads 플러그인으로 웹사이트 링크 사이드바 만들기 - 근심을 잊는 한 장"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Flarum Ads 플러그인으로 웹사이트 링크 사이드바 만들기"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIEFkcyDtlIzrn6zqt7jsnbjsnLzroZwg7Ju57IKs7J207Yq4IOunge2BrCDsgqzsnbTrk5zrsJQg66eM65Ok6riwIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~RmxhcnVtIEFkcyDtlIzrn6zqt7jsnbjsnLzroZwg7Ju57IKs7J207Yq4IOunge2BrCDsgqzsnbTrk5zrsJQg66eM65Ok6riw%2Cdescription_~66i87KCAIOyYiOyLnCDsnbTrr7jsp4Drpbwg7Ya17ZW0IO2aqOqzvOulvCDtmZXsnbjtlZwg64uk7J2MLCDslYTrnpjsl5DshJwg7J6R7JeFIOuwqeuyleydhCDshKTrqoXtlZjqsqDsirXri4jri6Qu%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2ZsYXJ1bS1hZHMtbGlua3Mtc2lkZWJhciI%2Cs_Rlbj70HTud4EV8-6.png"
  "twitter:image:alt": "Flarum Ads 플러그인으로 웹사이트 링크 사이드바 만들기 - 근심을 잊는 한 장"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **Flarum Ads 플러그인으로 웹사이트 링크 사이드바 만들기**

2018.07.29 4,590  0

먼저 예시 이미지를 통해 효과를 확인한 다음, 아래에서 작업 방법을 설명하겠습니다.

![예시 이미지](https://www.ikxin.com/_ipx/animated_true&w_1734&f_webp/https://img.8b5.cn/2019/06/27/5d14610643f8d.png)

1. 관리자 페이지에서 Ads 플러그인을 활성화합니다(뭐라고요? 플러그인을 삭제하셨다고요? 그렇다면 이만 작별 인사를 해야겠네요).
2. Ads 설정 페이지의 - 홈페이지 왼쪽 노드栏 아래 광고 위치 - 아래에 있는 코드 입력란에 다음 예시 코드를 입력합니다.

 HTML

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

예시에는 3개의 웹사이트 주소가 추가되어 있으며, 각 주소에서 수정해야 할 부분은 3가지입니다. URL 링크 2개와 아이콘 링크 1개, 그리고 웹사이트 이름입니다. 바이두 링크를 이 사이트로 변경하는 경우를 예로 들면 다음과 같습니다.

수정 전:

 HTML

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

수정 후:

 HTML

```
<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>`로 끝난다는 점에 유의하세요.

친구 링크 3개가 너무 적다고 생각된다면 위의 방법(텍스트 편집 도구 사용을 권장)으로 작성한 후 전체 코드 마지막의 `</li>여기</ul></div>` 부분에 붙여 넣으면 됩니다(즉, 하나를 추가할 때마다 `</ul>` 앞에 넣으면 됩니다).

3. 매우 중요한 단계입니다. 두 번째 단계를 완료한 후 관리자 페이지의 - 외관 설정 - 사용자 지정 스타일에서 버튼을 클릭하고 다음 코드를 입력하여 저장합니다.

 CSS

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

이로써 전체 튜토리얼이 완료되었습니다.

뭐라고요? 친구 링크를 배치한 다음 광고 이미지를 넣고 싶다고요? 그냥 제 코드 뒤에 광고 이미지 코드를 붙여 넣으면 되지 않나요?

사용자 지정 스타일을 하나 더 추가합니다. 휴대폰으로 볼 때 이 친구 링크 모듈이 홈페이지 상단에 바로 표시되어 다소 눈에 거슬리므로, 다음 CSS를 추가하면 모바일에서 볼 때 숨길 수 있습니다.

 CSS

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

## **댓글**

(0)

아직 댓글이 없습니다

## **댓글 작성**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ko#website","@type":"WebSite","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","inLanguage":"ko-KR","name":"근심을 잊는 한 장","url":"https://www.ikxin.com/ko","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ko/article/flarum-ads-links-sidebar#webpage","@type":"WebPage","description":"먼저 예시 이미지를 통해 효과를 확인한 다음, 아래에서 작업 방법을 설명하겠습니다.","name":"Flarum Ads 플러그인으로 웹사이트 링크 사이드바 만들기","url":"https://www.ikxin.com/ko/article/flarum-ads-links-sidebar","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/article/flarum-ads-links-sidebar"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.