• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

22
06/11/2011

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

{22 bình luậnAdd yours ?}

16:08:00, 7 thg 11, 2011

hay anh ạ, em toàn dùng cách thủ công, nhưng đôi khi thủ công lại thể hiện đủ ý đồ viết của mình ;))

Reply
23:11:00, 7 thg 11, 2011

Hay nhưng hơi loằng ngoằng :5)

Reply
11:26:00, 8 thg 11, 2011

Template của bác bị vỡ tan nát trên MacOS nè :D

Reply
19:25:00, 8 thg 11, 2011

Lại thêm 1 tiện ích hay cho anh em :5)
Oánh dấu phát, khi nào cần thì dùng :4)

Reply
10:38:00, 11 thg 11, 2011

Cái này hay, nhưng nhiều bước quá, em thích sự đơn giản hơn...
Mà hôm nay em vô kiểm tra PR tự dưng cái blog của em bị cụ Google cho 4 điểm mới đau chứ, chẳng biết có nhầm lẫn gì hông nữa. Hihi :4)

Reply
10:42:00, 11 thg 11, 2011

@Phạm Minh Tâm Bác Gúc vừa cập nhật Pagerank trong tháng 11 mà. Lên là mừng rồi chứ.

Reply
11:54:00, 11 thg 11, 2011

À vâng, em cũng mừng lắm, vì từ 2 mà lên thành 4 thì không mừng sao được, nhưng 4 chưa hẳn là con số em mong muốn, ít ra cũng phải từ 5 trở lên em mới thật là vui :E)

Reply
12:42:00, 11 thg 11, 2011

Blog bác chưa redirect từ thuthuatblogger --> www.thuthuatblogger nhé... Bác xem check lại nhanh nhé

Reply
13:16:00, 11 thg 11, 2011

Ơ sao em Check blog của bác thì vẫn thấy 3/10, của Duy Pham cũng là 3/10, còn Vnblogspot của Tien Nguyen là 2/10, ngay cả của bác Noct cũng chỉ có 2/10 là sao vậy nhỉ, em cảm thấy nó cứ là lạ à nha :9)

Reply
01:21:00, 15 thg 11, 2011

"if you visit me, I will visit agains your site"

Reply
09:28:00, 15 thg 11, 2011

Hà ơi cho toi hỏi tại sao tôi xóa bài rồi mà ở linkwithin vẫn hiện lên và khi click vào nó bảo không tim thấy trong blog, làm gì để khác phục lỗi này
Nhờ Hà trả lời sớm nhé
Tks!

Reply
21:13:00, 16 thg 11, 2011

Ôi học và làm việc nhiều, k còn sức để blogging nữa các bạn ơi.

Reply
21:35:00, 16 thg 11, 2011

Chắc anh đang đùa, chứ thật thế thì có mờ nguy to :H) :P)

Reply
21:48:00, 16 thg 11, 2011

Cái feed của Blogger đang có vấn đề, mấy tiện ích Recent Comments k còn hoạt động được. Chưa có thời gian để sửa chữa nữa nè.

Reply
11:58:00, 20 thg 11, 2011

@ Huỳnh Nhật Hà: Đến anh cũng thế thì bọn em làm sao mà nói hay cho được, mà làng Blogger nhà ta dạo nạy cũng im ắng quá trời luôn, chẳng thấy có gì sôi nổi cả. Buồn!^^

Reply
17:44:00, 5 thg 12, 2011

CHO MÌNH HỎI LÀ CÓ CÁCH NÀO TẠO MỤC CÁC BÀI VIẾT TƯƠNG TỰ KHI XEM MỘT "TRANG" KHÔNG( Trang chứ không phải bài viết blog bình thường)
Với lại code các bài viết ngẫu nhiên, mình có thể nào cho các bài viết ngẫu nhiên xuất hiện trên một module nào đó ko ta?
Thanks.
YM: ytuongquang
Email: ytuongquang@gmail.com

Reply

@Trần Thanh Quang
Bạn tham khảo trong đây này: http://www.thuthuatblogger.info/search/label/Recent%20Posts?max-results=10

Reply
08:54:00, 28 thg 3, 2012

hi

Reply
23:53:00, 17 thg 10, 2016

ước gì chỉ cần ăn thôi mỡ bụng cũng giảm

cách trị mụn

Reply
22:20:00, 8 thg 12, 2016

phải lm sao e hết buồn đây


cách trị mụn

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn