Preview:
<!DOCTYPE html>
<html>
<head>
  <title>أسماء المواضيع</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .post-list {
      list-style-type: none;
      padding: 0;
    }
    .post-list li {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <h1>أسماء المواضيع</h1>
  <ul class="post-list" id="post-list"></ul>

  <script>
    function fetchPosts() {
      const blogId = 'blogId'; // استبدل YOUR_BLOG_ID بمعرف مدونتك
      const apiKey = 'apiKey'; // استبدل YOUR_API_KEY بمفتاح API الخاص بك

      const url = `https://www.googleapis.com/blogger/v3/blogs/${blogId}/posts?key=${apiKey}`;

      fetch(url)
        .then(response => response.json())
        .then(data => {
          const posts = data.items;
          const postList = document.getElementById('post-list');
          
          posts.forEach(post => {
            const listItem = document.createElement('li');
            const link = document.createElement('a');
            link.href = post.url;
            link.textContent = post.title;
            listItem.appendChild(link);
            postList.appendChild(listItem);
          });
        })
        .catch(error => console.error('Error fetching posts:', error));
    }

    document.addEventListener('DOMContentLoaded', fetchPosts);
  </script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter