Tao thanh trạng thái "breadcrumb" cho Blogspot

Ngày Chủ Nhật, 1 tháng 4, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Tao thanh trạng thái "breadcrumb" cho Blogspot
Chúc bạn xem tin tức vui vẻ !!

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 Namkna sẽ giới thiệu cho các bạn 2 style của tiện ích này:
1. Style 1: dựa trên trương mục (có dạng : Browse » Home » Category » Post Title)
2. Style 2: 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. Đầu tiên các bạn Đăng nhập vào blog => Thiết Kế => Chỉnh Sửa HTML => Mở rộng tiện ích mẫu và làm theo các bước bên dưới:
2. 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'/>

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

- Bạn có thể sửa phần màu xanh theo ý thích của bạn.
4. 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;
}

5. Save template

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

1. Đầu tiên các bạn Đăng nhập vào blog => Thiết Kế => Chỉnh Sửa HTML => Mở rộng tiện ích mẫu và làm theo các bước bên dưới:
2. 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'>

- Chèn đoạn code dưới vào sau đoạn code trên : 

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

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

Kéo xuống tìm thẻ đóng  </b:includable>  ngay sau Code trên và dán Code bên dưới vào sau thẻ </b:includable>  hoặc dán vào giữa  </b:includable>  và  </b:widget>  tương ứng:

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

- Bạn có thể sửa phần màu xanh theo ý thích của bạn. 
4. 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;
}

5. Save template

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