Tiện ích tài liệu tham khảo cho bài đang đọc

Trong mỗi bài viết, đôi khi chúng ta thường đặt các liên kết đến tài liệu tham khảo cho bài viết để người đọc dễ dàng tìm đọc để hiểu thêm về bài viết. Các liên kết này thường được đặt ở cuối mỗi bài viết. Ở đây mình sẽ hướng dẫn bạn cách tạo tiện ích tài liệu tham khảo cho bài đang đọc được đặt trên Sidebar để tạo nét độc đáo cho blogspot của bạn.

DEMO.

Để thực hiện thủ thuật này, bạn hãy làm theo các bước như sau:

Bước 1. Trước tiên khi đăng bài, ở cuối bài viết bạn hãy đặt các liên kết tài liệu tham khảo theo cấu trúc HTML như thế này:

1. <a class="linkonsidebar" href="URL_tai_lieu_tham_khao_1">Ten tai lieu tham khao 1</a>
2. <a class="linkonsidebar" href="URL_tai_lieu_tham_khao_2">Ten tai lieu tham khao 2</a>
3. <a class="linkonsidebar" href="URL_tai_lieu_tham_khao_3">Ten tai lieu tham khao 3</a>

Bước 2. Vào Design >> Edit HTML. Chọn Expand Widget Templates.

Kế đến chúng ta cần ẩn các liên kết tài liệu tham khảo ở cuối bài viết (vì mục đích chính là hiển thị các liên kết này trên Sidebar) bằng cách đặt dòng code sau đây vào trước dòng ]]></b:skin>.

1. .linkonsidebar {display:none}

Sau đó, viết một kịch bản giúp các liên kết ẩn trong bài viết được hiển thị trên Sidebar. Vì mỗi bài viết có một ID riêng nên các liên kết này cũng được gán theo ID của bài viết. Đặt đoạn code bên dưới vào trước thẻ </head>.

1. <script type="text/javascript">
2. //<![CDATA[
3. // Script to Display Reference Links on Sidebar  by www.thuthuatblogger.info
4. // giúp các liên kết ẩn trong bài viết được hiển thị
5. var linkonsidebarHREF=new Array();
6. var linkonsidebarTXT=new Array();
7. // chức năng hiển thị link theo ID của bài viết
8. function displayLinks(idPOST) {
9.   var thePOST = document.getElementById("post-" + idPOST);
10.   // tìm tất cả các link
11.   var thelist = thePOST.getElementsByTagName("a");
12.   if(thelist.length>0){
13.     // nếu có thì tìm tất cả các link có lớp linkonsidebar
14.     var offset;
15.     for(var i=0; i<thelist.length; ++i) {
16.       if(thelist[i].className=="linkonsidebar") {
17.         // nếu tìm ra thì thêm vào danh sách hiển thị
18.         offset = linkonsidebarHREF.length;
19.         linkonsidebarHREF[offset] = thelist[i].href;
20.         linkonsidebarTXT[offset] = thelist[i].innerHTML;
21.       }
22.     }
23.   }
24. }
25. //]]>
26. </script>

Bước 3. Tiếp theo, chúng ta cần phải gắn ID cho bài viết. Tìm đến đoạn code như sau:

1. <b:includable id='post' var='post'>
2.   <div class='post hentry'>

Thẻ <div class='post hentry'> (hoặc <div class='post'>) tạo lớp CSS chung cho toàn bộ bài viết, vậy để chuyên biệt hóa cho từng bài viết thì chúng ta cần gắn ID vào như sau:

1. <div class='post' expr:id='&quot;post-&quot; + data:post.id'>

