Báo Tuổi Trẻ và Pháp Luật Tin Nhanh 24h
Home »
Sunday, April 1, 2012

Tao 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 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 !!!
Tags:

Comments[ 0 ]


Post a Comment