브레드크럼(Breadcrumb) 적용 방법 코드제공

브레드크럼 (Breadcrumb)

브레드크럼(Breadcrumb)을 티스토리 블로그에
적용시키기 위해 인터넷을 검색하여 알아본 결과.

스킨편집 HTML편집을 통하여 html태그와 css코드를 추가하면 된다고 합니다.

HTML

<nav role="navigation" aria-label="Breadcrumbs" class="bf-breadcrumb clearfix bc-top-style">
	<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://moon65.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://moon65.tistory.com/category/IT"><span itemprop="name">IT</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">브레드크럼(Breadcrumb) 적용 방법</span>
				<meta itemprop="position" content="3">
				<meta itemprop="item" content="https://moon65.tistory.com/97">
			</li>
		</ul>
	</div>
</nav>

HTML 코드 내용은 수정하여 사용하시면 됩니다.

저의 티스토리 주소가 3곳에 작성되어 있습니다.

각자의 주소로 변경하셔서 사용하시면 됩니다.

CSS

.bf-breadcrumb.bc-top-style {
    margin: 0 0 14px 0;
}

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

.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: #FFFFFF;
    vertical-align: top;
}

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

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

CSS의 경우도 간단하게 심플한 디자인입니다.

COLOR를 수정하셔서 사용하시면 됩니다.

원하시는 색상과 스타일로 변경하셔서 사용하세요.

코드 파일 제공

파일은 복사하여 수정하기 귀찮으신 분들은
파일로 다운로드하여 사용하시면 됩니다.

코드는 따로 수정하실 필요 없도록
티스토리 치환자로 작성되어 있기 때문에
바로 복사 붙여 넣기 하시면 됩니다.

브레드크럼 코드.txt

0.00MB

그럼 오늘 좋은 결과 있는 날 되시기 바랍니다.