블로그에 판업창을 띄워보자!

자바스크립트로 판업창 띄우기.

먼저, 제가 올린 코드를 복사합니다!. 

 

#변경된 코드 -> 하루에 한번만 판업이 뜹니다! 주석은 내일 시간날때 생각나면 해볼게요 :)

 

<script type="text/javascript">
    // Function to check if the user is using a mobile device
    function isMobileDevice() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    // Check if the popup has been opened before and if the user is not using a mobile device
    if (!localStorage.getItem('popupOpened') && !isMobileDevice()) {
        var wnd = window.open("", "info", "width=600, height=600");
        wnd.document.write(
            "<style>",
            "body {",
            "   background-image: url('https://tistory3.daumcdn.net/tistory/6485670/skin/images/4100_08.png');",
            "   background-repeat: no-repeat;",
            "   background-size: cover;",
            "}",
            "</style>",

            "<h2 style=\"text-align: center;\">방문자 여러분 환영해요!!!</h2>",
            "<ul>",
            "<p style=\"text-align: center;\"><strong>필독!! 맞구독을 하고싶은데 찾기가 너무 어려워요! 방명록에 남겨주세요!</strong><p>",
            "<p style=\"text-align: center;\"><strong>코딩 문의 사항있으시면 오른쪽 사이드바 최상단 인스타로 디엠주세요</strong><p>",
            "<p style=\"text-align: center;\"><strong>공지사항은 7주일에 한번씩 업데이트됩니다 :)</strong></p>",
            "</ul>"
        );

        // Mark the popup as opened in localStorage
        localStorage.setItem('popupOpened', 'true');

        // Close the popup after 2 seconds
        setTimeout(function() {
            wnd.close();
        }, 10000);
    } else {
        // Check if the popup was shown today
        var today = new Date().toISOString().slice(0, 10);
        var lastPopupDate = localStorage.getItem('popupDate');

        if (lastPopupDate !== today) {
            // Show the popup again for a new day
            localStorage.setItem('popupDate', today);

            var wnd = window.open("", "info", "width=600, height=600");
            wnd.document.write(
                "<style>",
                "body {",
                "   background-image: url('https://tistory3.daumcdn.net/tistory/6485670/skin/images/4100_08.png');",
                "   background-repeat: no-repeat;",
                "   background-size: cover;",
                "}",
                "</style>",

                "<h2 style=\"text-align: center;\">방문자 여러분 환영해요!!!</h2>",
                "<ul>",
                "<p style=\"text-align: center;\"><strong>필독!! 맞구독을 하고싶은데 찾기가 너무 어려워요! 방명록에 남겨주세요!</strong><p>",
                "<p style=\"text-align: center;\"><strong>코딩 문의 사항있으시면 오른쪽 사이드바 최상단 인스타로 디엠주세요</strong><p>",
                "<p style=\"text-align: center;\"><strong>공지사항은 7주일에 한번씩 업데이트됩니다 :)</strong></p>",
                "</ul>"
            );

            // Mark the popup as opened for the new day
            localStorage.setItem('popupOpened', 'true');

            // Close the popup after 2 seconds
            setTimeout(function() {
                wnd.close();
            }, 10000);
        }
    }
</script>

내 블로그 스킨편집으로 이동해서 HTML 편집으로 들어가주세요!!!!.

head 태그 사이에 이 코드를 넣어줍니다!

html 편집 클릭!

 

붙여넣기! 저장! -> 끝!

 

 

짜잔 블로그에 멋진 판업창이 생겼어요!! 신난다~~~~

제블로그 판업 허용해주실거죠?!

 

     사진출처

작가 catalyststuff

렛서판다!