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 !
0 nhận xét