Blog chuyên chia sẻ các loại code lập trình,PSD cover ,hosting,Wap/Web
Trang này hoạt động khá giống với Adf.ly và giao diện cũng giống nữa, mình đã đã test thử trên một site MMO của mình và cho kết quả khá tốt. Rate của nó tuy thấp nhưng cũng tam được.
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 |
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.
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"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<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é!
dsfsfsdfsdfsdfsd
dsfsfsdfsdfsdfsd
Blog Chia sẻ thủ thuật
Chia sẻ 2 template blogger bất động sản tuyệt đẹp
