블로그 상단 고정 바(Sticky Bar) 만들기: 공지사항 & 인기 글 노출 전략
독자가 페이지를 아래로 스크롤해도 화면 상단에 딱 붙어서 따라오는 스티키 바는 클릭률을 높이는 강력한 도구입니다. 중요한 공지사항이나 효자 포스팅(인기 글)을 고정해두면 방문자의 체류 시간을 늘리고 유입을 유도할 수 있습니다. 1분 만에 적용하는 코드를 소개합니다.
1. 고정 바 디자인을 위한 CSS 설정
상단에 고정되고 눈에 잘 띄도록 스타일을 입히는 단계입니다. [테마] -> [맞춤설정] -> [고급] -> [CSS 추가]에 아래 코드를 넣으세요.
/* 상단 고정 바 스타일 */
#sticky-notice-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ff4757; /* 배경색: 눈에 띄는 빨간색 계열 */
color: #ffffff; /* 글자색: 흰색 */
text-align: center;
padding: 10px 0;
font-size: 15px;
font-weight: bold;
z-index: 9999; /* 다른 요소보다 항상 위에 표시 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#sticky-notice-bar a {
color: #ffffff;
text-decoration: underline;
margin-left: 10px;
}
/* 고정 바 두께만큼 본문을 아래로 밀어주기 (데스크톱 기준) */
body {
margin-top: 40px !important;
}
2. HTML 코드로 내용 입력하기
실제 문구와 링크를 넣는 과정입니다. [테마] -> [HTML 편집]으로 이동하여 <body> 태그 바로 아래에 붙여넣으세요.
[공지 바 삽입 코드](적용예시)
<div id="sticky-notice-bar"> 📢 [필독] 2026년 블로그 수익화 가이드 무료 배포 중! <a href="내_포스팅_주소_입력">지금 확인하기 →</a> </div>
3. 활용도를 높이는 전략적 팁
- 색상 대비 활용: 블로그의 메인 컬러와 대비되는 색(예: 노란색 배경에 검은 글씨)을 사용하면 시선을 확 끌 수 있습니다.
- 기간 한정 이벤트: "오늘만 공개", "선착순 종료"와 같은 문구를 섞어 독자의 클릭을 유도해 보세요.
- 모바일 확인 필수: 고정 바가 너무 두꺼우면 모바일 화면의 절반을 가릴 수 있습니다. 문구는 한 줄 내외로 간결하게 작성하세요.
💡 전문가 팁: '닫기' 버튼이 필요하다면?
독자가 불편해할 수 있으므로, 우측에 'X' 버튼을 만들어 자바스크립트로 닫기 기능을 추가하는 것도 좋습니다. 하지만 단순한 정보 전달이 목적이라면 위 코드만으로도 충분히 강력한 효과를 볼 수 있습니다.
중요한 정보를 숨기지 마세요. 상단 고정 바 하나로 여러분의 핵심 콘텐츠를 독자의 눈앞에 바로 배달할 수 있습니다!
![[블로그스팟 가이드] 네이버처럼 메뉴 만들기: 라벨과 URL 설정 총정리](https://blogger.googleusercontent.com/img/a/AVvXsEgSBUNjbKJOjRWx4ILBNwUUDnjMAQnHBWLxjSNLUsTzgduMxyXF7IZdzpNkEpyAz5q1rWdLXjquQ-VFHv3UzZgcBgn6XGBzqMSknuGY-vNutr26KNQuJB0gajn-poIdhH3NqYBUaRIoW64ZFO1tOP_34rLpPlOs7-AsTAf6SnH-tekEWB29ZZHV3cY7XmY=w72-h72-p-k-no-nu)
0 댓글