수익에 도움이 되실만한 블로그스팟 코드가 어떤게 있을까 고민을 해봤습니다.
그 중에서 본문을 거의 다 읽어갈 때 나오는 팝업창에 대해서 궁금해하는 분들이
계시는 것 같더라구요!
그래서 준비했습니다. 블로소득 팝업으로 블로그스팟 월 100만원 돌파!
블로그스팟 팝업창 띄우기
팝업창이 뜨는 기본 원리에 대해서 먼저 설명드리고, 코드를 알려드리도록
하겠습니다.
알려드리는 코드는 복사해서 붙여넣고 쓰시면 되기 때문에 어렵지 않습니다.
블로소득 팝업 업데이트 현황
* 24년 8월09일 추가) 마우스 호버(Hover) 시 버튼 커짐
* 24년 8월09일 추가) 모바일에서 바로가기 글자 잘림현상 수정, 오버레이 시 배경화면 잠금(스크롤X)
* 24년 8월09일 추가) 일부 PC에서 버튼이 나오지않는 문제 해결(선택자 이름 수정)
* 24년 8월10일 추가) 바로가기 - 닫기 버튼 위치 상호변경
* 25년 8월 26일 블로소득 3종 코드와 통합 [바로가기]
팝업창 띄우기 준비물
- 팝업창에 띄울 이미지(사진)
- 팝업을 통해서 방문자를 이동시킬 주소(URL)
팝업의 목적은 결국 방문자, 검색자를 고단가 페이지로 모시는(?) 것이라
생각합니다.
또는 클릭을 유도해서 전면광고를 띄우는데 활용할 수 있겠죠?
팝업창 기본원리
- 테마에 본문 3/5 지점에 팝업창이 뜨도록 기본 코드를 탑재
- 팝업창의 내용은 페이지에서 작성
- 글 작성시 페이지 주소를 불러와서 팝업창을 띄움
글을 작성하다보니깐 복잡하게 느껴질수도 있을것 같은데요 😅
쉽게말해서 블로그스팟에는 글과 페이지가 구분되어 있잖아요?
글은 작성해도 페이지를 잘 안쓰는데 이 부분을 활용할겁니다.
페이지에 팝업에 띄울 이미지를 넣어서 불러오는것이죠~
그러면 페이지에 다양한 이미지를 업로드해놓고..예를들면
노트북 할인에 대한 이미지를 올려놓고, 쿠파스와 연결합니다.
그리고 이케아 도서함과 관련된 이미지를 올려두고 저장해둡니다.
이렇게 페이지에 미리 작업을 해둔 상태에서
책에 관련된 글을 작성하면 이케아 도서함에 대한 팝업창 띄우는 코드를 넣는것이죠
또는 삼성 노트북, 맥북 등에 대해 리뷰를 하게 되면 노트북 팝업을 띄우는 것이죠
블로소득 팝업 소스
블로소득 팝업을 실행시키기 위해서는 먼저 테마의 HTML 편집에서 기본 수정을 해야
합니다.
그리고 [페이지]에 팝업창 내용을 작성하고, [글] 영역에서 페이지를 불러오면
됩니다.
✅ 블로소득 팝업 코드는 3종(팝업/플로팅/인스턴트) 코드와 통합되었습니다.
아래 링크를 클릭해서 3종 코드로 한번에 적용해보세요!
블로소득 팝업 3종 시리즈 코드 | 블로그스팟 전용 - 블로소득의 블로그스팟
유튜버 블로소득이 제작한 블로그스팟 전용 팝업 3종 시리즈 코드입니다. 이 코드를 테마에 적용하면 팝업이 즉시 뜨는 인스턴트 팝업, 본문 60% 지점에 뜨는 블로소득 팝업, 스크롤바 오른쪽에 배너가 뜨는 플로팅까지 모두 구현하실수 있습니다.
blogsodk.blogspot.com- 테마 > HTML 편집
- 페이지 : 팝업 이미지 업로드
- 글 작성 : 페이지를 불러와서 팝업 실행
바로가기 주소 란에 입력된 주소는 팝업창의 이미지+바로가기 버튼 2곳에 모두 적용됩니다.
아무쪼록 유용하게 사용하셨으면 좋겠고, 앞으로도 도움될만한 코드가 있으면 공유하겠습니다.
