IJMuAN02pVKE2uZHXG2JnZAHGfjon49GBXjko1rk

블로소득 팝업 코드 공유합니다(ft.블로그스팟 팝업창)

블로소득
블로소득
Update:
수익에 도움이 되실만한 블로그스팟 코드가 어떤게 있을까 고민을 해봤습니다.
그 중에서 본문을 거의 다 읽어갈 때 나오는 팝업창에 대해서 궁금해하는 분들이 계시는 것 같더라구요!
그래서 준비했습니다. 블로소득 팝업으로 블로그스팟 월 100만원 돌파!

이 글에도 블로소득 팝업이 적용되어 있습니다 😀
본문 2/3지점까지 스크롤을 내려보세요!

블로그스팟 팝업창 띄우기 

팝업창이 뜨는 기본 원리에 대해서 먼저 설명드리고, 코드를 알려드리도록 하겠습니다.
알려드리는 코드는 복사해서 붙여넣고 쓰시면 되기 때문에 어렵지 않습니다.

 

블로소득 팝업 업데이트 현황

* 8월09일 추가) 마우스 호버(Hover) 시 버튼 커짐
* 8월09일 추가) 모바일에서 바로가기 글자 잘림현상 수정, 오버레이 시 배경화면 잠금(스크롤X)
* 8월09일 추가) 일부 PC에서 버튼이 나오지않는 문제 해결(선택자 이름 수정)
* 8월10일 추가) 바로가기 - 닫기 버튼 위치 상호변경

팝업창 띄우기 준비물

  1. 팝업창에 띄울 이미지(사진)
  2. 팝업을 통해서 방문자를 이동시킬 주소(URL)
팝업의 목적은 결국 방문자, 검색자를 고단가 페이지로 모시는(?) 것이라 생각합니다.
또는 클릭을 유도해서 전면광고를 띄우는데 활용할 수 있겠죠?

팝업창 기본원리

  1. 테마에 본문 3/5 지점에 팝업창이 뜨도록 기본 코드를 탑재
  2. 팝업창의 내용은 페이지에서 작성
  3. 글 작성시 페이지 주소를 불러와서 팝업창을 띄움
글을 작성하다보니깐 복잡하게 느껴질수도 있을것 같은데요 😅
쉽게말해서 블로그스팟에는 글과 페이지가 구분되어 있잖아요?

글은 작성해도 페이지를 잘 안쓰는데 이 부분을 활용할겁니다.
페이지에 팝업에 띄울 이미지를 넣어서 불러오는것이죠~

그러면 페이지에 다양한 이미지를 업로드해놓고..예를들면
노트북 할인에 대한 이미지를 올려놓고, 쿠파스와 연결합니다.
그리고 이케아 도서함과 관련된 이미지를 올려두고 저장해둡니다.

이렇게 페이지에 미리 작업을 해둔 상태에서
책에 관련된 글을 작성하면 이케아 도서함에 대한 팝업창 띄우는 코드를 넣는것이죠
또는 삼성 노트북, 맥북 등에 대해 리뷰를 하게 되면 노트북 팝업을 띄우는 것이죠

블로소득 팝업 소스

블로소득 팝업을 실행시키기 위해서는 먼저 테마의 HTML 편집에서 기본 수정을 해야 합니다.
그리고 [페이지]에 팝업창 내용을 작성하고, [글] 영역에서 페이지를 불러오면 됩니다.

1. 테마 > HTML 편집

