블로그 탐색 기능 강화: Blogspot에 동적 사이트맵 위젯 추가

가나톡ganaTOK 7월 02, 2025

블로그 탐색 기능 강화: Blogspot에 동적 사이트맵 위젯 추가

모든 블로거에게 사이트맵은 필수적인 도구입니다. 단순한 페이지가 아니라, 레이블별 게시물로 바로 이동할 수 있도록 하여 이탈률을 크게 줄일 수 있는 강력한 기능입니다 . 오늘은 Blogspot 블로그에 AJAX 기반 사이트맵 위젯을 추가하는 방법을 알아보겠습니다. 이 위젯은 각 카테고리별로 최신 게시 순서대로 게시물을 표시하며, AJAX를 사용하기 때문에 블로그 성능에 영향을 주지 않고 매우 빠르게 로드됩니다.

이제 이 필수 사이트맵 위젯을 Blogspot 블로그에 추가하는 방법을 알아보겠습니다!

블로그 탐색 기능 강화: Blogspot에 동적 사이트맵 위젯 추가

1단계: CSS 스타일 추가

템플릿을 변경하기 전에 항상 템플릿을 백업하는 것이 좋습니다 . 이렇게 하면 문제가 발생하더라도 원래 디자인으로 쉽게 되돌릴 수 있습니다.

  1. Blogger 계정 에 로그인하세요 .
  2. 템플릿 (또는 최신 Blogger 인터페이스의 테마 ) 으로 이동 >> HTML 편집 .
  3. 닫는   ']]</b:skin>'태그를 검색하세요.
  4. 이 태그 바로 위에 다음 CSS 코드를 붙여넣으세요.

