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

{VnTim™} 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ì...


{VnTim™} 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/AVvXsEhFzEYIvysto0sSkWe-oYW03IRLjw0JZqqF-CrcVmgyvqD-vJ4hmitL_2Bnj1Yz8OEknSNJHyopA3qJJ6PSnM4hK7e8sGsvhU1nD27TLT8YkUca8BP-t5BFhPJTu1o6F2CGI6UQxGu_LYE/") 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é.
Các bạn có thể theo dõi Blog của VnTim™ qua Email hay Blogger thông qua Widget "KẾT NỐI VỚI VNTIM™" ở bên phải Blog.
Mọi thắc mắc xin để lại tin nhắn bên dưới nhé.

COMMENTS

Name

Banner,2,Code,8,CSS,2,DNS cho Blogger,6,Favicon,1,HTML,6,JavaScript,2,Kiếm tiền với Youtube,1,Labels,1,Mật khẩu cho bài đăng,1,Nhãn,1,Search Google,1,Template Blogger,1,theme blogger,1,Thủ thuật Blogger,45,Thủ thuật Youtube,2,Tiệc ích Password,3,Tiện ích,9,Tiện ích bài viết liên quan,2,Trang,1,Wifi,1,Xóa bản quyền,1,
ltr
item
Khám Phá Blogger: Tạo Widgets bài viết liên quan cho Blogger BlogSpot
Tạo Widgets bài viết liên quan cho Blogger BlogSpot
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRW8W5wVuhZaBtH8n9vrOztrrUMjkPZMrTHxU_5eLjUUJAmYXp536sMDdwQMdg643MMl19rMAxDSejIbSRACwG-aJc4M_JL0LnGsI8ZQUXb3BzR0HGBnel3pcbHUaqDEH6URsPyZDQ4JPw/s320/VnTim+Related+Posts+Skill+Link+Demo.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRW8W5wVuhZaBtH8n9vrOztrrUMjkPZMrTHxU_5eLjUUJAmYXp536sMDdwQMdg643MMl19rMAxDSejIbSRACwG-aJc4M_JL0LnGsI8ZQUXb3BzR0HGBnel3pcbHUaqDEH6URsPyZDQ4JPw/s72-c/VnTim+Related+Posts+Skill+Link+Demo.png
Khám Phá Blogger
http://blogger.affimart.com/2012/05/tao-widgets-bai-viet-lien-quan-cho.html
http://blogger.affimart.com/
http://blogger.affimart.com/
http://blogger.affimart.com/2012/05/tao-widgets-bai-viet-lien-quan-cho.html
true
4203661997903332293
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy