Chúc bạn một ngày tốt lành

Chủ Nhật, ngày 06 tháng 6 năm 2010

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("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") 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.

24 Comments:

Today 24h said...

hay lam, that tuyet ban ah,..! toi da lam thu va rat hai long ! cam on ban rat nhieu,..

Mr. Jerry said...

Cám ơn bài viết ! Nhưng vẫn bị lặp !

Nặc danh said...

ban cho mình hỏi 1 chút.t thấy trang blogger.com bị die. Mà ngay cả trang của t cũng bị vậy. Bạn làm thía nào mà trang của bạn hok bị die vậy ta. Chỉ cho t với.Thank you nhiu nhiu! hi

SÀN GỖ TPHCM said...

Tuyệt vời ,thanks !!!

lapspec said...

That tuyet ban ah,..

Hà Ngọc Tú said...

cám ơn bạn đã làm đc, nhưng cho mình hỏi thêm 1 cái, là bỏ dòng Related Posts Widget[?] ở cuối tiện ích bằng cách nào ? mong chỉ giúp

Nặc danh said...

Cảm ơn bạn;
Tôi cũng cùng câu hỏi như bạn Hà Ngọc Tú: muốn bỏ cái khỉ khô: Related Posts widget[?]

cho đẹp đội hình.
myohien@gmail.com

VnTim™ said...

Mình đã sưả laị code cho các bạn và đã xóa dòng "Related Posts Widget[?]".
Hi vọng các bạn tiếp tục đóng góp nhé

TNHH Quảng Cáo Cối Xay Gió said...

huhu. minh tìm ko thấy dòng <div class='post-body> rồi. lam thế nào đây bác

VnTim™ said...

Bạn đã thử tìm đoạn code và đã tích vào ô "Mở rộng mẫu tiện ích " chưa ?

Mr.nhok said...

:(( mình làm y hệt nhưng vẫn ko đc >> ban có thể vào xem giúp minh ko? blog mình mrnhok.tk

Hà Ngọc Tú said...

cái hình kia nhìn quen quá :)

toankt said...

Rất tuyệt vời. Thank

toankt said...

Xin hỏi thêm chút
Tạo mấy dòng dưới chữ (Đăng nhận xét) thì làm thế nào vậy?

toankt said...

Xin hỏi thêm chút
Tạo mấy dòng dưới chữ (Đăng nhận xét) thì làm thế nào vậy?

VnTim™ said...

Bạn vào trang điều khiển rồi vào "Settings › Posts and comments"
Trong mục "Comment Form Message" bạn gõ tin nhắn vào là đc.
Cám ơn bạn đã ghé thăm blog VnTim™

Phan Tú said...

Admin ơi! sao trong chỉnh sử HTML của tôi không có dòng code:
<div class='post-body>
Admin giúp tôi còn chỗ nào nữa không.
Email tôi:
phantu1962@yahoo.com.vn
Cảm ơn Admin

Gau nhoi Bong said...

bac' oi rag e lm` ko dk
blog e chi hien chu Related Posts :
blog e day ne
http://radateen.blogspot.com

Dang Billy said...

ko tim thay duoc 2 the (data.post.body/>(hoặc<div class='post-body')trong bog cua minh

Design said...

Chào bạn
Mình xem bài viết này rất bổ ích và cần thiết cho blogger nhưng mình làm theo hướng dẫn mà ko làm được. Rất mong bạn giúp đỡ, nếu có thể mình sẽ gửi pass và Tài khoản bạn giúp mình làm nhé.
Email: hungpts@gmail.com
Chân thành cảm ơn!

tai game dao vang said...

cho mình hỏi, thấy nó show ra nhiều bài viết liên quan quá, thấy max=5&quot rồi mà có bài của mình nó show tới 16 bài, dài quá, dt load không nổi :((. Bạn cho mình đoạn code cắt bớt đi xuống còn 5 đó! cám ơn bạn

ola kul said...

thank admin nhiều nhiều

thao mai said...

cho mình hỏi có cách nào đổi địa chỉ blog không vntim

Hoang Dac Viet said...

@thao mai: đổi địa chỉ blog rất đơn giản bạn đăng nhập vào blogger rồi vào mục Cài Đặt (setting) sẽ có phần địa chỉ blog. Bạn click vào chỉnh sửa để thay đổi địa chỉ blog nha.
Chúc bạn sơm đổi địa chỉ thành công.
Cảm ơn vì đã ghé thăm VnTim™ Blog

Đăng 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.
» Bạn có thể sử dụng một số thẻ HTML như <b>, <i>,<a>.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu nếu có thể.
» Rất cảm ơn những comment thiện ý.

 

VnTim™ Trái Tim Việt Nam Copyright © 2010 VnTim™ Trái Tim Việt Nam