먼저 블로그스팟에 접속해서 왼쪽 메뉴에서 [테마] > [HTML 편집] 을 누릅니다.
그리고 화면 하단으로 내려서 </body> 부분을 찾습니다.
</body> 태그 바로 앞에 아래 코드를 붙여넣은 후 저장합니다.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- 홈페이지에서는 팝업을 표시하지 않음 -->
<b:else/>
  <div id='blogsodk-overlay'></div>
  <div id='blogsodk-popup'>
    <div id='blogsodk-popup-content'></div>
    <div id='blogsodk-popup-buttons'>
      <button id='blogsodk-close-button'>닫기</button>
      <button id='blogsodk-link-button'>바로가기</button>
    </div>
  </div>

  <style>
    #blogsodk-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 1000000;
    }
    #blogsodk-popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      border-radius: 10px;
      z-index: 1000001;
      width: 90%;
      max-width: 600px;
      height: auto;
      max-height: 80vh;
      overflow: hidden;
    }
    #blogsodk-popup-content {
      width: 100%;
      height: calc(100% - 80px);
      overflow-y: auto;
    }
    #blogsodk-popup-content img {
      width: 100%;
      height: auto;
      display: block;
    }
    #blogsodk-popup-buttons {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      background-color: white;
      z-index: 1000002;
    }
    #blogsodk-close-button, #blogsodk-link-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;
    }
    #blogsodk-close-button {
      background-color: #E0E0E0;
      color: #333;
    }
    #blogsodk-link-button {
      background-color: #6CA6CD;
      color: white;
    }
    #blogsodk-close-button:hover, #blogsodk-link-button:hover {
      opacity: 0.9;
      transform: scale(1.05);
    }
    body.blogsodk-popup-active {
      overflow: hidden;
    }
    @media (max-width: 600px) {
      #blogsodk-close-button, #blogsodk-link-button {
        font-size: 18px;
      }
    }
    .blogsodk-popup-trigger {
      display: none;  /* 트리거 요소를 숨깁니다 */
    }
  </style>

  <script>
  //<![CDATA[
  function showPopup(content, linkUrl) {
    console.log('Showing popup');  // 디버그 로그
    document.getElementById('blogsodk-popup-content').innerHTML = content;
    document.getElementById('blogsodk-overlay').style.display = 'block';
    document.getElementById('blogsodk-popup').style.display = 'block';
    document.body.classList.add('blogsodk-popup-active');
    
    const linkButton = document.getElementById('blogsodk-link-button');
    linkButton.onclick = function() {
      window.location.href = linkUrl;
    };
  }

  function hidePopup() {
    console.log('Hiding popup');  // 디버그 로그
    document.getElementById('blogsodk-overlay').style.display = 'none';
    document.getElementById('blogsodk-popup').style.display = 'none';
    document.body.classList.remove('blogsodk-popup-active');
  }

  function loadPopupContent(url, linkUrl) {
    console.log('Loading popup content from:', url);  // 디버그 로그
    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;
          } else {
            const wrapper = document.createElement('a');
            wrapper.href = linkUrl;
            img.parentNode.insertBefore(wrapper, img);
            wrapper.appendChild(img);
          }
        });
        
        showPopup(tempDiv.innerHTML, linkUrl);
      })
      .catch(error => console.error('팝업 내용을 불러오는데 실패했습니다:', error));
  }

  function canShowPopup() {
    const lastShownTime = localStorage.getItem('blogsodk-popupLastShown-' + location.pathname);
    if (!lastShownTime) return true;
    
    const oneHour = 60 * 60 * 1000;
    return (Date.now() - parseInt(lastShownTime)) > oneHour;
  }

  function initPopup() {
    console.log('Initializing popup');  // 디버그 로그
    var popupTrigger = document.querySelector('.blogsodk-popup-trigger');
    if (popupTrigger) {
      console.log('Popup trigger found');  // 디버그 로그
      var popupUrl = popupTrigger.getAttribute('data-popup-url');
      var linkUrl = popupTrigger.getAttribute('data-link-url');
      if (popupUrl && linkUrl) {
        console.log('Popup URL:', popupUrl, 'Link URL:', linkUrl);  // 디버그 로그
        window.addEventListener('scroll', function() {
          var scrollPosition = window.scrollY;
          var totalHeight = document.documentElement.scrollHeight - window.innerHeight;
          
          if (scrollPosition > totalHeight * 3/5 && canShowPopup()) {
            console.log('Scroll threshold reached, showing popup');  // 디버그 로그
            loadPopupContent(popupUrl, linkUrl);
            localStorage.setItem('blogsodk-popupLastShown-' + location.pathname, Date.now().toString());
          }
        });
      } else {
        console.log('Missing popup URL or link URL');  // 디버그 로그
      }
    } else {
      console.log('Popup trigger not found');  // 디버그 로그
    }
  }

  // DOMContentLoaded 이벤트를 사용하여 초기화
  document.addEventListener('DOMContentLoaded', initPopup);

  document.getElementById('blogsodk-close-button').addEventListener('click', hidePopup);
  document.getElementById('blogsodk-overlay').addEventListener('click', hidePopup);
  //]]>
  </script>
</b:if>

2. 페이지 : 팝업 이미지 업로드

두번째는 본문 글에서 팝업으로 띄울 사진을 페이지에 업로드하면 됩니다.
사진 크기에 따라 자동으로 팝업창이 변동되도록 만들어두었으니 사진만 올리면 됩니다.

사진 편집은 CANVA, 미리캔버스에서 간단하게 수정해서 사용하시면 됩니다.
(편집 시에 저작권이 있는 이미지, 폰트에 대해서는 주의하시기 바랍니다)

3. 글 작성 : 페이지를 불러와서 팝업 실행

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

테마 수정과 페이지에 이미지를 업로드했다면 이제는 글 영역에 코드만 입력하면 됩니다.
이 코드를 입력하지 않은 글에는 팝업 창이 뜨지않으니 안심하셔도 되구요!

수정해야할 부분은 (1) 블로그스팟 페이지, (2) 바로가기 주소 2가지입니다.

블로그스팟 페이지는 앞서 작성한 팝업 이미지를 업로드한 그 페이지를 붙여넣기 하시면 됩니다.
그리고 바로가기 주소는 어디로 이동시킬지 입력하시면 됩니다.

바로가기 주소 란에 입력된 주소는 팝업창의 이미지+바로가기 버튼 2곳에 모두 적용됩니다. 
아무쪼록 유용하게 사용하셨으면 좋겠고, 앞으로도 도움될만한 코드가 있으면 공유하겠습니다.

Related Posts

로드 중…
✖