티스토리 고래스킨, 브레드크럼 적용하는 방법

브레드크럼을 적용하면 사용자가 쉽게 홈페이지 구조를 파악할 수 있습니다.

티스토리에서는 기본적으로 제공을 하지 않기 때문에 별도로 스킨에서 수정을 해서 적용을 해야 합니다.

오늘은 티스토리 고래스킨에서 브레드크럼을 적용하는 방법을 알아보도록 하겠습니다.

브레드크럼

브레드크럼(BreadCrumbs)은 우리나라 말로 번역하면 '빵 부스러기' 혹은 '빵가루'라는 의미입니다. 즉, 브레드크럼이란 메뉴가 복잡한 사이트에서 사용자가 어떤 경로를 거쳐 현재 보고 있는 페이지로 오게 됐는지 알려주는 서비스입니다.

'헨젤과 그레텔' 동화에서 유래가 되었습니다. 동화 속에서 지나온 길에 빵가르룰 뿌려서 다시 집을 찾을 수 있었듯이, 인터넷 홈에지에서도 사용자들이 지나온 길을 알려주는 역할을 하고 있습니다.

고래스킨 브레트크럼 적용

Html 편집

고래스킨 브레드크럼.txt

0.00MB

1. 스킨편집 > html편집 > html 에서 아래 위치를 찾습니다. 이 부분 위에 브레드크럼을 적용합니다.

<h1 class="hd-heading lts-narrow p-name" role="heading">
	<a href="/189">티스토리 고래스킨, 브레드크럼 적용하는 방법</a>
</h1>

2. 브레드크럼 소스를 적용합니다. 소스에서 "https://yourid.tistory.com" 부분은 본인의 티스토리 주소로 변경을 합니다.

<!-- 고래스킨 브레드크럼 적용 -->
<div id="breadcrumbs">
	<nav role="navigation" aria-label="Breadcrumbs" class="bf-breadcrumb clearfix">
		<div class="container bf-breadcrumb-container">
			<ul class="bf-breadcrumb-items" itemscope="" itemtype="http://schema.org/BreadcrumbList"><meta name="numberOfItems" content="3"><meta name="itemListOrder" content="Ascending">
				<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item bf-breadcrumb-begin"><a itemprop="item" href="https://yourid.tistory.com" rel="home"><span itemprop="name">Home</span><meta itemprop="position" content="1"></a></li>
				<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item"><a itemprop="item" href="https://yourid.tistory.com/category/%EB%B8%94%EB%A1%9C%EA%B7%B8%ED%8C%90"><span itemprop="name">블로그판</span><meta itemprop="position" content="2"></a></li>
				<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item bf-breadcrumb-end"><span itemprop="name">티스토리 고래스킨, 브레드크럼 적용하는 방법</span><meta itemprop="position" content="3"><meta itemprop="item" content="https://yourid.tistory.com/189"></li>
			</ul>
		</div>
	</nav>
</div>
<!-- 고래스킨 브레드크럼 적용 -->

3. 최종 적용하면 아래와 같습니다.

<!-- 고래스킨 브레드크럼 적용 -->
<div id="breadcrumbs">
	<nav role="navigation" aria-label="Breadcrumbs" class="bf-breadcrumb clearfix">
		<div class="container bf-breadcrumb-container">
			<ul class="bf-breadcrumb-items" itemscope="" itemtype="http://schema.org/BreadcrumbList"><meta name="numberOfItems" content="3"><meta name="itemListOrder" content="Ascending">
				<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item bf-breadcrumb-begin"><a itemprop="item" href="https://yourid.tistory.com" rel="home"><span itemprop="name">Home</span><meta itemprop="position" content="1"></a></li>
				<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item"><a itemprop="item" href="https://yourid.tistory.com/category/%EB%B8%94%EB%A1%9C%EA%B7%B8%ED%8C%90"><span itemprop="name">블로그판</span><meta itemprop="position" content="2"></a></li>
				<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item bf-breadcrumb-end"><span itemprop="name">티스토리 고래스킨, 브레드크럼 적용하는 방법</span><meta itemprop="position" content="3"><meta itemprop="item" content="https://yourid.tistory.com/189"></li>
			</ul>
		</div>
	</nav>
</div>
<!-- 고래스킨 브레드크럼 적용 -->

<h1 class="hd-heading lts-narrow p-name" role="heading">
	<a href="/189">티스토리 고래스킨, 브레드크럼 적용하는 방법</a>
</h1>

CSS 편집

고래스킨 브레드크럼 CSS.txt

0.00MB

스킨편집 > html 편집 > CSS에서 아래를 추가합니다. 스타일에 맞게 수정하셔도 됩니다.

/* 브레드크럼 CSS */
#breadcrumbs {
	margin: 2px 5px 2px 5px;
	font-size: 11px;
	text-align: left;
	overflow: hidden;
}

#breadcrumbs nav {
    height: 30px;
    border-top: 0px;
    border-bottom: 1px solid #ddd;
}

#breadcrumbs nav ul li {
    line-height: 30px;
    display: inline-block;
}

#breadcrumbs .bf-breadcrumb .bf-breadcrumb-items {
    padding: 0;
    margin: 0;
    list-style: none;
}

#breadcrumbs .bf-breadcrumb .bf-breadcrumb-item:not(.bf-breadcrumb-end):after {
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\00BB';
    margin-left: 5px;
    margin-right: 5px;
    color: #000;
    vertical-align: top;
}

#breadcrumbs .bf-breadcrumb .bf-breadcrumb-item a, .bf-breadcrumb .bf-breadcrumb-item span {
    color: #000;
    display: inline-block;
}

#breadcrumbs li.bf-breadcrumb-item {
    display: inline-block;
}

고래스킨을 사용하는 분들에게 도움이 되길 바랍니다.