Bài viết liên quan theo nhiều label cho Blog (đã sửa lỗi hiển thị font Tiếng Việt)

Đăng bởi Admin | 13/7/13 | 5 nhận xét

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.

Các bạn xem qua ảnh hoặc blog demo để thấy được kết quả hiển thị của thủ thuật này.

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 == &quot;item&quot;'>
<div class='widget-content'>
<h2>Các bài liên quan</h2>
<div id='namkna-related-1'/><br/><br/>
&lt;script type=&quot;text/javascript&quot;&gt;
homeUrl3 = &quot;namkna.blogspot.com&quot;;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 6;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
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(&#39;h4&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;namkna-related-1&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
&lt;/script&gt;
</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. 

6- Lưu mẫu lại và xem thành quả của bạn nha.

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é!

Xem thêm:

• 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

                                                                                                                   Thu thuat vi tinh