대부분의 블로그나 웹사이트에서 사이트맵 페이지를 보고 그것이 무엇이며 어떻게 작동하는지 궁금했을 것입니다. 사이트맵 페이지는 기본적으로 더 좋고 쉬운 탐색에 도움이 되며 블로그에 있는 모든 게시물의 내부 링크로 인해 페이지 순위도 향상됩니다. 또한 검색 엔진의 크롤러가 콘텐츠와 페이지를 쉽고 빠르게 인덱싱할 수 있도록 도와줍니다. 이 장에서는 간단한 단계를 사용하여 블로거용 사이트맵을 만드는 방법을 배웁니다.
Sitemap 페이지는 어떻게 작동합니까?
블로그에 코드를 덤프하고 그대로 두기 전에 실제로 어떻게 작동하는지 알아야 합니다. 최신 게시물 자체를 자동으로 추가하는 자동화된 사이트맵 페이지입니다. 매번 수동으로 업데이트할 필요가 없습니다. 이 페이지에서 블로그에 지정한 레이블에 따라 게시물이 분류된 것을 볼 수 있습니다. 이 사이트맵 페이지는 블로그 피드를 자동으로 가져오는 JavaScript 및 CSS를 사용하여 개발되었습니다.
Blogger에서 사이트맵 페이지 만들기
다음은 Blogger 블로그에서 Sitemap 페이지를 쉽게 만들기 위해 따라야 하는 몇 가지 간단한 단계입니다. 코드를 붙여넣기만 하면 되는 매우 간단한 작업입니다.
1 단계 : Blogger 열기
Blogger.com을 열고 계정에 로그인하십시오. 작업중인 블로그를 선택하고 대시 보드를 엽니 다.
2단계: 페이지 만들기
Blogger 대시보드에서 페이지로 이동하여 새 페이지를 클릭합니다. 원하는 제목을 입력하세요.
3단계: 코드 추가
HTML 탭으로 이동하여 아래 코드를 복사하여 HTML 탭에 붙여넣기만 하면 됩니다.
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
<script src="http://www.귀하의 도메인.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
4단계: 맞춤화
"를 변경하기만 하면 됩니다.귀하의 도메인”를 블로그 도메인으로 변경하고 페이지를 게시합니다.
그게 다야! 블로그용 Sitemap을 만들었습니다. 또한 배경 수정에 대한 CSS 코드도 변경할 수 있습니다.