Sau đó tìm đến đoạn code tương tự như bên dưới và thêm vào phần được đánh dấu màu đỏ.

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<script type='text/javascript'>displayLinks(&#39;<data:post.id/>&#39;);</script>

Lưu Template.

Bước 4. Vào Page Elements. Thêm một tiện ích HTML/Javascript và đặt vào nội dung tiện ích bằng đoạn code bên dưới. Có thể đặt tên cho tiện ích là Tham khảo cho bài đang đọc.

<style>
#reflinks { /* thêm thuộc tính CSS cho nội dung thẻ div */ }
#reflinks a {
/* thuộc tính cho link */
display: block;
list-style-type:decimal
}
#reflinks a:hover { /* hiệu ứng hover cho link */ }
</style>
<div id="reflinks">
<script type="text/javascript">
var strout = "";
// nếu có link hiển thị
if(linkonsidebarHREF.length>0){
// thì đọc danh sách
for(var i=0; i<linkonsidebarHREF.length; ++i) {
// và đặt cùng nhau trong mã HTML
strout += "<a href='" + linkonsidebarHREF[i] + "' target='_blank'>" + linkonsidebarTXT[i] + "</a>";
}
document.write(strout);
}
// nếu không có link hiển thị thì hiện thông báo chưa có tài liệu tham khảo
else {document.write('<b>Chưa có tài liệu nào</b>');
}
</script>
</div>
<div class='clear'></div>

Bước 5. Vào Edit HTML. Thao tác cuối cùng là chỉ hiển thị tiện ích HTML/Javascript vừa thêm ở các trang bài viết (item). Chọn Expand Widget Templates. Tìm đến ID của tiện ích HTML/Javascript nói trên (ví dụ ở đây có ID là HTML100) và thêm vào lệnh điều kiện (ở dòng 3 và dòng 11) như sau:

1. <b:widget id='HTML100' locked='false' title='Tham khảo cho bài đang đọc' type='HTML'>
2. <b:includable id='main'>
3. <b:if cond='data:blog.pageType == &quot;item&quot;'>
4.   <!-- only display title if it's non-empty -->
5.   <b:if cond='data:title != &quot;&quot;'>
6.     <h2 class='title'><data:title/></h2>
7.   </b:if>
8.   <div class='widget-content'>
9.     <data:content/>
10.   </div>
11. </b:if>
12. </b:includable>
13. </b:widget>

Lưu Template.
Gắn ID cho các thành phần bài viết

Tạo màu nền xen kẽ cho bài viết

Lúc trước mình đã hướng dẫn các bạn cách gắn ID cho từng bài viết để từ đó tùy biến CSS riêng cho từng bài viết. Từ đây mình có thể giúp bạn sáng tạo thêm cách tạo màu nền xen kẽ cho bài viết khi duyệt xem các bài viết ở kiểu trang chủ và trang nhãn.

DEMO

Để thực hiện thủ thuật này, trước tiên bạn cần gắn ID cho bài viết.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến dòng code sau rồi thêm vào phần được đánh dấu màu đỏ:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

