TIN TỨC
Bài đăng mới đây

Tạo Widgets bài viết liên quan cho Blogger BlogSpot

Bài này, mình xin hướng dẫn các bạn cách tạo tiện ích Bài viết liên quan 1 cách đơn giản nhất, dạng link cho các bạn.
Xem Demo ở hình dưới.


Bắt đầu: Đăng nhập vào Blogger bằng tài khoản Gmail của các bạn. Chọn blog các bạn muốn chỉnh sửa: 

Thiết kế -> Chỉnh sửa HTML, đánh vào ô Mở rộng mẫu tiện ích 



CtrL + F tìm đến thẻ </head> trong Templates của các bạn và thêm đoạn code sau trước thẻ này: 

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAH-WE113hpPiNX-78J6JdWmKIFACSu7Zx6EM_pgDXrGhCeuKkLoVbPc2BEifkc9wMzU-50JJ-YgDXlis6FI6NajZGHFoh-C88NPjvNtf9uRxN1jIfux4LiODVC9SYhYQmSvO1H5lniCA/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://vntim.googlecode.com/files/VnTim%20Related%20Posts%20Skill%20Link.js' type='text/javascript'/>

Tiếp đến, tìm <data:post.body/> (hoặc <div class='post-body'> ) và thêm vào ở dưới đoạn code các các bạn vừa tìm được: 

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Cuối cùng là Save lại và tận hưởng thành quả của mình ^^
Chúc các bạn có một blog đẹp, và theo quên dõi Blog của VnTim™ để nhận những thử thuật hay nhé.

Sưu tầm bởi : www.meovatcuocsong.blogspot.com

Chia sẻ :

0 nhận xét cho bài đăng này

Hãy để lại nhận xét nếu bạn thích bài đăng này

Cập nhật bài mới...
Nhập email của bạn vào đây
Để nhận các bài đăng mới!

Nhập email của bạn và nhấn enter.

Subscribe via RSS Feed subscribe to feeds
các blog Quảng cáo
tanchau123.blogspot.comlamsaonhi.blogspot.com
.com
BÀI ĐĂNG NỔI BẬT
BÀI ĐĂNG GẦN ĐÂY
Meovatcuocsong.blogspot.com
BÀI ĐĂNG CÁC THÁNG
Bình luận