Breaking News

Home / Công nghệ / Thêm Breadcrumbs Navigation cho Blogger Blog

Thêm Breadcrumbs Navigation cho Blogger Blog

June 03, 2016




Các bước thực hiện như sau:
1- Mỡ Blogger, vào template, tạo một Widget Edit HTML
2- Nhấn Ctrl+F tìm thẻ <b:includable id='post' var='post'>





3- Chép Source Code dưới đây dán vào dưới mã Code tìm được:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><!--
Breadcrumbs microdata markup added by www.superwebtricks.com START. -->
<div class='swtBreadCrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<span itemprop='title'>Home</span></a>&#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span typeof='v:breadcrumb'>
<a expr:href='data:label.url' itemprop='url' title='Categories' property='v:title' rel='v:url'>
<span itemprop='title'><data:label.name/></span>
</a>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>|
</b:if>
</b:loop>
</b:if>
&#187;
<a expr:href='data:post.url' itemprop='url' title='Post Title'>
<span itemprop='title'>
<data:post.title/>
</span>
</a>
</div>
</div>
</b:if><!--
Breadcrumbs microdata markup added by Showeblogin END. -->

4- Nhấn Ctrl+F tìm thẻ </b:skin>





5- Chép Source Code dưới đây dán vào trên mã Code tìm được:


/*
Blogger Breadcrumbs added by www.superwebtricks.com
--------------------------------------------------*/
.swtBreadCrumbs:before { content:"You are here:";font-size: 85%;letter-spacing: 2px;}
.swtBreadCrumbs{width:auto;padding:0 0 5px 0;margin:0 5px;font-size:95%;border:2px solid #EDE;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;padding: 5px;text-align: left;color:#000;background:#C3B9A8;background:-webkit-linear-gradient(top,#C3B9A8,#F3F1E6);background:-moz-linear-gradient(top,#C3B9A8,#F3F1E6);background:-ms-linear-gradient(top,#C3B9A8,#F3F1E6);background:-o-linear-gradient(top,#C3B9A8,#F3F1E6);background:linear-gradient(top,#C3B9A8,#F3F1E6);line-height:22px}
6- Save lại Template bạn mới vừa bổ sung.
7- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.

Xem bản Demo:


Chúc các bạn thành công với tài liệu chia sẽ mà mình đã Cóp được từ nguồn superwebtricks.com

Khanhnguyen's Blog

Popular Posts