Tạo Breadcrumbs cho Blogger - Blogspot

How to create breadcrums for blogger.
Nhân tiện hôm nay s tạo cái breadcrumbs cho blog nên chia sẽ cùng các bạn luôn. Breadcrumbs là một thuật ngữ mô tả về thanh địa chỉ liên kết, nó cho biết bạn đang xem gì, chương mục nào của website (ví dụ: Home » Category » Post Title). Mình rất thích truy cập những trang như thế, nó rất hữu ích, tiện lợi cho người dùng.



Với Google blog bạn có thể tạo nhiều style breadcrumbs khác nhau. S sẽ chia sẻ bạn 2 style phổ biến hiện nay. Nhưng trước tiên bạn vào Tempalte > Edit HTML > Proceed > Expand Widget Templates (phiên bản mới) hoặc Design > Edit HTML > Expand Widget Templates (phiên bản cũ).

Style 1: Dựa vào danh mục.

Tìm đoạn code bên dưới :

<b:include data='top' name='status-message'/>

Và thay thế thành :

<!-- Nếu bạn muốn bỏ status-message.
<b:include data='top' name='status-message'/> 
-->
<b:include data='posts' name='breadcrumb'/>

Tiếp theo, tìm đoạn code này :

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

Thay thế nó thành đoạn code dưới đây.

<b:includable id='breadcrumb' var='posts'> 
<b:if cond='data:blog.homepageUrl == data:blog.url'> 
<!-- No breadcrumb on home page --> 
<b:else/> 
<b:if cond='data:blog.pageType == "item"'> 
<!-- breadcrumb for the post page --> 
<p class='breadcrumbs'> 
<span class='post-labels'> 
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> 
<b:loop values='data:posts' var='post'> 
<b:if cond='data:post.labels'> 
<b:loop values='data:post.labels' var='label'> 
<b:if cond='data:label.isLast == "true"'> » 
<a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
</b:if> 
</b:loop> 
<b:else/> 
»Unlabelled 
</b:if> 
» <span><data:post.title/></span> 
</b:loop> 
</span> 
</p> 
<b:else/> 
<b:if cond='data:blog.pageType == "archive"'> 
<!-- breadcrumb for the label archive page and search pages.. --> 
<p class='breadcrumbs'> 
<span class='post-labels'> 
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> 
</span> 
</p> 
<b:else/> 
<b:if cond='data:blog.pageType == "index"'> 
<p class='breadcrumbs'> 
<span class='post-labels'> 
<b:if cond='data:blog.pageName == ""'> 
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts 
<b:else/> 
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/> 
</b:if> 
</span> 
</p> 
</b:if> 
</b:if> 
</b:if> 
</b:if> 
</b:includable>
 
<b:includable id='main' var='top'>

Cuối cùng, thêm đoạn code CSS bên dưới vào trước thẻ đóng ]]></b:skin>

.breadcrumbs { 
padding: 5px 10px;
margin-bottom: 10px;
border: 1px solid #E2E2F2;
font-weight: bold;
}

Style 2: Dựa vào ngày tháng bài được đăng.

Tìm đoạn code như sau:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>

Ngay sau nó các bạn chèn đoạn code này :

<b:include data='post' name='breadcrumbs'/>

Cuộn xuống dưới cùng của widget này ( xem hình minh họa bên dưới )

Và dán code sau vào giữa và :

<b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<script type="text/javascript">
//<![CDATA[
var strCrumbHref = location.href.toLowerCase();
var intCrumbHtml = strCrumbHref.indexOf('.html');
var intCrumbWhereAt = strCrumbHref.lastIndexOf('/', intCrumbHtml);
var intCrumbYearStart = intCrumbWhereAt - 7;
var intCrumbMonthStart = intCrumbWhereAt - 2;
var intCrumbYear = parseInt(strCrumbHref.substr(intCrumbYearStart, 4));
var intCrumbYearPlusOne = intCrumbYear + 1;
var strCrumbMonthNum = strCrumbHref.substr(intCrumbMonthStart, 2);
var strCrumbMonth = '';
switch(strCrumbMonthNum) {
case '01':
strCrumbMonth = 'January';
break;
case '02':
strCrumbMonth = 'February';
break;
case '03':
strCrumbMonth = 'March';
break;
case '04':
strCrumbMonth = 'April';
break;
case '05':
strCrumbMonth = 'May';
break;
case '06':
strCrumbMonth = 'June';
break;
case '07':
strCrumbMonth = 'July';
break;
case '08':
strCrumbMonth = 'August';
break;
case '09':
strCrumbMonth = 'September';
break;
case '10':
strCrumbMonth = 'October';
break;
case '11':
strCrumbMonth = 'November';
break;
case '12':
strCrumbMonth = 'December';
break;
}
var strCrumbOutput = ' > ';
strCrumbOutput += '<a href="/search?updated-min=' + intCrumbYear;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + intCrumbYearPlusOne;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&max-results=50">' + intCrumbYear + '</a> > ';
strCrumbOutput += '<a href="/' + intCrumbYear + '_' + strCrumbMonthNum + '_01_archive.html">' + strCrumbMonth + '</a>';
document.write(strCrumbOutput);
//]]>
</script>
<noscript>
<b:if cond='data:post.labels'>
>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
</b:if>
</noscript>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrumbs Hack -->
</b:includable>

Cuối cùng bạn hãy thêm một đoạn CSS như ở Style 1

Chúc bạn thành công!

SHARE