){kind=link}
아마도 많은 분들이 사이트에 접속했을때 오른쪽에 고정되어 있는 팝업 형식의 창을
보셨을텐데요!
본문을 읽어야 작동하는 팝업과 달리 플래그는 오른쪽 사이드바에 고정되어
보여집니다.
블로소득 플로팅 코드 작동원리
현재 보시는 글에도 적용을 했는데 오른쪽 상단에 보시면 플로팅 광고가 떠
있습니다.
화면 스크롤을 내리거나 올려도 블로소득 플로팅은 변함없이 그 자리에 위치하고
있습니다.
테마에 플로팅 코드를 넣은 후 페이지에 광고 문구를 작성하고, 글(본문)에서
불러오는 방식입니다.
블로소득 플로팅 코드의 작동원리는 기존 블로소득 팝업과 동일합니다.
블로소득 플로팅 코드 활용방법
플로팅 코드는 삽입한 글에만 작동하도록 만들었습니다. 그 이유는 무분별한 사용을
줄이기 위함이죠!
'과유불급(過猶不及)'
플로팅 코드에 욕심을 내는 이유는 그만큼 수익을 더 잘 내기 위해 사용한다고
생각합니다.
하지만 욕심이 많아질수록 검색자들의 불편함은 더 많아집니다. 광고를 많이
봐야하니깐요..
그래서 팝업 또는 플로팅 둘 중에 하나만 적용해서 사용하시는 것을 추천드립니다.
플로팅 코드에 쿠팡파트너스 사용을 권장하지 않습니다!
아마도 많은 분들이 쿠팡파트너스 배너를 넣어서 사용하면 좋겠지? 라는 생각을
하실것 같습니다.
물론 좋은 생각입니다만, 쿠팡파트너스 운영정책 4.1 이용제한 사유를 보시면 무효클릭 및 이를 유도하는 행위에 플로팅 광고가 해당됩니다.
- 광고를 방문자의 액션을 유도하는 버튼과 근접하지 않을것
- 위젯이나 레이어(플로팅)을 이용해 방문자의 오클릭을 유도 하지 않을것
현재 제가 설정한 우측 상단의 경우 운영정책에 위배되는 위치는 아니지만...
혹시나 악의적인 신고 등으로 피해보는 분이 생길수도 있기에 권장드리지 않습니다.
* 만약의 사태를 방지하고자 이 부분을 동의하신다는 가정하에 사용하는 걸로
간주하도록 하겠습니다.
블로소득 플로팅 코드 적용방법
- 블로그스팟 테마에 플로팅 코드 삽입
- 페이지 > 새 페이지 > 광고 문구 작성
- 글 > 새 글 > 페이지 광고 불러오기
팝업과 동일하게 사용하지않는 페이지에 광고문구를 작성하여 불러오기 때문에
어렵지 않습니다.
쉽게 생각해서 페이지 = 광고 및 팝업내용을 작성하는 공간이라고 인식하시면
좋을것 같네요!
플로팅 코드를 넣지않은 글은 플로팅이 뜨지 않습니다(개별 작동)
그리고 글에 들어가서 평소와 같이 작성한 후 페이지 광고 글을 불러오기 하시면
됩니다.
복사해서 붙여넣기 수준이니 글을 잘 읽으시면서 따라오시면 되겠습니다.
1. 블로그스팟 테마 > HTML 편집
먼저 블로그스팟에 접속해서 왼쪽의 테마를 누르고, HTML 편집으로 들어갑니다.
그리고 스크롤을 가장 밑으로 내려서 </body></html> 보이도록 화면을
내립니다.
아래에 알려드리는 코드를 복사해서 </body> 바로 앞에 붙여넣기 합니다.
<style>
.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;
}
.blogsodk-floating-line {
padding: 10px;
text-align: center;
font-size: 14px;
word-wrap: break-word;
transition: all 0.3s ease;
}
.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;
object-fit: cover;
display: block;
margin: 0 auto;
padding: 0;
}
.blogsodk-floating-line:has(.blogsodk-floating-image) {
padding: 0;
}
.blogsodk-close-banner {
position: absolute;
bottom: 5px;
left: 5px;
cursor: pointer;
font-size: 14px;
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 class='blogsodk-floating-banner'>
<a class='blogsodk-floating-content' href='#' id='blogsodk-floating-content'>
<!-- Content will be dynamically inserted here -->
</a>
<span class='blogsodk-close-banner' onclick='event.stopPropagation(); this.parentElement.style.display="none";'>✖</span>
</div>
<script>
//<![CDATA[
function blogsodk_loadBannerContent(url, linkUrl) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, 'text/html');
var content = doc.querySelector('.post-body');
if (content) {
var floatingContainer = document.getElementById('blogsodk-floating-content');
floatingContainer.innerHTML = ''; // Clear existing content
var elements = content.children;
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var line = document.createElement('div');
line.className = 'blogsodk-floating-line blogsodk-floating-line' + (i + 1);
if (element.classList.contains('separator')) {
var img = element.querySelector('img');
if (img) {
var newImg = document.createElement('img');
newImg.src = img.src;
newImg.className = 'blogsodk-floating-image';
line.appendChild(newImg);
}
} else {
line.textContent = element.textContent.trim();
}
floatingContainer.appendChild(line);
}
floatingContainer.href = linkUrl;
document.querySelector('.blogsodk-floating-banner').style.display = 'block';
}
}
};
xhr.open('GET', url, true);
xhr.send();
}
window.addEventListener('load', function() {
var trigger = document.querySelector('.blogsodk-floating-trigger');
if (trigger) {
var floatingUrl = trigger.getAttribute('data-floating-url');
var linkUrl = trigger.getAttribute('data-link-url');
if (floatingUrl && linkUrl) {
blogsodk_loadBannerContent(floatingUrl, linkUrl);
}
}
});
//]]>
</script>붙여넣기 했다면 오른쪽 상단의 디스켓 모양의 저장 버튼을 누르고 대시보드로 나옵니다.
2. 페이지 > 새 페이지(광고 문구 작성)
다음은 페이지에 광고 문구를 작성하면 되는데 몇가지 주의사항이 있습니다.
- 광고 문구를 3줄 이상, 10자 이상 작성하지 말것
- 이미지는 PC(가로200), 모바일(가로125) 고정되어 보임
광고 문구의 1번째 줄은 남색 배경에 흰색 글씨가 적용되어 보입니다.
일종의 광고 타이틀이라고 생각하시면 되니 1번째 줄은 주요 제목을 넣어주세요!
그리고 2번째과 3번째 줄은 흰 배경에 글씨(텍스트)또는 이미지를 넣을 수 있습니다.
이미지 크기는 줄이지않고 그대로 올리셔도 자동으로 이미지 크기를 조절해서 보여집니다.
대신 이미지 크기만 줄어들기 때문에 가급적 이미지 사이즈를 줄이는 것이 방문자에게 빠르게 보여집니다.
주의사항을 확인하고, 광고 문구를 작성했다면 (보기) 버튼을 통해 페이지 주소를 확인합니다.
3. 글 > 새 글(광고 불러오기)
1번과 2번을 모두 끝냈다면, 이제 마지막으로 글을 작성하고 플로팅 코드를 넣으면 됩니다.
플로팅 코드는 왼쪽 상단의 연필 모양을 클릭하여 HTML 보기를 눌러 삽입할 수 있습니다.
아래 코드를 복사하기 전에 주의사항이 있습니다. 2개의 주소를 지정해주셔야 합니다.
<div class="blogsodk-floating-trigger" data-floating-url="사진주소.html" data-link-url="링크주소.com" style="display:none;"></div>- data-floating-url= 2번에서 작성한 페이지 주소.html
- data-link-url= 플로팅을 클릭했을때 이동시킬 주소.html
위 코드를 그대로 복사해서 사용하면 (당연히) 안되고, 제가 설명해둔 부분을 수정해야 합니다.
페이지 주소를 입력하고, 클릭했을때 이동시킬 주소를 입력해주셔야 플로팅 광고 세팅이 완료됩니다.
3-1. 에러메세지 let label = []; 해결방법
간혹 테마에 따라 첫 줄에 let label = []; 이라는 에러메세지가 떠 있는 경우가 있습니다.
이럴 경우에는 다른 코드를 수정하기 보다는 아래 코드를 </head> 앞에 추가하시면 됩니다.
<style>
.blogsodk-floating-banner .blogsodk-floating-line:first-child {
display: none;
}
</style>이렇게 코드를 추가하면 에러메세지 첫 줄이 사라지게 됩니다.
let label = []; 코드는 관련 게시물 불러오는 스크립트로 삭제할 경우에 테마에 문제가 생길수 있습니다.
따라서 플로팅 코드를 넣은 게시물의 경우는 이 코드를 통해서 해결할 수 있습니다.
블로그스팟의 개방성이 높은 편이지만, 그렇다고 불법적으로 사용해서는 절대 안됩니다.
이러한 점을 주의해서 수익이 도움되는 방법을 고민해보시면 좋을것 같습니다. 감사합니다.