Blogspot에서 'megamenu/recent'처럼 최근 글을 자동으로 보여주는 메가 메뉴 구현 예제

아래 코드를 그대로 복사해 Blogspot(블로그스팟) 테마의 메뉴 영역(예: <nav>, <ul class="menu"> 등)에 삽입하면, 최근 글이 자동으로 표시되는 메가 메뉴가 완성됩니다.
자신의 블로그 주소에 맞게 피드 URL만 수정하면 됩니다.

'megamenu/recent'처럼 최근 글을 자동으로 보여주는 메가 메뉴 구현 예제

1. HTML: 메가 메뉴 구조

xml
<li class="mega-menu">
  <a href="#">Recent Posts</a>
  <div class="mega-menu-content">
    <ul id="recent-posts-list">
      <!-- 최근 글이 여기에 자동으로 표시됩니다 -->
      <li>Loading...</li>
    </ul>
  </div>
</li>

2. JavaScript: 최근 글 자동 불러오기

xml
<script>
function showRecentPosts(json) {
  var posts = json.feed.entry;
  var list = document.getElementById('recent-posts-list');
  if (!posts) {
    list.innerHTML = '<li>No posts found.</li>';
    return;
  }
  list.innerHTML = '';
  for (var i = 0; i < Math.min(posts.length, 5); i++) {
    var title = posts[i].title.$t;
    var link = '';
    for (var j = 0; j < posts[i].link.length; j++) {
      if (posts[i].link[j].rel === 'alternate') {
        link = posts[i].link[j].href;
        break;
      }
    }
    var li = document.createElement('li');
    li.innerHTML = '<a href="' + link + '">' + title + '</a>';
    list.appendChild(li);
  }
}
</script>
<!-- 자신의 블로그 주소로 변경하세요 -->
<script src="https://ad-sense-up.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showRecentPosts">
</script>

  • 위에서 https://ad-sense-up.blogspot.com 부분을 자신의 블로그 주소로 바꿔주세요.

3. CSS: 메가 메뉴 스타일

xml
<style>
.mega-menu { position: relative; display: inline-block; }
.mega-menu-content {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 300px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 100;
  padding: 10px 0;
}
.mega-menu:hover .mega-menu-content {
  display: block;
}
#recent-posts-list {
  list-style: none;
  margin: 0;
  padding: 0 16px;
}
#recent-posts-list li {
  margin-bottom: 8px;
  font-size: 15px;
}
#recent-posts-list li:last-child {
  margin-bottom: 0;
}
</style>

적용 방법 요약

  1. HTML: 메뉴 영역에 위의 <li class="mega-menu">...</li> 구조를 추가합니다.
  2. CSS: <style>...</style> 코드를 <head> 또는 HTML 상단에 삽입합니다.
  3. JavaScript: <script>...</script> 코드를 HTML 하단(</body> 위)이나 테마의 스크립트 영역에 삽입합니다.
  4. 피드 주소 수정: 자신의 블로그 주소로 JSON 피드 URL을 꼭 바꿔주세요.

이렇게 하면 별도의 플러그인 없이도 최근 글이 자동으로 표시되는 메가 메뉴가 Blogspot에 적용됩니다.  반응형 웹 디자인과 애드센스 최적화에도 잘 어울리는 구조입니다.