Thanh trạng thái "breadcrumb" cho Blogspot

Breadcrumb là tiện ích được sử dụng khá phổ biến, đặc biệt là các trang Web/Blog vận hành trên nền tảng Wordpress. Cùng với tiện ích “ Page Navigation – phân trang cho Blogspot “, cả hai góp phần điều hướng tốt hơn cho Web/Blog của bạn.

Hơn nữa, với breadrumb, độc giả có thể biết được chủ đề mình đang theo dõi thuộc trương mục ( Breadcrumbs based on a post's category ) nào, thời gian nào ( Breadcrumbs based on a post's date ), có thể giúp gia tăng lượng click của độc giả và kéo họ ở lại Blog của bạn lâu hơn.

Chính từ những ưu điểm đó, hôm nay iTechPlus sẽ giới thiệu cho các bạn 2 style của tiện ích này : một cái dựa trên trương mục ( có dạng : Browse » Home » Category » Post Title ) và một cái dựa trên thời gian ( có dạng : You are here: Home > Year > Month > Post Title )

A. Style 1 : Breadcrumbs based on a post's category ( BloggerPlugins )

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

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

và thay thế thành :

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

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

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

và thay thế thành :

<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'>

3. 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 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

4. Save template

B. Style 2 : Breadcrumbs based on a post's date ( PurpleMoggy )

1. Tìm đoạn code tương tự như bên dưới :

<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'/>

2. 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 </b:includable> và </b:widget> :

<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>

3. Cuối cùng, chèn đoạn code sau vào trước thẻ đóng </b:skin>

.breadcrumbs {

border-bottom:1px dotted $bordercolor;

margin:0 0 0.5em;

padding:0 0 0.5em;

}

4. Save template

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