구글 블로그스팟 VTrick 테마 팝업창 띄우기 설정 방법

블로그 운영에서 팝업창은 방문자의 관심을 집중시키고 특정 행동을 유도하는 강력한 도구입니다. 이 글에서는 구글 블로그스팟(블로거)을 사용해 팝업창을 설정하는 방법을 매우 자세히 설명합니다. 이 방법은 블로그 트래픽을 수익으로 전환하는 데 큰 도움이 될 수 있습니다.

팝업창의 기능과 활용 방법

팝업창은 특정 조건에서 자동으로 나타나는 작은 창입니다. 블로그에서는 이 팝업창을 통해 독자가 특정 페이지로 이동하거나, 광고를 클릭하거나, 구독을 신청하도록 유도할 수 있습니다. 일반적으로 팝업창은 다음과 같은 상황에서 나타나도록 설정할 수 있습니다:

1. 일정 시간 경과 후: 방문자가 페이지에 머문 시간을 측정해 특정 시간이 지나면 팝업이 표시됩니다.
2. 페이지 스크롤 정도에 따라: 페이지를 일정 부분 스크롤한 후 팝업이 나타납니다.
3. 특정 이벤트 발생 시: 예를 들어, 사용자가 버튼을 클릭하거나 링크를 누르면 팝업이 나타납니다.

준비물: 팝업창 설정에 필요한 요소들

팝업창을 설정하기 위해 필요한 요소는 다음과 같습니다:

1. 팝업창에 사용할 이미지: 팝업창은 시각적으로 매력적이어야 합니다. 이미지 선택은 매우 중요하며, 이는 방문자의 관심을 끌고 팝업창에서 원하는 행동을 유도하는 첫 번째 단계입니다.
2. 목표 페이지 URL: 팝업창에서 사용자가 이동하게 될 페이지의 URL을 미리 준비합니다. 예를 들어, 특정 제품 페이지, 광고 페이지, 혹은 제휴 링크 등이 될 수 있습니다.
3. HTML 코드: 팝업창을 작동시키기 위한 HTML 코드를 미리 준비합니다. 이 코드는 팝업창이 언제, 어떻게 나타날지를 제어합니다.

블로그스팟 테마 설정: 팝업창 삽입을 위한 준비

1. 블로그 관리 페이지 접속: 구글 블로그스팟에 로그인한 후, 대시보드에서 '테마' 메뉴를 클릭합니다. 테마는 블로그의 전반적인 디자인과 레이아웃을 결정하는 중요한 요소입니다.

2. HTML 편집 모드로 이동: 테마 메뉴에서 '맞춤설정' 옆에 있는 드롭다운 메뉴를 클릭하여 'HTML 편집' 모드로 이동합니다. 이 모드에서는 블로그의 HTML 코드를 직접 수정할 수 있습니다. 편집전에 필히 백업을 권장 합니다.

3. HTML 코드 삽입: HTML 편집 화면에서 스크롤을 아래로 내리면 </body> 태그가 보입니다. 이 태그 바로 위에 팝업창을 삽입할 HTML 코드를 붙여넣습니다. 이 코드는 팝업창이 언제, 어디서 나타날지를 결정합니다.

'저장'을 클릭 합니다.

