Bài viết này namkna 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/AVvXsEj40V8pX3fS3CUI-zO338uKe3t63TJP_IXu2N7TrQ-X53OgW4sKM7N67si5rpL6S1E1Xo1WH3ONmW2yzYRAPM9dEykcrX7mp6B8fNmganQwRZevpv2DT_6vN0vHusdFpwR1NF_8FSOHn7E/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/AVvXsEik_pvam94RXH1m4UpmY6g2VRbJvOMqD53bCzo2W5UA5IYGR-cNyfnh_JdhvNGw6AELgYA5oQv2uNk2Fudf06oj1nzTl9PaSsji96bxw8UQ3Kj_G7Pm4cdZovrRXlt-nxHUpf3q0kM57bFf/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.
Lưu ý: Blog của bạn phải ở chế độ public cho tất cả mọi người xem thì widget này mới hoạt động được nhé!
Nhận xét
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóanếu xài code này trong blog có drop menu thì nó ko còn tác dụng nữa
Trả lờiXóaCó tác dụng chứ bạn. nó không liên quan gì đến drop menu cả.
XóaMuốn chỉ màu chữ, cỡ chữ và thêm mấy hình nhở trước link bài viết thì làm sao bạn?
Trả lờiXóaBạn nào thêm được css để chỉnh cỡ chữ, màu sắc chữ cho tiện ích này được ko
Trả lờiXóaMình sửa lại code rồi bạn cập nhật lại tất cả các bước nha. Có hướng dẫn cụ thể ở trên rồi đó.
XóaCập nhật cả demo rồi đó nha bạn.
XóaTemplate của mình làm y như hướng dẫn nhưng css không thấy có tác dụng gì cả, đành bó tay vậy
Trả lờiXóathích kiểu này quá mà đành chịu, admin giúp đỡ với
Trả lờiXóaMình đã sửa cả đoạn code bước 4 nên bạn phải thay thế hết các đoạn cũ mới có tác dụng nha bạn.
XóaMình rất thích code kiểu này nên làm đi làm lại nhiều lần nhưng cái css không có tác dụng gì cả. Có lẽ do template, nhưng mình không biết chỉnh, admin giúp với
Trả lờiXóa1- không liên quan đến template
Xóa2- đoạn code bước 4 mình đã thay đổi lại nhưng bạn không thay đổi mà vẫn áp dụng thì làm sao có hiệu quả :@
3- THay thế tất cả các đoạn saliproit183 trong template của bạn thành namkna-related-1 thì CSS sẽ có tác dụng.
4- Nếu bạn không thể thay thế nó thì hãy gửi template vào mail tavannam01@gmail.com mình sẽ thêm giúp ./.
Mình đã sửa template và gửi vào mail của bạn. Những lỗi bạn gặp phải đó là:
Xóa1. Bạn mắc một lỗi rất chuối đó là bạn xóa mất dấu đóng ở đoạn code sau:
.post-share-buttons{margin:20px 0
Tiếu dấu đóng đơn. nếu để như thế sẽ phá vỡ toàn bộ CSS. nên phải sửa lại thành:
.post-share-buttons{margin:20px 0}
2- Đoạn CSS sau của bạn không có tác dụng nếu không muốn nói là thừa. Do vậy hãy xóa nó đi.
#related-posts{float:left}
#related-posts ul{margin:0;padding:0;list-style-type:none}
#related-posts ul li{padding:10px 0}
#related-posts ul li:hover img{width:42px;height:42px;padding:0}
#related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}
#related-posts h3{margin:0;font-size:16px}
ul#related-posts{font:14px Oswald;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:4px solid #bbb;display:block;height:95px;position:relative;width:90px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:89px;line-height:16px;position:absolute;width:84px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:url(http://4.bp.blogspot.com/-_OsD_ywyB2s/UTs7tp7tOwI/AAAAAAAAJTw/M_VUXlPKKkE/s1600/transparant-namkna-blogspot-com.png);display:block!important;}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);border:4px solid #666}
Bạn ơi, sao mình sửa xong không thấy thay đổi j hết, đoạn "div class='post-footer" trong template của mình chỉ có 1, cả đoạn 2 cũng chỉ có 1. Mình đã chèn code y như hướng dẫn, rồi mà không có biến chuyển j, bạn xem cho mình nha !
Trả lờiXóabạn chèn trước đoạn sau: <div class="post-share-buttons">
Xóatemplate của mình ko có đoạn đó bạn ơi !
Trả lờiXóaỞ đoạn trên thay dấu nháy đôi thành nháy đơn là thấy ngay:
Xóa'div class="post-share-buttons'
Mình đã gửi template vào tavannam01@gmail.com đã mấy ngày rồi, mong bạn sớm hồi âm.
Trả lờiXóaTrả lời bạn rất lâu rùi đó hãy kiểm tra mail hoặc hộp thư spam nếu không thấy.
XóaCảm ơn bạn nhé ! mình muốn sửa thêm một chút đó là xóa tên nhãn đi, vì mình chỉ để hiện 1 nhãn thôi thì phải làm thế nào ?
Trả lờiXóaBạn sửa:
Xóa#namkna-related-1 h4{font-size: 18px;font-weight: bold;color:#333}
thành:
#namkna-related-1 h4{display:none !important}
thanks you so much !
XóaKhông có gì.
XóaCảm ơn admin đã sửa tem giúp. Cái css đã chạy, tuy nhiên chỉ hiện 1 nhãn chứ không hiện 2 cho dùng đã chọn maxNumberOfLabels = 2;. Nhưng được như thế này thì cũng tốt lắm rồi.
Trả lờiXóabạn xem lại tên nhãn có chứa các ký tự đăch biệt như + - * / không nha.
XóaMình làm mà trả được.. :((
Trả lờiXóaadmin có thể cho mình xin yahoo đck
Mình không dùng Yahoo chỉ dùng mail thôi.
Xóatavannam01@gmail.com
Bác Nam Tạ ơi giúp em cái, em làm rồi mà không thấy hiện lên... :( http://banchungcugiare-hanoi.blogspot.com/. Thank bác nhiều nha !
Trả lờiXóaChú ý: mỗi blog đều có 2 đoạn code ở bước 4 giống hệt nhau, phải chèn đúng vị trí nó mói hiển thị nha,
XóaBài viết đó của em chỉ gán có một nhãn thì nó hiện vậy em ak, Em hãy gán thêm một nhãn nữa cho bài đó nha.
Trả lờiXóaLàm sao để chỉ hiện các bài liên quan của một nhãn mình muốn vậy Nam Ta và bên dưới tên Các bài liên quan nó không hiện tên nhãn lên nữa?
Trả lờiXóaBạn phải áp dụng nó thì mình mới hỗ trợ bạn được chứ :)
Xóaa Add ơi cho e hỏi làm sao mới Liên Kết với Blog của a được thế e vào trang Liên Kết không có bình luận nên e vào đây Comment a Add thông cảm ^^
XóaEm add link blog của anh vào và để link blog của em lại đây cho a nha/
XóaDạ e đã Add Site a lâu rồi và Site e nè
Xóawww.tynisoft.com
Anh đã add blog của em rồi đó em ak, Muốn chỉnh sửa gì thì thông báo cho anh anh nha;
XóaDạ Ok thaks a ^^
XóaRất hay.Bác cho hỏi thêm chút nhé. Tôi muốn chèn thêm 1 đoạn để lấy tin theo 1 nhãn chỉ định ví dụ nhãn " vip " bên trên các nhãn bài viết thì chèn thêm doạn code như thế nào được.
Trả lờiXóaBạn có thẻ dùng cách này nha: XEM NGAY
XóaThanks bác Namkna nhé.Đúng ý tôi
Trả lờiXóaXem giúp mình với, trước mỗi nhãn nó hiện thêm bel/tên nhãn nữa. Không biết vì sao, hic hic, Căn hộ nhiêu tứ
Trả lờiXóaHiện tại mình vào trang của bạn và thấy nó không hiển thị, bạn đăng ký feed cho trang của bạn đi nha. THêm nữa những nhãn tiếng việt nó sẽ có hiện tượng như bạn nói. Mình sẽ khắc phục code sớm nhất cho bạn.
XóaMình làm được rồi, cảm ơn Nam Ta rất nhiều. Mình phải thêm www.focusreal.vn chứ để focusreal.vn thì không hiển thị được.
Xóabản fix lỗi tiếng việt này có dạng 2 cột không namkna
Trả lờiXóablog mình không chèn bài viết liên quan được, nhờ bạn hỗ trợ dùm
Trả lờiXóahttp://www.toilaquantri.com/
bạn giúp mình với mình làm mãi mà ko duoc
Trả lờiXóa