Tab Menu

Tạo Breadcrumbs cho Blogger - Blogspot

create breadcrumb, thanh trang thai,link path 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.
Breadcrumbs based on a post
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.
Breadcrumbs based on a post
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!

Hiện có 9 comments

KakA

bạn ơi, thế ví dụ 1 bài mà có đồng thời 2 nhãn thì hiện thanh đường dẫn như thế nào vậy

tai game dao vang

Mình làm rồi mà vẫn không thấy hiện, hay phải thêm tiện ích thêm nó mới hiện hả bác???

Hoang Quan

Bạn ơi mình cũng thắc mắc nếu mà bài đăng 2, 3 nhãn thì sao hả bạn
Trang của mình nè : http://chupanh360.blogspot.com

Gmobile

bạn ơi bog của mình là http://hocdethi.blogspot.com, sau mình làm hoài mà không được, giúp với ^^

v1vn

em làm hoài ko được ai chỉ em với

Mr Nghĩa

Mua, bán, cho thuê, hỗ trợ mua, thuê chung cư chính chủ, showroom, văn phòng...
Liên hệ Mr Tuấn Nghĩa 0989907223.
http://nhachinhchubds.blogspot.com/

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))