<b:if cond='data:blog.url == data:blog.homepageUrl'>  <b:else/> <div id='overlay'/> <div id='popup'> <div id='popup-content'/> <div id='popup-buttons'> <button id='link-button'>바로가기</button> <button id='close-button'>닫기</button> </div> </div> <style> #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; } #popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border-radius: 10px; z-index: 1001; width: 90%; max-width: 600px; height: auto; max-height: 80vh; overflow: hidden; } #popup-content { width: 100%; height: calc(100% - 60px); overflow-y: auto; } #popup-content img { width: 100%; height: auto; display: block; } #popup-buttons { display: flex; justify-content: space-between; padding: 20px; background-color: white; } #link-button, #close-button { flex: 1; padding: 17px 10px; margin: 0 10px; font-size: 21px; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, transform 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #link-button { background-color: #6CA6CD; color: white; } #close-button { background-color: #E0E0E0; color: #333; } #link-button:hover, #close-button:hover { opacity: 0.9; transform: scale(1.05); } body.popup-active { overflow: hidden; } @media (max-width: 600px) { #link-button, #close-button { font-size: 18px; } } </style> <script> //<![CDATA[ const blogAddress = 'aliexpresskr.blogspot.com'; function showPopup(content, linkUrl) { document.getElementById('popup-content').innerHTML = content; document.getElementById('overlay').style.display = 'block'; document.getElementById('popup').style.display = 'block'; document.body.classList.add('popup-active'); const linkButton = document.getElementById('link-button'); linkButton.onclick = function() { window.open(linkUrl, '_blank'); // 새로운 창에서 열기 }; } function hidePopup() { document.getElementById('overlay').style.display = 'none'; document.getElementById('popup').style.display = 'none'; document.body.classList.remove('popup-active'); } function loadPopupContent(url, linkUrl) { fetch(url) .then(response => response.text()) .then(html => { const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); const content = doc.querySelector('.post-body').innerHTML; const tempDiv = document.createElement('div'); tempDiv.innerHTML = content; const images = tempDiv.querySelectorAll('img'); images.forEach(img => { const parent = img.parentNode; if (parent.tagName === 'A') { parent.href = linkUrl; parent.target = '_blank'; // 새로운 창에서 열기 } else { const wrapper = document.createElement('a'); wrapper.href = linkUrl; wrapper.target = '_blank'; // 새로운 창에서 열기 img.parentNode.insertBefore(wrapper, img); wrapper.appendChild(img); } }); showPopup(tempDiv.innerHTML, linkUrl); }) .catch(error => console.error('팝업 내용을 불러오는데 실패했습니다:', error)); } function canShowPopup() { const lastShownTime = localStorage.getItem('popupLastShown-' + location.pathname); if (!lastShownTime) return true; const oneHour = 60 * 60 * 1000; return (Date.now() - parseInt(lastShownTime)) > oneHour; } window.addEventListener('scroll', function() { var scrollPosition = window.scrollY; var totalHeight = document.documentElement.scrollHeight - window.innerHeight; var popupTrigger = document.querySelector('.popup-trigger'); if (scrollPosition > totalHeight * 3/5 && popupTrigger && canShowPopup()) { loadPopupContent(popupTrigger.getAttribute('data-popup-url'), popupTrigger.getAttribute('data-link-url')); localStorage.setItem('popupLastShown-' + location.pathname, Date.now().toString()); } }); document.getElementById('close-button').addEventListener('click', hidePopup); document.getElementById('overlay').addEventListener('click', hidePopup); console.log('이 스크립트는 ' + blogAddress + '에서 제공됩니다.'); //]]> </script>  </b:if>

팝업창 콘텐츠 제작 및 페이지 설정

1. 새 페이지 작성: 대시보드로 돌아가 '페이지' 메뉴에서 새로운 페이지를 생성합니다. 이 페이지에는 팝업창에 표시될 이미지를 포함시킬 예정입니다.

2. 이미지 삽입 및 설정:페이지 제목을 입력합니다. 예를 들어, "팝업 이미지 설정"이라는 제목을 사용할 수 있습니다.

페이지 본문에 팝업에 사용할 이미지를 삽입합니다. 이미지는 사용자에게 시각적으로 호소력 있는 콘텐츠여야 합니다.
이미지를 삽입한 후, 이미지를 클릭하여 크기와 위치를 조정합니다. 가능한 한 큰 크기로 설정하는 것이 좋습니다.
페이지를 저장하고 게시합니다.

3. 페이지 URL 복사: 페이지를 게시한 후, 이 페이지의 URL을 복사합니다. 이 URL은 팝업창에서 불러올 이미지의 주소로 사용됩니다.

HTML 코드 수정: 팝업창 완성하기

1. 복사한 URL을 HTML 코드에 삽입: 앞서 복사한 페이지 URL을 HTML 코드의 팝업 이미지 링크 부분에 삽입합니다. 이 단계에서, 팝업창이 해당 이미지를 정확히 불러올 수 있도록 설정합니다.

2. 링크 URL 설정: 팝업창에서 사용자가 클릭할 경우 이동하게 될 목표 페이지의 URL을 코드에 입력합니다. 예를 들어, 특정 광고 페이지나 제휴 링크 등을 삽입할 수 있습니다.

3. 디스플레이 설정 확인: 코드 내에서 팝업창이 정상적으로 보이도록 display 속성이 none으로 되어 있지 않은지 확인합니다. 필요시 block이나 inline-block으로 설정하여 팝업이 정상적으로 표시되도록 합니다.
4. HTML 코드 저장: 모든 수정이 완료되면 HTML 코드를 저장합니다.

