Tạo 'bài đăng có liên quan' (related posts ) có thanh cuộn cho mỗi bài đăng của blogger

Tại sao phải tạo liên kết bài đăng có liên quan ( related posts ) cho mỗi bài đăng ?
Thông thường đọc giả chỉ quan tâm đến bài họ đang đọc mặc dù những bài đăng có liên quan khác cũng rất hay, nhưng blog bạn không có đường dẫn đến các bài đó, họ không biết để đọc nó.
Nếu bạn cài đặt tiện ích " Lưu trử blog" thì ở mỗi bài đăng điều có đường dẫn đến những bài đăng khác được xuất bản trong tuần hoặc trong tháng ( tuỳ bạn chọn ). Nhưng nếu trong tháng đó bạn đăng nhiều bài thì tiện ích này dài dòng, không đẹp mắt chút nào.
Làm thế nào để tạo Related Posts ?
1. Đăng nhập vào "Bảng điều khiển" (Dashboard), nhấp chọn "Thiết kế" (Design), nhấp tiếp vào "Chỉnh sửa html" (Edit html).

2. Nhấp chọn "Mở rộng tiện ích" (Expand widget templates)

3. Tìm đoạn mã HTML sau:
<data:post.body/>

4. Ngay sau đoạn mã trên, đặt đoạn mã này dưới nó:

<--Mã bài viết có liên quan, mã 1; by www.socmai.tk-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> <br/> <br/> <H2>Related Post:</H2> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='albri'/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 10; maxNumberOfLabels = 3; 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; if(a.href!=location.href) { 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+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;albri&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#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> </script> </div> <script type="text/javascript">RelPost();</script> </div> </b:if>
<--Đóng mã; by www.socmai.tk-->

5. Tìm đoạn mã html sau:

]]></b:skin>

6. Ngay trước đoạn mã đó, dán đoạn này trước nó:

<--Mã bài viết có liên quan, mã 2; by www.socmai.tk-->
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px; background-color: #f2f2f2;-moz-border-radius:5px; margin:5px;} .rbbox:hover{background-color: rgb(255, 255, 255);}
<--Đóng mã 2; by www.socmai.tk-->

Lưu ý:
# background-color: #f2f2f2 là màu nền, bạn có thể thay đổi màu bạn thích

7. Nhấp chọn "Lưu mẫu" (Save template)
Bạn đã làm xong. Chúc bạn vui vẽ!