블로그 운영을 하다 보면, 특정 카테고리 페이지에서만 특별하게 안내(네비게이션) 버튼을 띄우고 싶을 때가 많습니다. 예를 들어, SEO 관련 카테고리 페이지에서는 애드센스 최적화 바로가기 버튼을, 애드센스 관련 카테고리 페이지에서는 광고 코드 가이드 버튼을 보여주는 방식입니다.
하지만 매번 HTML에 버튼 코드를 직접 넣고 관리하는 것은 번거롭고 실수하기 쉽습니다. 그래서 이번 글에서는 카테고리 URL에 따라 자동으로 버튼을 생성하고 지정 위치에 넣어주는 자바스크립트 코드를 소개합니다.
티스토리 운영자를 위한 카테고리별 자동 버튼 생성
운영자가 단순히 설정만 변경하면 다양한 카테고리에 맞는 버튼을 자동으로 관리할 수 있어, 블로그 운영시 요긴하게 사용할수 있습니다.
1. 카테고리별 맞춤형 자동 버튼 필요성
- 방문자 맞춤형 UX 제공
특정 주제별 랜딩 페이지나 공지, 가이드 페이지로 자연스럽게 유도해 체류 시간을 늘릴 수 있습니다. - 효과적인 내부 링크 관리
검색엔진 최적화(SEO)에서는 관련 콘텐츠끼리 자연스럽게 연결해 주는 내부링크 구조가 중요합니다. 카테고리별 버튼을 통해 방문자의 탐색 경로를 유도하면 SEO 점수 향상에 긍정적입니다. - 운영 편의성 증대
수백 개 글을 일일이 수정할 필요 없이, 코드 한 군데만 손봐도 전 카테고리에 바로 반영됩니다.
2. 자바스크립트 기반 자동 버튼 생성 코드 소개
아래 코드는 운영자가 설정한 카테고리 URL 조건에 맞춰, 지정한 <div> 요소에 자동으로 버튼을 생성하고 삽입해 줍니다.
<!-- 메뉴 영역 (원하는 위치에 추가) -->
<div id="menu1"></div>
<div id="menu2"></div>
<!-- 버튼 스타일 -->
<style>
.dark-rounded-btn {
display: inline-block;
padding: 12px 24px;
background-color: #555;
color: #fff;
border-radius: 30px;
text-decoration: none;
font-size: 16px;
font-weight: 500;
transition: background-color 0.3s, transform 0.2s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.dark-rounded-btn:hover {
background-color: #777;
transform: translateY(-2px);
}
</style>
<!-- 자바스크립트로 버튼 자동 생성 -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const currentUrl = window.location.href;
// 설정: 카테고리 주소 + 버튼 넣을 위치 ID + 이동할 링크 + 버튼 텍스트
const buttonConfigs = [
{
urlContains: "/category/SEO",
targetId: "menu1",
linkUrl: "https://페이지 주소1",
buttonText: "애드센스 최적화 바로가기"
},
{
urlContains: "/category/Adsense",
targetId: "menu2",
linkUrl: "페이지 주소2",
buttonText: "애드센스 코드 가이드"
}
// 추가 가능: 원하는 만큼 복사해서 구성 가능
];
buttonConfigs.forEach(cfg => {
if (currentUrl.includes(cfg.urlContains)) {
const targetEl = document.getElementById(cfg.targetId);
if (targetEl) {
const button = document.createElement("a");
button.href = cfg.linkUrl;
button.target = "_blank";
button.className = "dark-rounded-btn";
button.innerText = cfg.buttonText;
targetEl.appendChild(button);
}
}
});
});
</script>
주요 기능
- urlContains 값으로 현재 페이지 URL에 특정 카테고리 주소가 포함되는지 판단
- 조건에 맞으면 targetId에 해당하는 div에 버튼을 생성하여 삽입
- 버튼은 운영자가 지정한 링크(linkUrl)와 텍스트(buttonText)로 자동 완성
- 다크 모드에 어울리는 라운드 스타일 버튼 기본 제공
3. 활용 예시
- SEO 카테고리 방문 시 수익형 블로그 최적화 페이지 버튼 자동 노출
- 애드센스 카테고리 방문 시 광고 코드 가이드 페이지 버튼 생성
- 신규 카테고리 추가 시 설정 배열에만 추가하면 끝!
4. SEO 관점에서의 장점
- 내부 링크 강화
주요 랜딩 페이지나 수익화 관련 페이지로의 자연스러운 링크 연결이 가능해, 구글 봇이 사이트 구조를 쉽게 이해합니다. - 사용자 경험(UX) 개선
방문자가 원하는 정보를 빠르게 찾고 클릭할 수 있어 이탈률 감소에 도움 됩니다. - 중복 콘텐츠 예방
동일하거나 유사한 정보를 한페이지에서 볼수 있어 중복 문제를 줄일수 있습니다.
5. 간단한 적용법
- 블로그 스킨 편집 → 원하는 위치에
<div id="menu1"></div>,<div id="menu2"></div>등 생성 - 위 스크립트를
<body>종료 직전에 붙여넣기 - buttonConfigs 배열에 원하는 카테고리 URL과 버튼 링크, 텍스트를 입력
- 저장 후 테스트
블로그 운영 중 카테고리별 맞춤형 안내 버튼을 쉽고 빠르게 만들고 싶다면, 이번에 소개한 자동 버튼 생성 스크립트를 추천합니다. 이 방법은 특히 콘텐츠가 많아져 관리가 어려운 중·대형 블로그 운영자에게 운영 편의성과 방문자 만족도를 동시에 올릴 수 있는 방법입니다.
이쁜 버튼 모음
1. 기본 모던 버튼
<button class="modern-btn">기본 버튼</button>
<style>
.modern-btn {
padding: 12px 24px;
background: #4a6bff;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.modern-btn:hover {
background: #3a5bef;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
</style>
2.그라데이션버튼
<button class="gradient-btn">그라데이션</button>
<style>
.gradient-btn {
padding: 12px 30px;
background: linear-gradient(45deg, #ff6b6b, #ffa3a3);
color: white;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.4s;
box-shadow: 0 4px 15px rgba(255,107,107,0.3);
}
.gradient-btn:hover {
background: linear-gradient(45deg, #ff5252, #ff7676);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255,82,82,0.4);
}
</style>
3.테두리버튼
<button class="outline-btn">아웃라인</button>
<style>
.outline-btn {
padding: 12px 28px;
background: transparent;
color: #4a6bff;
border: 2px solid #4a6bff;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.outline-btn:hover {
background: #4a6bff;
color: white;
box-shadow: 0 4px 12px rgba(74,107,255,0.2);
}
</style>
4.3D버튼
<button class="three-d-btn">3D 효과</button>
<style>
.three-d-btn {
padding: 14px 32px;
background: #5cb85c;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
position: relative;
transition: all 0.2s;
box-shadow: 0 5px 0 #449d44;
}
.three-d-btn:hover {
transform: translateY(3px);
box-shadow: 0 2px 0 #449d44;
}
.three-d-btn:active {
transform: translateY(5px);
box-shadow: none;
}
</style>
5. 토글 버튼
<label class="toggle-btn">
<input type="checkbox">
<span class="slider"></span>
</label>
<style>
.toggle-btn {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-btn input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background: #4CAF50;
}
input:checked + .slider:before {
transform: translateX(26px);
}
</style>