티스토리 라꼬스킨, 사이드바에 버튼 만들기

 

1. 티스토리 사이드바가 무엇?

티스토리를 블로그에 사이드바를 배치하고 그 곳에 본인이 필요한 추가 버튼을 설치하여 광고의 효과를 극대화 하는 방법을 알아봅니다. (본 블로그 스킨은 유료 스킨이 "라꼬스킨"이므로 이를 기준으로 설정함)

 

라꼬스킨은 무엇?

https://blacksea22.tistory.com/entry/tstory-laggo-skin

 

무료 스킨인 Book Club 스킨이나 다른 스킨들도 방법은 같지만 Html 태그가 약간 다를 수 있습니다.

 

 

2. 사이드바의 구성

먼저 본인 블로그의 홈 화면을 보면 스킨에 따라 사이드바가 보이지 않다가 티스토리 버튼을 눌러야 사이드바가 나타나는  경우가 있고 "라꼬스킨"이나 "북클럽 스킨"처럼 홈화면 게시글 좌측이나 우측에 사이드바가 보이는 경우가 있죠

 

이때 보통의 경우 카테고리, 공지사항, 인기글, 댓글, 전체 방문자 등 설정에 따라 조금씩 다르지만 거의 비슷한 항목들을 볼 수 있지만 아래 이미지처럼 조금 생소한 항목들이 버튼 형식으로 보입니다.

 

이곳에 만들어 넣을 수 있는 버튼은 블로그 구독 버튼, 카카오채널 추가 버튼, 유튜브 인스타 링크 버튼, 카테고리 바로 가기 버튼, 등을 수 있지만 나는 아레 이미지에서 보듯이 "구독 버튼"과  내 코드가 포함된 "쿠팡 파트너스 버튼"을 배치하여 방문자가 손쉽게 구독을 누르고 쿠팡을 방문 할 수 있도록 했다.

 

 

3. 블로그 구독 버튼 만드는 방법

1. 관리 페이지 > 꾸미기 > 스킨 편집 > HTML 편집 클릭

2. HTML 모드에서  아래 코드를 찾습니다. (콘트롤 + F) 로 찾기 안되니 직접 찾아야 합니다.

