브라운관

랜덤 포스트 버튼 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에 배열 형식으로 각 포스트 링크를 넣어두면?


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

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

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

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



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

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


아직 본 블로그에는 구현 안 해 놓았고,
다른 블로그에 구현 해 놨다.
다른 블로그는... 걍 소비성 게시글이니,,,
근디 이 블로그는 아니니 말이다.
관련글(카테고리 별 랜덤글 6개!!!!)
Loading label...

댓글

7일동안 많은 클릭!!!

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

강철의 연금술사~ 시리즈 다시보기 및 순서 & 주제곡으로 유명한 애니

바람의 검심~ 다시보기 및 순서 & 실사판 영화도....

헌터x헌터~ 시리즈 다시보기 및 순서

농사용전기에 붙어 있는 고추건조기를 태양광 인버터에 연결 해도 될까?

led 번들 컨넥터, 잔광 콘덴서 앞에 달까 뒤에 달까? 그게 상관있음???

검전기가 측정 실수를 하는 경우는 언제일까?(이 것은 부실인가 부정인가)

마케팅을 한다면 링크 게이트웨이를 구성하자

다이소 전등 스위치, 기존 결선과 똑같이 하면 안 됨(3구 및 4구 스위치 결선 예시)