📌 25년 8월 26일 코드 대폭 업데이트 : 중복 코드 수정
📌 24년 8월 27일 코드 업데이트 : 플로팅 배너 오류 수정
* 멤버십 구독자 Aproct 님께서 많이 도와주셨습니다
😀
블로소득 팝업을 시작으로 플로팅 배너까지 코드를 공유해드렸는데요!
이번에는 접속과 동시에 바로 팝업이 뜨는 인스턴트 팝업을 추가하여 총 3종을 공개합니다.
이 코드 하나만 추가해두면 블로소득 팝업 시리즈 3종을 모두 사용하실수 있습니다.
블로소득 팝업 시리즈 3종 작동원리
블로소득이 만든 팝업 시리즈는 거듭 말씀드리지만 누구의 도움없이 AI와 함께 만든 코드입니다.
그래서 코드가 다소 지저분하게 느끼실분도 계시겠지만 나름 시간을 투자해서 만든 코드입니다.
기본 팝업코드 추가 후 작동시킬 글에만 특정코드 입력하여 사용
블로그스팟 테마 HTML 편집에서 특정위치에 붙여넣기 하면 작동을 하는데
이 코드를 넣는다고 해서 갑자기 블로그 내 모든 페이지에서 팝업이 막 튀어나고 그러진 않습니다 😅
팝업이 작동할 글에 특정코드만 넣어줘서 그 글에만 나오도록 작동하게 되었습니다.
1. 블로소득 팝업 3종 코드 복붙하기
아래 코드를 복사해서 아래 메뉴로 이동합니다.테마 > 맞춤설정 🔽 > HTML 편집 메뉴
화면을 가장 아래로 내립니다. 그리고 </body> 앞에 이 코드를 붙여넣기 합니다.
다시한번 말씀드리지만 뒤가 아니라 (여기!! 앞부분) </body> 에 넣으셔야 합니다.
<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; }
.blogsodk-popup-trigger, .blogsodk-instant-popup-trigger { display: none; }
.blogsodk-floating-banner { position: fixed; top: 20vh; right: 0; border-radius: 5px 0 0 5px; box-shadow: -2px 2px 5px rgba(0,0,0,0.2); display: none; font-family: Arial, sans-serif; z-index: 1000; overflow: hidden; max-width: 300px; transition: all 0.3s ease; }
.blogsodk-floating-content { display: flex; flex-direction: column; text-decoration: none; cursor: pointer; position: relative; line-height: 0; font-size: 0; }
.blogsodk-floating-line { padding: 10px; text-align: center; font-size: 14px; word-wrap: break-word; transition: all 0.3s ease; line-height: 1; }
.blogsodk-floating-line1 { background-color: #8B0000; color: white; }
.blogsodk-floating-content:hover .blogsodk-floating-line1 { background-color: white; color: #8B0000; }
.blogsodk-floating-line2, .blogsodk-floating-line3, .blogsodk-floating-line4 { background-color: #f0f0f0; color: #333; }
.blogsodk-floating-image { max-width: 200px; width: 100%; height: auto; object-fit: cover; display: block; margin: 0; padding: 0; vertical-align: top; }
.blogsodk-floating-line:has(.blogsodk-floating-image) { padding: 0; line-height: 0; font-size: 0; }
.blogsodk-close-banner { position: absolute; top: 5px; right: 5px; cursor: pointer; font-size: 16px; color: #666; background-color: rgba(255, 255, 255, 0.7); padding: 2px 6px; border-radius: 3px; z-index: 1001; }
.blogsodk-floating-banner:hover { box-shadow: -4px 4px 10px rgba(0,0,0,0.3); }
@media (max-width: 768px) { .blogsodk-floating-banner { max-width: 200px; } .blogsodk-floating-image { max-width: 130px; } }
</style>
<div id='blogsodk-overlay'>
<div id='blogsodk-popup'>
<div id='blogsodk-popup-content'></div>
<div id='blogsodk-popup-buttons'>
<button id='blogsodk-close-button' onclick='blogsodk_hidePopup()'>닫기</button>
<button id='blogsodk-link-button'>바로가기</button>
</div>
</div>
</div>
<div class='blogsodk-floating-banner'>
<a class='blogsodk-floating-content' href='#' id='blogsodk-floating-content'></a>
<span class='blogsodk-close-banner' onclick='event.stopPropagation(); this.parentElement.style.display="none";'>✖</span>
</div>
<script>
//<![CDATA[
function blogsodk_showPopup(content, linkUrl) {
const popupContent = document.getElementById('blogsodk-popup-content');
if (!popupContent) return; // 요소가 없으면 함수 종료
popupContent.innerHTML = content;
document.getElementById('blogsodk-overlay').style.display = 'block';
document.getElementById('blogsodk-popup').style.display = 'block';
document.body.classList.add('blogsodk-popup-active');
document.getElementById('blogsodk-link-button').onclick = function() { window.location.href = linkUrl; };
}
function blogsodk_hidePopup() {
document.getElementById('blogsodk-overlay').style.display = 'none';
document.getElementById('blogsodk-popup').style.display = 'none';
document.body.classList.remove('blogsodk-popup-active');
}
function blogsodk_loadAndDisplay(url, linkUrl, isPopup = true) {
if (localStorage.getItem('blogsodk-popupShown') !== null && isPopup) return; // 팝업은 한 번만 띄우기
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');
if (!content) throw new Error("게시글 본문을 찾을 수 없습니다.");
const tempDiv = document.createElement('div');
tempDiv.innerHTML = content.innerHTML;
const images = tempDiv.querySelectorAll('img');
images.forEach(img => {
const wrapper = document.createElement('a');
wrapper.href = linkUrl;
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
});
if (isPopup) {
blogsodk_showPopup(tempDiv.innerHTML, linkUrl);
localStorage.setItem('blogsodk-popupShown', 'true');
} else {
const bannerElement = document.querySelector('.blogsodk-floating-banner');
const contentElement = bannerElement.querySelector('.blogsodk-floating-content');
contentElement.href = linkUrl;
contentElement.innerHTML = tempDiv.innerHTML;
bannerElement.style.display = 'block';
}
})
.catch(error => console.error('내용을 불러오는데 실패했습니다:', error));
}
document.addEventListener('DOMContentLoaded', () => {
const instantTrigger = document.querySelector('.blogsodk-instant-popup-trigger');
const scrollTrigger = document.querySelector('.blogsodk-popup-trigger');
const floatingTrigger = document.querySelector('.blogsodk-floating-trigger');
if (instantTrigger) {
const { popupUrl, linkUrl } = instantTrigger.dataset;
blogsodk_loadAndDisplay(popupUrl, linkUrl, true);
} else if (scrollTrigger) {
const { popupUrl, linkUrl } = scrollTrigger.dataset;
let isPopupShown = false;
window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
if (totalHeight > 0 && scrollPosition > totalHeight * 0.6 && !isPopupShown) {
blogsodk_loadAndDisplay(popupUrl, linkUrl, true);
isPopupShown = true;
}
});
}
if (floatingTrigger) {
const { floatingUrl, linkUrl } = floatingTrigger.dataset;
blogsodk_loadAndDisplay(floatingUrl, linkUrl, false);
}
});
//]]>
</script>2. 팝업, 플로팅 내용 입력하기
우리가 글을 작성할 때는 글 메뉴를 사용하고, 팝업에 대한 내용은 페이지를 사용합니다.
글과 페이지의 차이는 얼마나 최신성을 유지하느냐에 따라 다르다고 보시면 되는데요!
통상 팝업 내용은 한번 발행하고나면 거의 변경을 하지않는 반면 글은 다르죠..
그래서 검색엔진에서도 글을 먼저 긁어가고, 페이지는 조금 늦거나 안 긁어가기도 합니다.
이러한 점을 고려해서 잘 쓰지않는 페이지를 활용하여 팝업 기능을 만들었습니다.
팝업이미지는 이미지 제외한 나머지 공백은 삭제!
팝업 이미지 주의사항
페이지에 이미지를 업로드하고 난 후에 이미지 크기를 [아주크게]로 만들어주는게 좋습니다.
작게하면 작은 상태에서 팝업이 활성화 될때 확대를 시키기 때문에 그림이 깨집니다.
플로팅 이미지 주의사항
플로팅의 경우 이미지만 적용되도록 수정하였습니다.
글자를 아무리 작성해도 페이지에 들어가있는 이미지만 플로팅 배너 형식으로 나옵니다.
3. 본문 새 글에 적용하기
테마 HTML 수정했고, 페이지에 팝업/플로팅 내용도 작성했다면 이제 마지막은 글에 적용하는겁니다.
모든 글에 팝업, 플로팅이 작동되지 않도록 만들었기 때문에 새 글에 특별한 코드를 넣어야 합니다.
코드를 넣으실때는 HTML 보기에서 넣으세요!
이 코드는 팝업, 플로팅, 인스턴트에 따라 다릅니다. 사용하고자 하는 코드를 골라서 넣으시면 됩니다.
아래 코드는 본문 글을 다 작성하시고 <마지막 줄>에 넣어주세요!!
(1) 인스턴트 팝업 : 페이지 접속과 동시에 팝업 활성화
<div
class="blogsodk-instant-popup-trigger"
data-popup-url="사진을 넣은 페이지 주소"
data-link-url="클릭하면 이동할 링크 주소"
></div>(2) 플로팅 배너 : 오른쪽 스크롤바에 활성화
<div
class="blogsodk-floating-trigger"
data-floating-url="사진을 넣은 페이지 주소"
data-link-url="클릭하면 이동할 링크 주소"
></div>(3) 블로소득 팝업 : 본문 60% 지점에서 팝업 활성화
<div
class="blogsodk-popup-trigger"
data-popup-url="사진을 넣은 페이지 주소"
data-link-url="클릭하면 이동할 링크 주소"
></div>대부분 필요한 기능들을 다 넣은것 같은데 앞으로 더 업그레이드가 있을지 모르겠습니다만..
정상 작동하지 않는 경우가 생긴다면 수시로 수정하도록 하겠습니다.
.png "블로소득")