<s_sidebar>
  <s_sidebar_element>
    <!-- 카테고리 -->
    <nav class="category">
      [## category_list_##]
    </nav>

 

위 코드를 찾았다면 </nav> 바로 아래에 다음 코드를 복사하여 붙여 넣습니다.

 

<!-- 구독 버튼 추가 -->
    <div style="margin-top: 15px; text-align: center;">
      <a href="https://goldball135.tistory.com/rss" target="_blank" 
         style="display:inline-block; padding:10px 20px; background:#FF9800; color:white; font-weight:bold; border-radius:8px; text-decoration:none;">
         📬 블로그 구독하기
      </a>
    </div>

 

최종 완성본은

 

<s_sidebar>
  <s_sidebar_element>
    <!-- 카테고리 -->
    <nav class="category">
      [## category_list_##]
    </nav>
    <!-- 구독 버튼 추가 -->
    <div style="margin-top: 15px; text-align: center;">
      <a href="https://goldball135.tistory.com/rss" target="_blank" 
         style="display:inline-block; padding:10px 20px; background:#FF9800; color:white; font-weight:bold; border-radius:8px; text-decoration:none;">
         📬 블로그 구독하기
      </a>
    </div>
  </s_sidebar_element>
</s_sidebar>   

 

 이렇게 입력이 되고 사이드 바에 위에 보이듯. "블로그 구독하기"라는 버튼이 생성됩니다.

 

4. 쿠팡파트너스 링크 버튼 만들기

방법은 동일합니다.

먼저 자신의 코드가 포함된 쿠팡 주소를 찾아 아래 코드를 작성합니다.

 

<div style="margin-top: 15px; text-align: center;">
  <a href="https://link.coupang.com/a/bSDDV1" target="_blank" 
     style="display:inline-block; padding:10px 20px; background:#2E3192; color:white; font-weight:bold; border-radius:8px; text-decoration:none;">
     🛒 쿠팡에서 쇼핑하기
  </a>
</div>

 

위 파란색 부분에 자신의 쿠팡 코드 주소를 넣고 블로그 구독하기 태그를 넣었던 곳 바로 아래에 붙여 넣습니다.

결과는 

 

 

이외에도 많은 버튼들이 있겠으나 저는 이 두가지만 올리기로했습니다.

 

5. 링크 버튼이 블로그 수익화나 사용자 행동 유도에 미치는 효

 

✅ 1. 클릭 유도 (CTR 상승)

단순 텍스트 링크보다 버튼은 눈에 띄고 누르기 쉽기 때문에 클릭률이 올라감
→ 예: “구독하기”, “애드센스 광고 클릭 유도용 배너” 등

---

✅ 2. 원하는 행동을 유도할 수 있음 (CTA)

방문자가 블로그를 그냥 둘러보다가도,
‘다운로드’, ‘채널 추가’, ‘PDF 보기’, ‘다른 페이지 이동’ 같은 행동을 하게 유도 가능
→ 수익 파이프라인 연결 가능 (예: 제휴 링크, 스마트스토어, 쿠팡 파트너스 등)

---

✅ 3. 디자인적 통일감 & 전문성 향상

사이드바 버튼을 예쁘게 정리해두면, 블로그 전체가 더 깔끔하고 신뢰감 있는 느낌
→ 방문자 이탈률 감소 & 체류시간 증가 → SEO에 긍정적

---

✅ 4. 모바일 사용자에게도 편함

터치 가능한 버튼은 모바일에서도 누르기 편해서
모바일 사용자 경험(UX) 향상

 

추신 : 위 버튼을 라꼬 스킨에 맞춘 최적화 코드 (참고용)

 

✅ 1. 라꼬 스타일에 맞춘 버튼 통합 (폰트, 색상 통일)

라꼬 스킨은 기본적으로 깔끔한 모던 스타일과 둥근 버튼, 명확한 색 대비를 사용합니다. 이를 고려해 버튼들을 아래처럼 통일했습니다.

---

✅ 2. “오늘의 추천 상품” 섹션 추가

하루에 하나씩 쿠팡 파트너스 링크로 추천 상품 노출 → 클릭 유도 및 수익화

---

✅ 3. 모바일 최적화 (반응형 디자인)

버튼이 모바일에서도 깨지지 않고 잘 보이도록 max-width, box-sizing 등 적용 

---

 

<s_sidebar_element>
  <!-- 카테고리 -->
  <nav class="category">
    [## category_list_##]
  </nav>

  <!-- 블로그 구독 버튼 -->
  <div style="margin-top: 15px; text-align: center;">
    <a href="https://goldball135.tistory.com/rss" target="_blank"
       style="display:inline-block; width:90%; max-width:260px; padding:12px 16px; background:#FF9800; color:white; font-weight:600; font-size:14px;
              border-radius:8px; text-decoration:none; box-sizing: border-box;">
      📬 블로그 구독하기
    </a>
  </div>

  <!-- 쿠팡 버튼 -->
  <div style="margin-top: 10px; text-align: center;">
    <a href="https://link.coupang.com/a/bSDDV1" target="_blank" 
       style="display:inline-block; width:90%; max-width:260px; padding:12px 16px; background:#2E3192; color:white; font-weight:600; font-size:14px;
              border-radius:8px; text-decoration:none; box-sizing: border-box;">
      🛒 쿠팡에서 쇼핑하기
    </a>
  </div>

  <!-- 오늘의 추천 상품 -->
  <div style="margin-top: 15px; padding:10px; border:1px solid #ddd; border-radius:8px; background:#fafafa; font-size:14px;">
    <strong style="display:block; margin-bottom:8px; color:#333;">🔥 오늘의 추천 상품</strong>
    <a href="https://link.coupang.com/a/bSDDV1" target="_blank"
       style="display:block; color:#2E3192; text-decoration:none; font-weight:500;">
       [쿠팡] 인기 무선 이어폰 특가! 🎧
    </a>
  </div>

</s_sidebar_element>