VTrick 테마로 블로그를 멋지게 꾸몄는데, "광고로 조금 더 수익을 내볼까?"라는 생각 해보셨죠? 깜빡이는 팝업 광고를 추가하면 방문자 눈에 확 띄어요. "어렵지 않을까?" 걱정 마세요. 초보자도 따라 할 수 있게 차근차근 알려드릴게요!
팝업 광고창이 왜 좋을까요?
블로그를 운영하면서 "광고로 좀 더 재미를 봤으면 좋겠다"는 생각, 한 번쯤 하셨죠? VTrick 테마에 깜빡이는 팝업 광고를 추가하면 방문자가 쉽게 눈치채고 클릭할 가능성이 커져요. 처음엔 코드가 복잡해 보일 수 있지만, 제가 해보니 따라 하기만 하면 금방이더라고요. 두 가지 방법으로 알려드릴 테니 블로그에 딱 맞는 걸 골라보세요!
1. HTML/JavaScript 가젯으로 간단한 팝업 광고 만들기
이 방법은 블로그 레이아웃에 가젯을 추가해서 팝업 광고를 넣는 간단한 방법이에요. 코드를 조금 만지긴 하지만, 정말 쉬워요.
| 단계 | 설명 |
|---|---|
| 1 | 블로그스팟에 로그인한 뒤 왼쪽 메뉴에서 "레이아웃(Layout)"을 클릭해요. 블로그 구조를 조정하는 화면이 나올 거예요. |
| 2 | 광고를 넣고 싶은 곳(예: 사이드바나 푸터)을 찾아 "가젯 추가(Add a Gadget)"를 클릭합니다. 작은 창이 열릴 거예요. |
| 3 | 가젯 목록에서 "HTML/JavaScript"를 찾아 선택해요. 이건 코드를 넣을 수 있는 빈 상자 같은 거예요. |
| 4 | 가젯 내용 영역에 아래 코드를 복사해서 붙여넣습니다:
|
| 5 | |
| 6 | 가젯 창 아래 "저장"을 누르고, 레이아웃 화면에서도 "저장"을 클릭해요. 이제 광고가 팝업으로 나타날 거예요! |
이 방법은 닫기 버튼이 있는 간단한 팝업 광고를 만들어줘요. 방문자가 "X"를 누르면 광고가 사라지니 너무 부담스럽지 않답니다!
2. VTrick 테마에 깜빡이는 팝업 광고창 추가하기: 초보자도 쉽게!
VTrick 테마를 쓰고 있다면 "광고로 블로그를 더 멋지게 만들고 싶다"는 생각, 한 번쯤 해보셨죠? 깜빡이는 팝업 광고창은 방문자 눈에 확 들어오고, 클릭도 유도할 수 있어요. "코드라니 무서워요!"라고 걱정하실 수 있는데, 제가 처음 해봤을 때도 그랬어요. 하지만 천천히 따라 하면 정말 쉬워요! 두 가지 방법을 하나씩 자세히 알려드릴게요. 편한 걸로 골라서 시작해 볼까요?
방법 1: HTML/JavaScript 가젯으로 간단한 팝업 광고 넣기
이 방법은 블로그에 작은 상자를 추가해서 광고를 띄우는 거예요. 코드를 조금 만지긴 하지만, 클릭 몇 번과 복사 붙이기로 끝난답니다. 초보자도 할 수 있어요!
| 단계 | 설명 |
|---|---|
| 1 | 먼저 블로그스팟에 로그인해요. 로그인하면 왼쪽에 세로로 메뉴가 쭉 나와 있죠? 그중에서 "레이아웃(Layout)"이라는 메뉴를 찾아 클릭합니다. 그러면 블로그의 구조를 조정할 수 있는 화면이 나올 거예요. 사이드바, 푸터 같은 구역이 박스로 나뉘어 있어요. |
| 2 | 이제 광고를 어디에 넣고 싶나요? 예를 들어, 사이드바에 넣고 싶다면 "사이드바"라는 박스를 찾아보세요. 푸터에 넣고 싶다면 아래쪽 "푸터" 박스를 보세요. 원하는 구역에서 "가젯 추가(Add a Gadget)"라는 링크나 버튼을 클릭합니다. 그러면 작은 창이 팝! 하고 열릴 거예요. |
| 3 | 작은 창에 여러 가지 가젯 목록이 나오죠? 그중에서 "HTML/JavaScript"라는 걸 찾아요. 옆에 "+" 버튼이 있으면 그걸 누르거나, 그냥 클릭하면 됩니다. 이건 우리가 코드를 넣을 수 있는 빈 상자 같은 거예요. 선택하면 빈 텍스트 상자가 열릴 거예요. |
| 4 | 이제 텍스트 상자에 아래 코드를 복사해서 붙여넣습니다. 코드가 조금 길어 보일 수 있는데, 그냥 그대로 붙이면 돼요. 걱정하지 말고 따라 해보세요:
<!-- Font Awesome 라이브러리 추가 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="tw_float_ads_main_wrap" id="tw_float_ads_main_wrap">
<div class="tw_float_ads_close">
<span id="tw_close_button" style="float: right; cursor: pointer;">
<i class="fa fa-times" aria-hidden="true" title="Close the Advertisement"></i>
</span>
<div style="clear: both;"></div>
<div>
<!-- 여기에 광고 코드 삽입 -->
</div>
</div>
</div>
<script type="text/javascript">
var tw_closeButton = document.getElementById("tw_close_button");
tw_closeButton.onclick = function() {
document.getElementById("tw_float_ads_main_wrap").style.display = "none";
};
</script>
이 코드는 팝업 광고창을 만들고, "X" 버튼으로 닫을 수 있게 해줍니다. 맨 위에 Font Awesome 링크를 추가해서 "X" 아이콘이 잘 보이게 했어요.
|
| 5 | 코드를 붙였다면, <!-- 여기에 광고 코드 삽입 -->라는 부분을 찾아요. 이건 광고를 넣을 자리예요. 애드센스 계정이 있다면 애드센스에서 광고 코드를 복사해 와서 이 부분에 붙여넣습니다. 예를 들어, 애드센스 코드가 <ins class="adsbygoogle" ...></ins>라면 그걸 그대로 넣으면 돼요. 다른 광고 플랫폼을 쓴다면 그 코드로 바꿔주세요. |
| 6 | 광고 코드를 넣었다면 가젯 창 아래에 "저장" 버튼이 보일 거예요. 그걸 클릭해요. 그러면 가젯 창이 닫히고, 다시 레이아웃 화면으로 돌아옵니다. 이번엔 레이아웃 화면 오른쪽 아래에 "저장" 버튼을 한 번 더 눌러줍니다. 이제 블로그를 열어보면 광고가 팝업으로 나타날 거예요! |
| 7 | 블로그를 새로고침해서 확인해 보세요. 광고가 사이드바나 푸터에 떠 있고, 오른쪽 위에 "X" 버튼이 보일 거예요. "X"를 누르면 광고가 사라져요. 잘 됐다면 "와, 나도 할 수 있네!"라는 기분이 들 거예요! |
이 방법은 간단해서 코딩을 잘 몰라도 할 수 있어요. "가젯이 뭐야?" 싶다면, 블로그에 작은 기능 상자를 추가하는 거라고 생각하면 됩니다. 닫기 버튼도 있어서 방문자가 편하게 닫을 수 있으니 너무 걱정 마세요!
방법 2: 반응형 팝업 광고로 프로처럼 만들기
이 방법은 조금 더 멋진 팝업을 만드는 거예요. 방문자가 스크롤하면 팝업이 나타나고, 5초 타이머가 지나면 닫을 수 있어요. 게다가 30일 동안 한 번만 뜨니까 방문자를 덜 귀찮게 하죠. 코드가 좀 길지만, 제가 하나씩 설명할 테니 천천히 따라 해보세요!
CSS 코드로 팝업 모양 꾸미기
| 단계 | 설명 |
|---|---|
| 1 | 블로그스팟 대시보드에 로그인한 뒤, 왼쪽 메뉴에서 "테마"를 클릭해요. 그러면 블로그 디자인을 바꾸는 화면이 나와요. |
| 2 | "테마" 화면 오른쪽 위에 "HTML 편집"이라는 버튼이 있어요. 그걸 클릭하면 코드가 잔뜩 보이는 창이 열립니다. 처음 보면 "뭐야 이게 다!"라고 놀랄 수 있는데, 필요한 부분만 찾으면 돼요. |
| 3 | 코드 창에서 Ctrl+F(Mac은 Cmd+F)를 눌러 검색창을 열고, <style>를 찾아봅니다. 이건 디자인을 담당하는 부분이에요. 만약 <style>가 없다면, <head>와 </head> 사이에 새로 <style></style>를 만들어 넣어도 돼요. |
| 4 | <style></style> 안에 아래 코드를 복사해서 붙여넣습니다. 이건 팝업창의 모양을 예쁘게 만들어줘요:
<style>
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 700;
}
.popup-container {
background-color: white;
padding: 20px;
border-radius: 5px;
position: relative;
max-width: 90%;
max-height: 90%;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 20px;
}
.popup-content {
margin-top: 20px;
}
.popup-timer {
text-align: center;
margin-bottom: 10px;
}
</style>
이 코드는 팝업이 화면 가운데에 뜨고, 반투명 검은 배경을 깔아주는 역할을 해요.
|
| 5 | 코드를 붙였다면 아직 저장하지 말고 다음 단계로 넘어갈게요. CSS는 모양만 담당하니까, 동작을 추가하려면 더 해야 할 일이 있어요! |
HTML과 JavaScript로 팝업 동작 넣기
| 단계 | 설명 |
|---|---|
| 1 | 같은 HTML 편집 창에서 Ctrl+F를 눌러 </body>를 찾아요. 이건 페이지가 끝나는 부분이에요. 코드 맨 아래쯤에 있을 가능성이 높아요. |
| 2 | </body> 바로 위에 아래 코드를 복사해서 붙여넣습니다. 이건 팝업창을 띄우고 동작하게 만드는 코드예요:
<div class="popup-overlay" id="adPopup" style="display: none;">
<div class="popup-container">
<div class="popup-close" id="skipButton">닫기 (<span id="timer">5</span>초)</div>
<div class="popup-content">
<!-- 여기에 광고 코드 삽입 -->
</div>
</div>
</div>
<script>
// 팝업 쿠키 설정 (30일간 유지)
function createPopupCookie() {
const date = new Date();
date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = "popupShown=true; expires=" + date.toUTCString() + "; path=/";
}
// 쿠키 확인
function checkPopupCookie() {
return document.cookie.indexOf("popupShown=") !== -1;
}
// 타이머 설정
let remainingTime = 5; // 5초 타이머
let timerId;
function startTimer() {
const timerElement = document.getElementById("timer");
timerId = setInterval(function() {
remainingTime--;
timerElement.textContent = remainingTime;
if (remainingTime <= 0) {
clearInterval(timerId);
document.getElementById("skipButton").textContent = "닫기";
}
}, 1000);
}
// 팝업 표시
function showPopup() {
if (!checkPopupCookie()) {
document.getElementById("adPopup").style.display = "flex";
startTimer();
}
}
// 스크롤 이벤트 리스너
window.addEventListener("scroll", function() {
if (window.scrollY > 100 && !checkPopupCookie()) {
showPopup();
}
});
// 닫기 버튼 이벤트
document.getElementById("skipButton").addEventListener("click", function() {
if (remainingTime <= 0) {
document.getElementById("adPopup").style.display = "none";
createPopupCookie();
clearInterval(timerId);
}
});
</script>
|
| 3 | 이제 <!-- 여기에 광고 코드 삽입 --> 부분을 찾아요. 여기에 애드센스나 다른 광고 코드를 붙여넣습니다. 예를 들어, 애드센스 코드가 있다면 그걸 그대로 넣으면 돼요. |
| 4 | 코드를 다 붙였다면 HTML 편집 창 위쪽에 "저장" 버튼을 눌러요. 혹시 실수할까 걱정된다면 먼저 "테마 백업"을 해두면 마음이 편해요! |
| 5 | 블로그를 열고 조금 스크롤해 보세요. 화면이 100픽셀쯤 내려가면 팝업이 나타날 거예요. "닫기 (5초)"라는 버튼이 보이고, 5초 후에 "닫기"로 바뀌면서 클릭하면 사라져요. 잘 됐다면 "내 블로그 멋지다!"라는 기분이 들 거예요! |
이 코드는 방문자가 스크롤할 때 팝업이 나타나고, 5초 타이머가 끝나면 닫을 수 있어요. 게다가 30일 동안 한 번만 뜨니까 방문자를 너무 괴롭히지 않아요. "쿠키가 뭐야?" 싶으면, 그냥 "이 사람한테 팝업 보여줬어요"라는 기록이라고 생각하면 됩니다!
꿀팁: 나만의 팝업으로 바꾸기
타이머 시간이 5초가 짧다면 let remainingTime = 5를 10이나 15로 바꿔보세요. 스크롤 위치도 window.scrollY > 100을 200이나 300으로 조정할 수 있어요. 색깔은 background-color를 바꾸면 내 블로그 스타일에 맞출 수 있답니다!
어떤 방법을 써볼까?
이제 두 가지 방법을 다 봤어요! "너무 많아서 헷갈려요!"라고 느낄 수 있는데, 간단하게 하고 싶다면 가젯 방법, 멋지고 똑똑한 팝업을 원한다면 반응형 방법을 써보세요. 저는 반응형으로 해봤는데, "이거 전문가 같네!"라는 느낌이 들더라고요. 둘 다 해보면 블로그가 더 살아날 거예요!
자주 묻는 질문 (FAQ)
-
Q: 팝업이 안 떠요. 왜일까요?
A: 코드가 정확히 붙었는지, 광고 코드가 잘 들어갔는지 확인하세요. 저장 후 새로고침하면 보일 거예요!
-
Q: 타이머 시간이 너무 짧아요?
A:
remainingTime = 5를 10이나 15로 바꿔보세요. 원하는 초로 조정하면 더 편리할 거예요! -
Q: 팝업이 너무 자주 떠요?
A: 쿠키 설정이 잘 됐는지 확인하고,
30일을 더 길게 바꾸면 덜 뜨게 할 수 있어요!
결론: 팝업으로 블로그 수익 올리기
VTrick 테마에 깜빡이는 팝업 광고를 추가하면 블로그가 더 돋보이고 수익도 늘어요. 이 글을 따라 해보세요. 방문자가 클릭하며 생기는 작은 기쁨을 느껴보세요!
 코드 공유!){kind=link}