Diễn đàn Backlink ZONE: Tạo Breadcrumbs cho Blogger

Link : http://www.dongviet.net/2016/08/cach-tao-thanh-dieu-huong-breadcrumbs-cho-blogger.html

Mô tả về backlink :

Bài viết này sẽ giúp bạn tạo Breadcrumbs cho Blogger - một thanh điều hướng trong bài viết trên Blogger với tác dụng giúp người truy cập có thể xác định vị trí trên trang blog của bạn và chuyển hướng khi cần thiết. Breadcrumbs là thành phần khá quan trọng cho Website hay blog của bạn vì bạn sẽ thấy sự hiện diện của nó trên hầu hết các Website. Giảm tỉ lệ thoát Website là một yếu tố quan trọng mà Breadcrumbs có thể hỗ trợ cho blog của bạn.

Cách tạo thanh điều hướng Breadcrumbs cho Blogger

Lợi ích của thanh Breadcrumbs

Khi Breadcrumbs xuất hiện trên kết quả tìm kiếm của Google nó sẽ giúp bạn có thêm cơ hội người dùng truy cập. Nhu cầu tìm kiếm của người dùng rất đa dạng khi họ thấy link kết quả không phù hợp nhưng những link trongBreadcrumbs phù hợp thì họ sẽ click vào đó, từ đó giúp blog của bạn có thêm lương truy cập.

Xem thêm

Tạo thanh điều hướng Breadcrumbs cho Blogger

Bước 1: Bạn truy cập blogger.com → Mẫu → Chỉnh sửa HTML, tại đây bạn nhấn Ctrl + F để tìm đoạn code sau:

<b:include data='top' name='status-message'/>

Sau đó, bạn thêm đoạn code sau vào dưới đoạn code tìm được ở trên:

<b:include data='posts' name='breadcrumb'/>

Bạn thu được:

Breadcrumbs cho Blogger

Bước 2: Bạn tìm đến đoạn mã có dạng như sau:

<b:includable id='main' var='top'>...</b:includable>

và sau đó, bạn chèn đoạn mã sau vào dưới thẻ </b:includable>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span><data:blog.pageName/></span></div> <b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'><span itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<div class='breadcrumbs' itemtype='http://data-vocabulary.org/Breadcrumb'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url' title='Trang chủ'>Trang chủ</a></span>
<b:loop values='data:post.labels' var='label'> » <span typeof='v:Breadcrumb'><a expr:href='data:label.url' expr:title='data:label.name' property='v:title' rel='v:url'><data:label.name/></a><b:if cond='data:label.isLast == "true"'/></span> </b:loop> » <span><data:post.title/></span> </div>
</span> <b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span>Tanpa Label</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop> <b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Lưu trữ cho <data:blog.pageName/></span> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Tất cả bài viết</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Bài viết theo chuyên mục <data:blog.pageName/></span> </b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Bạn thu được:

Chèn dưới <b:includable id='main' var='top'>...</b:includable>

Bước 3: Bạn thêm đoạn CSS sau vào trên thẻ đóng ]]></b:skin>

.breadcrumbs{font-size:15px;word-wrap:break-word;margin:5px;border-bottom:2px solid #f0f0f0;overflow:hidden;padding:6px 0}

Vậy là bạn đã hoàn thành các bước tạo thanh điều hướng Breadcrumbs cho Blogger. Ngoài ra bạn có thể xem thêm các Widget Blogger khác trên blog của mình nhé!

Tác giả backlink : DongViet.NET
Thời gian : 28/08/2016 8:50:04