CSS
/* ######## Navigation Menu Css by sorabloggingtips.com ######################### */
.mapasite {
    margin-bottom: 10px;
    background-color: #F8F8F8
}
.mapasite.active .mapa {
    display: block
}
.mapasite .mapa {
    display: none
}
.mapasite h2 {
    background-color: #EEE;
    color: #000;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 2px;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 700
}
.mapasite h2 .botao {
    font-size: 18px;
    line-height: 1.2em
}
.botao .fa-minus-circle {
    color: #f30
}
.mapapost {
    overflow: hidden;
    margin-bottom: 20px;
    height: 70px;
    background-color: #FFF
}
.mapa {
    padding: 40px
}
.map-thumb {
    background-color: #F0F0F0;
    padding: 10px;
    display: block;
    width: 65px;
    height: 50px;
    float: left
}
.map-img {
    width: 65px;
    height: 50px;
    overflow: hidden;
    border-radius: 2px
}
.map-thumb a {
    width: 100%;
    height: 100%;
    display: block;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.map-thumb a:hover {
    -webkit-transform: scale(1.1) rotate(-1.5deg)!important;
    -moz-transform: scale(1.1) rotate(-1.5deg)!important;
    transform: scale(1.1) rotate(-1.5deg)!important;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.mapapost .wrp-titulo {
    padding-top: 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3em;
    padding-left: 25px;
    padding-right: 10px;
    display: block;
    overflow: hidden;
    margin-bottom: 5px
}
.mapapost .wrp-titulo a {

}
.mapapost .wrp-titulo a:hover {
    color: #f30;
    text-decoration: underline
}
.map-meta {
    display: block;
    float: left;
    overflow: hidden;
    padding-left: 25px;
}
.mapasite h2 .botao {
    float: right
}

2단계: HTML 스크립트 추가

이는 중요한 단계이므로 주의해서 진행하세요!

같은 HTML 편집 섹션 에서 '</body>'태그를 검색하세요.
바로 위에 다음 HTML 스크립트를 붙여넣습니다.

HTML
<script type='text/javascript'>
            //<![CDATA[
var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-mq-uYnI-eIHOyYkLu-ZZlw7C9xo76MQNmQCX1qK2fuSrFmTys6DNinpSCS2YT0XeC6j3JV9oerlHtJgMPKUZu6Kvx9U-schhbl5y5La9dLW-15Gdo5hqcKPeiYtY5RPlQcI1YYAM5P8/s1600-r/nth.png";

           var static_page_text = $.trim($('.static_page .post-body').text());
if (static_page_text === "[sitemap]") {
    var postbody = $('.static_page .post-body');
    $.ajax({
        url: "/feeds/posts/default?alt=json-in-script",
        type: 'get',
        dataType: "jsonp",
        success: function(dataZ) {
            var blogLabels = [];
            for (var t = 0; t < dataZ.feed.category.length; t++) {
                blogLabels.push(dataZ.feed.category[t].term)
            }
            var blogLabels = blogLabels.join('/');
            postbody.html('<div class="siteLabel"></div>');
            $('.static_page .post-body .siteLabel').text(blogLabels);
            var splabel = $(".siteLabel").text().split("/");
            var splabels = "";
            for (get = 0; get < splabel.length; ++get) {
                splabels += "<span>" + splabel[get] + "</span>"
            }
            $(".siteLabel").html(splabels);
            $('.siteLabel span').each(function() {
                var mapLabel = $(this);
                var mapLabel_text = $(this).text();
                $.ajax({
                    url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script",
                    type: 'get',
                    dataType: "jsonp",
                    success: function(data) {
                        var posturl = "";
                        var htmlcode = '<div class="mapa">';
                        for (var i = 0; i < data.feed.entry.length; i++) {
                            for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                                if (data.feed.entry[i].link[j].rel == "alternate") {
                                    posturl = data.feed.entry[i].link[j].href;
                                    break
                                }
                            }
                            var posttitle = data.feed.entry[i].title.$t;
                            var author = data.feed.entry[i].author[0].name.$t;
                            var get_date = data.feed.entry[i].published.$t,
                                year = get_date.substring(0, 4),
                                month = get_date.substring(5, 7),
                                day = get_date.substring(8, 10),
                                date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;
                            var tag = data.feed.entry[i].category[0].term;
                            var content = data.feed.entry[i].content.$t;
                            var $content = $('<div>').html(content);
                            var src2 = data.feed.entry[i].media$thumbnail.url;
                            htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>'
                        }
                        htmlcode += '</div>';
                        mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>');
                        $(document).on('click', '.mapasite h2', function() {
                            $(this).parent('.mapasite').addClass('active');
                            $(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');
                        });
                        $(document).on('click', '.mapasite.active h2', function() {
                            $(this).parent('.mapasite').removeClass('active');
                            $(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');
                        });
                    }
                });
            });
        }
    });
}
            //]]>
</script>


  2. 3. 템플릿 저장을 클릭합니다 .

    중요 참고: 이 위젯은 jQuery를 사용합니다 . 아직 설치하지 않았다면, 이 스크립트가 제대로 작동하려면 Blogspot 블로그용 jQuery 플러그인을 설치해야 합니다.

3단계: 페이지에 사이트맵 추가하기 (가장 중요!)

사이트맵을 공개하기 위한 마지막이자 중요한 단계입니다.

  1. Blogger 대시보드 >> 페이지 >> 새 페이지 추가 로 이동합니다 .
  2. 새 페이지에 제목을 지정합니다(예: "사이트맵" 또는 "블로그 아카이브").
  3. 페이지 옵션에서 댓글을 숨기세요 .

  4. 페이지 콘텐츠 영역에 다음의 단축 코드short code를 추가하기만 하면 됩니다.

[sitemap]

  2. 5. 게시 버튼을 클릭하세요 .

이제 블로그에 새로 게시된 페이지를 방문하여 동적 사이트맵 위젯이 어떻게 동작하는지 확인하세요!

결론

축하합니다! Blogspot 블로그에 동적 사이트맵 위젯을 추가하는 방법을 성공적으로 배우셨습니다. 이 기능을 추가하면 블로그 탐색 기능이 향상될 뿐만 아니라 모든 콘텐츠에 쉽게 접근할 수 있어 사용자 경험도 향상됩니다. 이 튜토리얼이 도움이 되었기를 바랍니다. 친구들과 공유해 주시고, 앞으로 더 멋진 위젯과 튜토리얼을 기대해 주세요!

가나톡ganaTOK

작성자: 가나톡ganaTOK

댓글 쓰기

0 댓글