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

Tạo Widgets bài viết liên quan cho 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ì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/AVvXsEhzNtKIN2-R_27Sf5XWs532N-vYMHBnaDM-ze9PDV0rnnBrI01RECKWAWGCr707HYiCxzQ8C_kFvPsaC8IYlHZbcuS1yAtJraH6JAvjJ7ngEeK748onbNzmURUeayfq-ytxVRbfkqp0lgw/") 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é.
Thân chào các bạn.
Hoangdacviet

Bé Viết 18 tuổi, hiện đang bán máy dạo tại Công ty Kami Mask
Quan điểm sống: NO PAIN NO GAIN ❤️ Sống ko chờ đợi!
Sử dụng cái Bạn có ntn mới quan trọng!
Sải cánh Đại Bàng, bước chân Sư Tử!
Yêu chạy bộ, thích du lịch bụi và kiếm tiền nữa!
Đang rảnh, cần lắm Bạn nữ có nhu cầu lấy chồng
Kami Mask SvTre.com LLC Kome

24 Nhận xét

» VnTim™ cảm ơn bạn đã đọc bài viết. :)
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người quanh bạn.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu.
» Rất cảm ơn những comment thiện ý. Đừng Spam nhé!

Mới hơn Cũ hơn