<div class="popup-trigger" data-popup-url="https://구글 블로그스팟 페이지.html" data-link-url="https://바로가기 URL 링크 주소" style="display:none;"></div>

테스트 및 최종 점검

1. 테마 적용 후 테스트: 수정된 테마를 적용한 후, 블로그 페이지를 열어 팝업창이 정상적으로 작동하는지 확인합니다. 페이지를 스크롤하거나 일정 시간 대기한 후 팝업이 나타나는지 테스트합니다.
2. 클릭 유도 및 링크 확인: 팝업창이 나타난 후, 이미지나 버튼을 클릭했을 때 설정한 URL로 제대로 이동하는지 확인합니다. 이 단계에서 링크가 정확하게 설정되지 않았을 경우 팝업창의 효과가 크게 줄어들 수 있으므로 주의해야 합니다.
3. 최적화 및 피드백 반영: 팝업창이 블로그의 목적에 맞게 효과적으로 작동하는지 지속적으로 모니터링하고, 필요시 HTML 코드를 수정하여 최적화합니다. 독자의 피드백을 반영해 팝업창의 디자인이나 내용을 개선하는 것도 중요합니다.

저작권 및 법적 주의사항

캔바 무료도 좋지만, Canva 프로를 사용하면서 느낀 점은, 무료 버전과 비교했을 때 정말 많은 차이가 있다는 것이었어요. 가장 먼저, 방대한 자산 라이브러리에 접근할 수 있다는 점이 정말 좋았어요. 무료 버전에서는 템플릿이나 이미지 선택의 폭이 제한적이었는데, 프로에서는 수백만 개의 프리미엄 콘텐츠를 자유롭게 사용할 수 있어서 디자인 작업이 훨씬 수월해졌죠.

그리고 맞춤 폰트를 업로드할 수 있다는 점도 큰 장점이에요. 브랜드 일관성을 유지하는 게 중요할 때, 내가 원하는 폰트를 사용해서 디자인할 수 있으니 정말 편리했어요. 또, 배경 제거 도구를 사용해 이미지를 손쉽게 깔끔하게 만들 수 있었던 것도 큰 도움이 됐어요. 클릭 한 번으로 배경을 제거할 수 있으니 시간도 절약되고, 디자인 퀄리티도 높아지더라고요.

또한, 브랜드 키트 기능을 통해 브랜드 색상, 폰트, 로고를 한 곳에 저장해두고 사용할 수 있으니, 매번 새로 설정할 필요가 없어졌어요. 마지막으로, 투명 배경 다운로드 기능과 콘텐츠 예약 기능도 정말 유용했어요. 특히, 로고를 투명 배경으로 저장해서 여러 곳에 적용할 때 정말 편리했고, 소셜 미디어 게시물을 Canva 안에서 바로 예약할 수 있어서 시간 관리에도 큰 도움이 됐답니다.

캔바를 좀더 저렴하게 이용하고 싶은 분들은 겜스고로 접속하셔서 4달러로 이용하세요!

https://www.gamsgo.com/

프로모션 코드: VNWD8

추가 팁: 팝업창의 효과를 극대화하는 방법

1. A/B 테스트: 팝업창의 위치, 크기, 내용 등을 다르게 설정하여 여러 가지 버전으로 테스트해 보고, 가장 효과적인 버전을 선택합니다.
2. 타겟팅: 특정 방문자 그룹을 대상으로 팝업창을 표시하여 더 높은 전환율을 달성할 수 있습니다. 예를 들어, 특정 카테고리의 글을 자주 읽는 방문자에게 맞춤형 팝업을 보여주는 방법이 있습니다.
3. 타이밍 조절: 팝업창이 나타나는 타이밍을 최적화하여 방문자가 방해받지 않도록 설정합니다. 지나치게 이른 시점에 팝업이 나타나면 방문자가 페이지를 떠날 수 있으므로, 페이지에 일정 시간 머문 후에 나타나도록 설정하는 것이 좋습니다.

리뷰를 마치며

구글 블로그스팟에서 팝업창을 설정하는 방법에 대해 자세히 설명드렸습니다. 이 방법을 통해 블로그 방문자들의 행동을 유도하고, 수익성을 높일 수 있습니다. 이 가이드가 블로그 운영에 큰 도움이 되길 바랍니다. 추가 질문이나 도움이 필요하다면 언제든지 댓글로 남겨주세요!

구글 blogger 고객센터 사이트

VTrick vietrick 테마 사이트

[블로그스팟 관련글]