게시판 상단 내용에 나오게 하고 싶어요

게시판 상단 내용에 아래와 같은걸 입력해서 나오게 하고싶어요.

어떻게 적용해야 할까요?

해당 스킨에다가 해야한다면 대충 그누보드 기본 기준 어디에다 해야할까요?

그누보드 내용관리에서 넣으면 되더라구요. 게시판 상단에 적용하면 안되더라구요

부탁드립니다. ㅠㅠ

<!DOCTYPE html>
<html>    <head>
        <title>서버 정보</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f3f3f3;
                margin: 0;
                padding: 0;
            }

            .header {
                text-align: center;
                padding: 20px;
                padding-top: 100px;
                font-family: 'GUGI',cursive;
                background-image: url('https://mc-heads.net/avatar/서버아이디/600');
                background-size: cover;
                background-position: center 400px;
                color: black;
                margin-bottom: 20px;
                height: 200px;
            }

            .server-info-container {
                max-width: 800px;
                margin: 20px auto;
                padding: 20px;
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                text-align: center;
            }

            .survive-server-category {
                border: 2px solid orange;
                padding: 10px 20px;
                width: fit-content;
                border-radius: 6px;
                margin-bottom: 20px;
                display: inline-block;
                text-align: center;
            }

            .server-icon {
                max-width: 100px;
                border-radius: 50%;
                margin-bottom: 20px;
                display: block;
                margin: 0 auto;
            }

            .server-info {
                text-align: center;
            }

            .server-info h3 {
                margin-top: 0;
            }

            .error-message {
                color: red;
                text-align: center;
            }
        </style>
        <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">
    </head><body>
        <div class="header">
            <h1>서버 정보</h1>
<h7>Made By.</h7>
        </div>
        <div class="server-info-container">
            <div class="survive-server-category" style="margin-top: 20px;">
                <h2>서버이름</h2>
                 <img
                id="serverIcon"
                class="server-icon"
                src="https://api.mcsrvstat.us/icon/서버주소"
                alt="서버 아이콘">
            <div id="serverInfo" class="server-info"></div>
        <script>
            const serverIp = '서버주소';
            const serverPort = '25565';
            const serverIconElement = document.getElementById('serverIcon');
            const serverInfoElement = document.getElementById('serverInfo');

            function queryServer() {
                const url = `https://api.mcsrvstat.us/2/${serverIp}:${serverPort}`;

                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.online) {
                            serverInfoElement.innerHTML = `
                                <h3>서버 상태: 온라인</h3>
                                <h3>온라인 플레이어 수: ${data.players.online}/${data.players.max}</h3>
                                <h3>서버 버전: ${data.version}</h3>
                            `;
                        } else {
                            serverInfoElement.innerHTML = `
                                <h3>서버 상태: 오프라인</h3>
                            `;
                        }
                    })
                    .catch(error => {
                        serverInfoElement.innerHTML = '<p class="error-message">서버 정보를 가져오는 중 오류가 발생했습니다.</p>';
                        console.error('서버 정보를 가져오는 중 오류:', error);
                    });
            }

            queryServer();
            setInterval(queryServer, 60000);
        </script>
    </body>
</html>