누르고 싶은 구독버튼 만들기

 

안녕하세요 cocoder 입니다. 이번 포스팅은 누르고 싶은 구독버튼 만들기 포스팅을 해보려고 합니다.

 

이번 작업은 난이도가 좀 있는 작업이 될 것 같습니다. (잘 안되시면 댓글로 문의주시면 답변드릴게요 ^^)

 

먼저 시연영상 보여드릴게요!

 

 

스크롤의 진행도가 80~95% 일때(게시글을 거의 다 읽었을 때) 구독버튼이 나오게 설정했고 댓글달때 지장없도록 95%이상이 되면 다시 들어가게 설정을했습니다.

 

이미지 파일도 공유드릴게요

subscribe_icon.png

0.70MB

 

원하시는 사진파일이 있으시면 사용하셔도 됩니다. 가로와 세로길이가 같은 이미지(정사각형 이미지)로 하시는걸 추천드립니다.

 

일단 시작전에! 확인해주셔야하는 부분이 있습니다. 블로그 id를 확인해야합니다. 방법을 알려드릴게요!

 

일단 티스토리 관리 페이지로 넘어가서 '꾸미기 > 메뉴바/구독 설정'으로 이동합니다. '구독 버튼 설정' 을 표시합니다로 변경하고 구독버튼 위치를 지정합니다. 저는 오른쪽 하단으로 위치시켰습니다.

 

요렇게 설정이 되셨으면 변경사항을 저장하시고 티스토리 로그아웃을 해주세요. 그런뒤에 로그아웃 상태에서 내 블로그에 방문합니다.

 

하단 오른쪽에 구독하기 버튼이 보입니다. F12를 누르고 개발자 도구를 엽니다.

 

빨간색 으로 표시된 오른쪽 상단의 버튼을 누르고 구독버튼으로 커서를 옮긴뒤에 위 사진처럼 button 범위를 잡고 클릭을 누릅니다.

 

오른쪽에 button이라는 태그를 보실수 있을거에요! 태그를 잘보면 data-blog-id="6967628" 요런 텍스트가 있으실거에요

6967628 이 부분이 블로그 id입니다. 이걸 기억해둡시다.

 

---

 

이제 코드들을 붙여넣을건데 

'꾸미기 > 스킨편집' 으로 새 창을 띄웁니다. 오른쪽 상단에 'html 편집' 버튼을 클릭합니다.

 

상단의 탭중에 '파일업로드' 라고있습니다. 이동합시다. 

 

'+추가' 버튼으로 사용할 이미지를 업로드 합니다. 업로드가 완료되면 업로드한 파일이 목록에 나올거에요!

---

 

이제 코드들을 붙여넣기 할건데 그전에 본인의 취향에 맞게 코드들을 수정해줍니다. /*  */ 요렇게 주석으로 표시한 부분만 수정하셔도 될거에요!

 

css

.subscribe_box {
    z-index: 9999;
    height: 100px;
    width: 100px;
    position: fixed; 
    right: -100px;
    bottom: 10%; /* 숫자가 커지면 이미지의 위치가 위로 올라갑니다. 작아지면 내려갑니다. */
    background-image: url('images/subscribe_icon.png');  /* 'images/' 이 경로 뒤에 이미지의 파일명을 입력합니다. */
    background-size: cover; 
    background-position: center; 
}

.subscribe_box button {
    margin-top: 96px; /* 구독버튼의 상하 위치를 조절합니다. 커질수록 내려갑니다. */
    margin-left: 17px; /* 구독버튼의 좌우 위치를 조절합니다. 커질수록 오른쪽으로갑니다. */
    border: none;
    border-radius: 10px;
    background-color: black; /* 구독버튼의 배경색입니다. 원하는 색상코드를 입력합니다. */
    color: white;
    padding: 10px 20px;
    font-size: 15px; /* 구독버튼의 글자크기를 조정합니다. */
    cursor: pointer;
    transition: background-color 0.3s;
}

.subscribe_box button:hover {
    background-color: #333;  /* 구독버튼에 마우스를 올렸을때 변하는 색입니다. 색상코드를 입력합니다. */
  }

.subscribe-box-visible {
    right: 0px;
    transition: right 0.5s ease; /* 이미지가 튀어나오는 속도입니다. 작을수록 빨리나옵니다. */
  }
  
  .subscribe-box-hidden {
    right: -100px;
    transition: right 0.5s ease; /* 이미지가 사라지는 속도입니다. 작을수록 빨리사라집니다. */
  }​​​

---

 

html

<div class="subscribe_box">
    <button id="subButton" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="블로그id" data-url="블로그 주소" data-device="web_pc" onclick="subscribe()">구독</button>
</div>

블로그id는 위에서 준비했던걸 입력합니다. 블로그 주소는 본인의 메인 블로그 주소 입력하시면 됩니다.

 

<div class="subscribe_box">
    <button id="subButton" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="6967628" data-url="https://cocoder.tistory.com" data-device="web_pc" onclick="subscribe()">구독</button>
</div>​

입력이 완료된 모습입니다.

---

 

js

<script>
    window.addEventListener('scroll', () => {
        const scrollHeight = document.documentElement.scrollHeight;
        const clientHeight = document.documentElement.clientHeight;
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        // 스크롤 비율 계산
        const scrollPercent = (scrollTop + clientHeight) / scrollHeight;

        const subscribeBox = document.querySelector(".subscribe_box");

        // 스크롤이 80% 이상이고 90% 미만인 경우
        if (scrollPercent >= 0.8 && scrollPercent < 0.95) {
            subscribeBox.classList.add("subscribe-box-visible");
            subscribeBox.classList.remove("subscribe-box-hidden");
        } else {
            // 그 외의 경우, 숨김 처리
            subscribeBox.classList.add("subscribe-box-hidden");
            subscribeBox.classList.remove("subscribe-box-visible");
        }
    });

    function subscribe(){
        alert("구독 감사합니다 😘");
    }
</script>

 

이제 코드를 붙여넣기 하겠습니다. css탭 제일 상단에 붙여넣기 하겠습니다.

@charset "UTF-8"; 

이 코드 다음에 css 코드를 붙여넣었습니다.

 

html 코드는 html 탭의 제일 하단에 </body>태그 바로 위에 붙여넣겠습니다.

 

js 코드는 </html>파일 끝에 붙여넣기하겠습니다.

 

요렇게 하면 완료가 되었습니다. 미리보기를 하시고 스크롤을 내려보면 구독버튼이 나올겁니다. 맘에 안드신다면 소스코드를 조금씩 변경하시면서 원하시는 결과가 나오면 적용버튼을 눌러서 블로그에 반영하시면 됩니다.

 

이번 포스팅은 난이도가 조금 있는 부분이라 모르시거나 잘 안되는 부분 댓글달아주시면 설명드리겠습니다.

 

감사합니다. 🤗🤗