공지사항

북마크 입니당 >

랜덤 포스트 버튼 for 구글블로그스팟

 

기본에 널려있는 버튼은,

일체형이라 버튼 위치라든지, 버튼 꾸미는데 제한이 있었다.

여기다,

2개 이상은 설치(?)가 되지 않으니,

걍 하나 만들기로 한다.


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>랜덤 포스트 버튼</title>

    <script type="text/javascript">

        var postLinks = [

            "https://yourblog.blogspot.com/2023/01/post1.html",

            "https://yourblog.blogspot.com/2023/02/post2.html",

            "https://yourblog.blogspot.com/2023/03/post3.html",

            // 블로그의 모든 게시물 링크를 여기에 추가하세요

        ];


        function goToRandomPost() {

            var randomIndex = Math.floor(Math.random() * postLinks.length);

            window.location.href = postLinks[randomIndex];

        }

    </script>

</head>

<body>

    <button onclick="goToRandomPost()">랜덤 포스트 보기</button>

</body>

</html>


이게 제일 깔끔 해 보이네...

그래 이걸로 하자...
근디, 포스트 주소를 내가 일일히 기입 해야 하는겨?


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>랜덤 포스트 버튼</title>
    <script type="text/javascript">
        var postLinks = [];

        function fetchRSS() {
            var rssUrl = "https://yourblog.blogspot.com/feeds/posts/default?alt=rss";
            // CORS 프록시를 사용하여 RSS 피드를 가져옵니다
            var proxyUrl = 'https://cors-anywhere.herokuapp.com/';
            fetch(proxyUrl + rssUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('네트워크 응답이 정상이 아닙니다.');
                    }
                    return response.text();
                })
                .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
                .then(data => {
                    var items = data.querySelectorAll("item");
                    items.forEach(el => {
                        postLinks.push(el.querySelector("link").textContent);
                    });
                    if (postLinks.length > 0) {
                        document.getElementById("randomPostButton").disabled = false; // 버튼 활성화
                    } else {
                        throw new Error('게시글 링크를 찾을 수 없습니다.');
                    }
                })
                .catch(err => {
                    console.error('RSS 피드를 가져오는 중 오류가 발생했습니다:', err);
                    alert("RSS 피드를 가져오는 중 오류가 발생했습니다. 나중에 다시 시도해주세요.");
                });
        }

        function goToRandomPost() {
            if (postLinks.length === 0) {
                alert("게시글 링크를 가져오는 중입니다. 잠시 후 다시 시도해주세요.");
                return;
            }
            var randomIndex = Math.floor(Math.random() * postLinks.length);
            window.location.href = postLinks[randomIndex];
        }

        document.addEventListener("DOMContentLoaded", fetchRSS);
    </script>
</head>
<body>
    <button id="randomPostButton" onclick="goToRandomPost()" disabled>랜덤 포스트 보기</button>
</body>
</html>

그렇지! RSS를 파싱해서 가져오면 되는겨....




하...
근디 역시 구글...
파싱을 막아놨다...

그러면 포기하는겨?

ㄴㄴ.


일전에 만들어 놓은

이 코드들을 이용하면 되지요...

제일 위 코드 중
window.location.href = postLinks[randomIndex];
이 코드에, postLinks에 배열 형식으로 각 포스트 링크를 넣어두면?


이렇게 정상적으로 작동이 된다.

이렇게 버튼 위치를 내 맘대로 나둘 수 있고,
각 버튼마다 스타일, 갯수 등 마음대로 할 수 있다.

이것을 응용하면,
각 카테고리(주제)마다 랜덤 기능을 수행하는 버튼도 만들 수 있다.

링크만 가져오면 되기 때문이다.



밑에 보면, '더 이상 보지 않기' 체크 박스가 있는데, 그것을 체크하면 그 페이지를 제외한 나머지 랜던 페이지를 보여주는 것이고.
정말 간단하다.

해당 페이지 체크 사항을 기록 했다가 그 페이지가 로드가 되면, 랜덤 페이지 함수를 실행시킨다.
애초에 랜덤 링크 함수에서 해당 페이지 링크를 제외하면 되기는 하지만...
페이지를 한번이라도 로드 해야지, 수익이 오르니까....
화성 갈끄니까...


아직 본 블로그에는 구현 안 해 놓았고,
다른 블로그에 구현 해 놨다.
다른 블로그는... 걍 소비성 게시글이니,,,
근디 이 블로그는 아니니 말이다.

댓글

7일동안 많은 클릭!!!

캐드 글자 깨짐 해결하는 방법(세가지)

태그(카테고리) 별 버튼 글자 색깔을 바꿔보자 with chatGPT

DWG TrueView 2024 설치 오류(4000), autoCad를 설치 해 보세요... 그래도 안 되면....

태양광 공작물축조신고 기준, 무게에 따라서 공작물 축조 신고 해야 되여...

베테랑2~사적 제재의 위험성을 보여주는 영화, 삐질...

무선 미라캐스트 끊김 현상을 극복하기 위해서는