Hướng Dẫn Tạo Breadcrumbs Cho Blogspot

Breadcrumbs là một tập hợp những liên kết nhằm giúp cho người đọc có thể biết được vị trí của bài viết trong blog. Từ đó, họ có thể dễ dàng di chuyển tới các chuyên mục chính chứa bài viết họ đang đọc hay là những trang khác một cách dễ dàng và nhanh chóng. Để thêm breadcrumbs vào Blogspot template làm như sau:

Thêm CSS

Thêm đoạn code bên dưới lên trên thẻ ]]></b:skin> hoặc </style> :

/* Breadcrumbs */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:8px 0;font-size:14px;color:#666;font-weight:500;border-bottom:1px solid #dedede}
.breadcrumbs li{list-style-type:none;display:inline-block;float:left}
.breadcrumbs a{display:inline-block;text-decoration:none;outline:0;transition:all .3s ease-in-out;color:#666;font-weight:300}
.breadcrumbs a:hover{color:#3b8dbd}

Thêm HTML code:

1. Copy đoạn code:

<b:include data='posts' name='breadcrumb'/>       

Chèn xuống dưới đoạn code:

            <b:includable id='main' var='top'> 

2. Tìm đoạn code:

            <b:includable id='comment-form' var='post'>

và chèn một trong 2 đoạn HTML bên dưới lên ngay phía trên đoạn code vừa tìm:
- Code 1( Yêu cầu template của bạn đã có sẵn Font Awesome):

            <b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><i class='fa fa-home'/> Home&amp;nbsp;</span></a></span>&amp;nbsp;<i class='fa fa-tags'/>
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> <i class='fa fa-angle-right'/> </b:if></span>
</b:loop>
 <i class='fa fa-angle-right'/> <span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:if>
</b:includable>

- Code 2:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Trang chủ</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>