Bước 2. Kế đến chúng ta sẽ viết một kịch bản gán màu nền cho các bài viết chẳn (evenPosts) và các bài viết lẻ (oddPosts), đặt đoạn code bên dưới vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function counterPosts(strx) {
var therest;
therest = PostsCounter % 2;
if (therest == 0)
document.getElementById(strx).className='evenPosts';
else
document.getElementById(strx).className='oddPosts';
}
//]]>
</script>
<style>
.oddPosts {background-color: #F0F8FF; padding: 10px;}
.evenPosts {background-color: #F0F0F9; padding: 10px;}
</style>

Bước 3. Tìm đến thẻ <b:includable id='main' var='top'>

Kéo thêm xuống vài dòng sẽ thấy dòng <b:loop values='data:posts' var='post'> rồi đặt trước nó bằng đoạn code bên dưới:

<script type='text/javascript'>var PostsCounter=0;</script> <!-- đếm từ Zero -->

Tiếp tục kéo xuống tìm thấy thẻ đóng </b:loop> của thẻ <b:loop values='data:posts' var='post'> rồi thêm trước nó bằng đoạn code bên dưới:

<b:if cond='data:blog.pageType != "item"'>
<!-- không thực thi chức năng này ở các trang đọc bài viết -->
<script type='text/javascript'>
PostsCounter=PostsCounter+1;
counterPosts(&#39;post-<data:post.id/>&#39;);
</script>
</b:if>

Toàn bộ đoạn code sau khi thêm vào sẽ trông giống như sau:

<b:includable id='main' var='top'>
.......

<script type='text/javascript'>var PostsCounter=0;</script> <!-- đếm từ Zero -->

<b:loop values='data:posts' var='post'>
.......

<b:if cond='data:blog.pageType != "item"'>

<!-- không thực thi chức năng này ở các trang đọc bài viết -->

<script type='text/javascript'>

PostsCounter=PostsCounter+1;

counterPosts(&#39;post-<data:post.id/>&#39;);

</script>

</b:if>

</b:loop>
.......
</b:includable>

Lưu Template là hoàn thành.

Gắn ID riêng cho các thành phần trong bài viết

Cấu trúc một bài viết trên blogspot bao gồm tập hợp các lớp (class) và ID khác nhau và một khi chúng ta tạo các thuộc tính CSS cho các lớp và ID đó thì tất cả các bài viết trên blog đều có chung một định dạng. Vậy làm cách nào để có thể tùy biến CSS cho riêng từng (hoặc chỉ một số) bài viết vì trường hợp này cũng rất cần thiết cho một số tình huống khi bạn muốn tạo trang chuyên biệt có những định dạng khác biệt với những trang thông thường khác. Mấu chốt vấn đề là chúng ta cần tạo ID riêng cho mỗi bài viết, và một khi có ID riêng thì chúng ta có thể dễ dàng gán CSS riêng cho chúng.

Khi ở trạng thái đăng bài viết, nếu chú ý trên thanh địa chỉ cùa công cụ trình duyệt, hẳn bạn sẽ thấy nó trông giống như thế này:

http://www.blogger.com/post-edit.g?blogID=XXXXXXXXXXXXXXXXX
&postID=YYYYYYYYYYYYYYYYYYY

Trong đó YYYYYYYYYYYYYYYYYYY là chuỗi số ID của bài viết. Và chuỗi số này được thiết lập trong cấu trúc XML của Template dưới dạng như sau:

<b:includable id='post' var='post'>
<div class='post'> // (hoặc ở 1 số Template là thẻ <div class='post hentry uncustomized-post-template'>)
<a expr:name='data:post.id'/>
[.......]

Thẻ <div class='post'> tạo lớp CSS chung cho toàn bộ bài viết, vậy để chuyên biệt hóa cho từng bài viết thì chúng ta cần gắn ID vào như sau:

<div class='post' expr:id='"post-" + data:post.id'>

Khi định dạng CSS cho toàn bộ bài viết nào đó thì ta đặt thế này:

<style type='text/css '>
#post-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Kế đến chúng ta gắn ID cho tiêu đề bài viết, như sau:

<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title' expr:id='"title-" + data:post.id'>
[.......]

Và thiết lập CSS cho tiêu đề bài viết riêng như bên dưới:

<style type='text/css '>
h2#title-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Nếu muốn gắn ID cho phần ngày đăng bài viết thì tìm đến đoạn code này:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>

Và bắt đầu gắn lớp riêng cho tiêu đề bài viết bằng cách đổi nó trở thành:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header' expr:id='"date-" + data:post.id'>
<data:post.dateHeader/>
</h2>
</b:if>

Rồi tạo CSS như sau:

<style type='text/css '>
h2#date-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Và sau cùng, nếu muốn gắn ID cho phần footer của bài viết thì tìm đến đoạn code trông giống như sau:

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'> [.......] </p>
<p class='post-footer-line post-footer-line-2'> [.......] </p>
<p class='post-footer-line post-footer-line-3'> [.......] </p>
</div>

Rồi đổi thẻ <div class='post-footer'> trở thành:

<div class='post-footer' expr:id='"footer-" + data:post.id'>

Theo đó, định dạng CSS cho nó như sau:

<style type='text/css '>
div#footer-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Tựu trung lại, gom hết các phần CSS ở trên như sau:

<style type='text/css '>
#post-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
h2#title-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
h2#date-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
div#footer-YYYYYYYYYYYYYYYYYYY {đặt các thuộc tính CSS vào đây}
</style>

Như vậy bằng cách gắn ID riêng biệt cho từng bài viết thông qua việc tận dụng định dạng PostID sẵn có của blogspot, giúp chúng ta dễ dàng tùy biến CSS cho từng bài viết, như màu nền, font chữ, màu chữ, cỡ chữ, kiểu chữ…; hơn nữa cũng là cách chúng ta hiểu sâu thêm về cấu trúc XML của Template, đồng thời nâng cao trình độ “kung fu blogspot” của bạn.