Đăng bởi Admin | 13/7/13 | 4 nhận xét
XEM DEMO
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Tìm một trong 4 đoạn code như bên dưới:
Đoạn 1:
5- Dán code bên dưới trước thẻ ]]></b:skin>
Bài viết này mình sẽ hướng dẫn các bạn blogger thủ thuật tạo Bài viết liên quan (Related posts)cho các blogspot có nhiều nhãn (label) và đã sửa lỗi hiển thị font Tiếng Việt của đoạn code gốc. Bằng cách này sẽ hiển thị được nhiều bài viết liên quan đến nhiều label hơn, hướng visitor đến những bài cùng chủ đề tốt hơn.
XEM DEMO
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Tìm một trong 4 đoạn code như bên dưới:
Đoạn 1:
<div class='post-footer'>Đoạn 2:
<div class='post-footer-line post-footer-line-1'>Đoạn 3:
<div class='post-footer-line post-footer-line-1'>Đoạn 4:
<div class='post-footer-line post-footer-line-1'>
- Và gắn vào sau 1 trong 4 đoạn trên đoạn code bên dưới. (Lưu ý mỗi code trên mỗi đoạn có 2 lần lặp lại giống nhau bạn phải chèn đúng mới hiện thị nha).
<!-- related post --> <b:if cond='data:blog.pageType == "item"'> <div class='widget-content'> <h2>Các bài liên quan</h2> <div id='namkna-related-1'/><br/><br/> <script type="text/javascript"> homeUrl3 = "namkna.blogspot.com"; maxNumberOfPostsPerLabel = 10; maxNumberOfLabels = 6; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+21); label = decodeURIComponent(label); var txt = document.createTextNode(label); var h = document.createElement('h4'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('namkna-related-1').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/'+ label +'?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> </b:if><br/> <!-- /related post -->
☼ Tùy chỉnh:
- Thay namkna.blogspot.com bằng địa chỉ blog của bạn, lưu ý không có "/" ở cuối nhé.
- maxNumberOfPostsPerLabel là tối đa số bài viết hiển thị ở mỗi nhãn (label).
- maxNumberOfLabels là số nhãn (label) sẽ được hiển thị.
5- Dán code bên dưới trước thẻ ]]></b:skin>
#namkna-related-1 h4{font-size: 18px;font-weight: bold;color:#333} #namkna-related-1 a{font-size: 14px;font-weight: bold;color:#3090C7} #namkna-related-1 a:hover{color:#8D38C9} #namkna-related-1 li a{margin:0 0 0 8px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNep-iopr7rfdV3Z-QCZ-Gz0isMk0x4Ag51eF5KaP0xqrQiDSRzYdi0X0V8yvnjvFaH145G8aWbPytTKmM2EbXp9UrZzNi1Fh8__JcX5gaCMRM5HfxNx4yDJOEAxxBRZiDn9XMewINBY/h120/green-star-namkna-blogspot-com.gif) 0 5px no-repeat;padding-left:15px} #namkna-related-1 li a:hover{margin:0 0 0 8px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1rue18ucAoRF24iKkWwGmckbBf3biT5LmVd4k4m3Qm-Y0cO_FSsjVctSSa77NeozhhNHcLPWylbM6R60r3oNa6hyagsVZn0ai99o0TpRp8hS5PjX6VtO4KqxMpk3zvMtFDo3kynigHDhF/s1600/bullet-suyb-namkna-blogspot-com-0001.gif) 0 5px no-repeat;padding-left:15px} #namkna-related-1 li {list-style: none !important;}☼ Tùy chỉnh:
- color:#333 là mã màu của tên nhãn.
- font-size: 18px là cỡ chữ của tên nhãn.
- #3090C7 là mã màu của link khi chưa dê chuột vào.
- font-size: 14px là cỡ chữ của link khi chưa dê chuột vào.
- #8D38C9 là mã màu của link khi đã dê chuột vào link.
- Link màu vàng là link ảnh trước tiêu đề bài viết khi chưa dê chuột vào.
- Link màu xanhlà link ảnh trước tiêu đề bài viết khi dê chuột vào.
Xem thêm:Lưu ý: Blog của bạn phải ở chế độ public (công khai) cho tất cả mọi người xem thì widget này mới hoạt động được nhé!
- Tạo Bài viết liên quan theo chủ đề cho Blogger
- Tạo tiện ích Bài viết liên quan cho Blogger
- Tạo Bài viết liên quan có hình ảnh cho Blog
- Tạo Bài viết liên quan có ảnh và hiệu ứng mô tả tooltip
- Tạo hộp bài viết liên quan dưới tiêu đề bài viết cho blog
- Tạo Bài viết liên quan dạng ảnh thu nhỏ cho blog
- Bài viết liên Quan gồm danh sách ảnh và bài viết
Theo: Namkna
em chao anh, em da thao tac nhieu lan nhu vay cho blog e. Nhung van ko lam dc cac bai lien quan. anh co the noi ro hon giup e ko ạ?
Trả lờiXóaem chao anh, em da thao tac nhieu lan nhu vay cho blog e. Nhung van ko lam dc cac bai lien quan. anh co the noi ro hon giup e ko ạ?
Trả lờiXóadễ thôi em :)
XóaBạn tham khảo bài này xem sao. Nó sẽ giống của mình...
Trả lờiXóa