• 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

Hiển thị thông tin bài viết trên sidebar

27
11/10/2011

Tạo một khung thông tin bài viết như tác giả, thời gian đăng bài, số nhận xét đặt trên sidebar là một cách bố trí mới lạ mà bạn có thể bạn hiếm thấy trên cộng đồng blogspot. Thực ra để tạo tiện ích này, mình lại dùng đến sự kỳ diệu của cấu trúc XML sẵn có trong Template của blogspot.

DEMO

Trong một Template thì dữ liệu bài viết nằm trong tiện ích Blog Posts có ID là Blog1. Chính vì Blog Posts là một tiện ích nên nó cũng có nhiều ID giống như một tiện ích HTML/Javascript vậy, tức là nó có thể có ID như Blog2, Blog3, Blog4 … Lợi dụng mấu chốt này, mình đã gắn thêm một tiện ích Blog Posts có ID là Blog2 lên sidebar của Template để hiển thị thông tin bài viết như vậy.

Sau khi đăng nhập Blogger vào Design >> Edit HTML, chọn mở rộng mẫu tiện ích. Sử dụng từ khóa Blog1 để tìm đến đoạn code như thế này:

  1. <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
  2. ..............
  3. ..............
  4. ..............
  5. </b:widget>

Đoạn code như trên nói chung rất dài, mình chỉ cần lấy những đoạn cần thiết liên quan đến thông tin bài viết. Sau khi hoàn thành đoạn code cho tiện ích Blog Posts có ID là Blog2 như bên dưới, mình sẽ đặt nó sau dòng <b:section class='sidebar' id='sidebar' preferred='yes'>.

  1. <b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
  2. <b:includable id='nextprev'/>
  3. <b:includable id='post' var='post'>
  4.   <div class='side_post_meta'>
  5. <div class='item'>
  6. <span class='post_labels'>
  7.       <b:if cond='data:post.labels'>
  8.         <data:postLabelsLabel/>
  9.         <b:loop values='data:post.labels' var='label'>
  10.           <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  11.           <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  12.         </b:loop>
  13.       </b:if>
  14.     </span>
  15.     </div>
  16. <div class='item'>
  17. <span class='post_author'>
  18. <b:if cond='data:top.showAuthor'>
  19. <span><data:post.author/></span>
  20. </b:if></span>
  21. </div>
  22. <div class='item'>
  23. <span class='post_published'>
  24. <b:if cond='data:top.showTimestamp'>
  25. <span> <data:post.timestamp/></span></b:if>
  26. </span>
  27. </div>
  28. <div class='item'>
  29. <span class='post_comment'>
  30. <b:if cond='data:post.allowComments'>
  31. <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Go to comments'>
  32. <data:post.numComments/> nhận xét</a> <b:else/>Comments Off</b:if></span>
  33. </div>
  34. </div>
  35. <div class='clear'/>
  36. </b:includable>
  37. <b:includable id='main' var='top'>
  38.   <b:if cond='data:blog.pageType == &quot;item&quot;'>
  39.     <b:loop values='data:posts' var='post'>
  40.       <b:include data='post' name='post'/>
  41.     </b:loop>
  42.   </b:if>
  43. </b:includable>
  44. <b:includable id='comments' var='post'/>
  45. </b:widget>

Đến đây bạn chỉ cần tùy biến CSS để định dạng cho tiện ích vừa gắn vào, đặt CSS theo định dạng tương tự bên dưới vào trước dòng </b:skin>.

  1. div.side_post_meta {
  2.   background-color: #fff;
  3.   border: 1px solid #333;
  4.   padding: 10px;
  5. }
  6. div. side_post_meta div.item {
  7. ...... Bạn đặt thuộc tính CSS vào những vị trí này nhé
  8. }
  9. div.side_post_meta span.post_labels {
  10. ......
  11. }
  12. div.side_post_meta span.post_author {
  13. ......
  14. }
  15. div.side_post_meta span.post_published {
  16. ......
  17. }
  18. div.side_post_meta span.post_comment {
  19. ......
  20. }

Về CSS, bạn có thể mày mò nghiên cứu thêm để vận dụng cho blogspot của mình. Nếu có gì không rõ xin vui lòng nêu vấn đề tại đây. Lưu Template là hoàn tất.

{27 bình luậnAdd yours ?}

22:06:00, 11 thg 10, 2011

Blog em vừa xóa thông tin tác giả trong trang item, em đang nghĩ sẽ tạo thông tin tác giả ở sidebar, em định sử dụng điều kiện để quy định cho thành phần ở sidebar này. Còn các thông tin như author, label, time thì có khi nào mình chèn đoạn code những thông tin vào sidebar rồi sử dụng điều kiện không anh!

Reply
22:15:00, 11 thg 10, 2011

@Linh Dung Không được đâu em, những dữ liệu về author, label, comments chỉ có tác dụng khi nằm trong tiện ích Blog Posts với bất kỳ ID: Blog1, Blog2, Blog3, Blog4, Blog5, Blog100, Blog1000. Nếu k có một trong những ID này thì các dữ liệu ấy k hiện được :1)

Reply
22:21:00, 11 thg 10, 2011

Đây có phải là bài 1 không bác Hà?:N)

Reply
22:23:00, 11 thg 10, 2011

@24h-Cafe À không, cái này là thủ thuật XML trong Template của blogspot mà, không liên quan HTML5/CSS3 đâu à nha. Mai mới bắt đầu cơ mà. :1)

Reply
22:25:00, 11 thg 10, 2011

Mình tưởng Hà tung chưởng sớm :5)

Reply
22:30:00, 11 thg 10, 2011

Nhân tiện cho mình hỏi tí, về việc mình muốn bỏ cái chấm vuông trước Avata của "CẬP NHẬP TỪ BLOG KHÁC" tại địa chỉ này vnsupercar.blogspot.com Bác giúp mình với

Reply
22:43:00, 11 thg 10, 2011

@24h-Cafe Thêm CSS này là ok:
#BlogList10 ul li {list-style:none}

Không ngờ tiện ích này cài vào đẹp hơn mình tưởng.

Reply
23:08:00, 11 thg 10, 2011

@Huỳnh Nhật HàMình mày mò hoài mà nó không mất được, Bác có thể nói rõ hơn là đặt ở đâu và thêm gì nữa không, mình thật sự mù tịt về cái này. Cảm ơn bác

Reply
23:15:00, 11 thg 10, 2011

@24h-Cafe Sorry do đánh thiếu số 0 nên làm k được là đúng rồi:

Đặt trước dòng </b:skin> với CSS sau đây:
#BlogList100 ul li {list-style:none}

Reply
23:21:00, 11 thg 10, 2011

@Huỳnh Nhật HàNó vẫn không mất dấu được bác Hà ơi. Bác xem lại giúp, cảm ơn nhiều.

Reply
23:26:00, 11 thg 10, 2011

@24h-Cafe Aha, mới di dời xuống Footer rồi à. Vậy thì tìm dòng này:
#footer-column-container ul li{padding:6px 0 6px 12px;margin:0;background:url(http://2.bp.blogspot.com/-iOT5ZgMXpEM/Tl_aC1iOF4I/AAAAAAAABuM/L1N48nhvGYM/s000/widget-list.png) left 12px no-repeat;border-bottom:1px solid #E2E2E2;}

Và đổi thành:

#footer-column-container ul li{padding:6px 0 6px 12px;margin:0;list-style:none;border-bottom:1px solid #E2E2E2;}

Reply
23:32:00, 11 thg 10, 2011

@Huỳnh Nhật HàTìm không có đoạn như anh nói anh Hà ơi

Reply
23:34:00, 11 thg 10, 2011

@Huỳnh Nhật HàNếu bác chưa ngủ thì giúp mình, còn không để mai vậy, chúc bác ngủ ngon.

Reply
23:36:00, 11 thg 10, 2011

@24h-Cafe Chết cha rồi, lộn chuồng sang blog: http://www.vnfreeall.tk/ rồi.

Tìm đoạn này:

.sidebar li {
background:transparent url(http://4.bp.blogspot.com/-bopwAFahNJI/Tnryx6nh-hI/AAAAAAAAAXM/IOwx1Mj2JG8/s000/bulled.png) no-repeat scroll left center;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 8px;
}

Rồi sửa thành:

.sidebar li {
list-style:none;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 8px;
}

Reply
23:39:00, 11 thg 10, 2011

@Huỳnh Nhật HàCảm ơn bác nhiều, mình đã làm được.

Reply
23:43:00, 11 thg 10, 2011

phải nói là Bác nhầm "chuồng" mà em sửa cả 2 được luôn :1) , chúc bác nghỉ sớm để ngày mai còn "lên lớp" :3)

Reply
12:55:00, 12 thg 10, 2011

Bác có thể giúp e sửa cái search box ko

Reply
13:29:00, 12 thg 10, 2011

Khi định chuyển đổi theme blogussion em cũng đã thêm 1 widget Blog này để làm breadcrumb dưới header nhưng từ bỏ ngay ý định đó. Đây là 1 widget mà có những hàm con như share, backlink, rồi cả code của mobile tự động được add vào. Code thực tế trên temp sẽ k ngắn như vậy mà là rất dài.

Reply
13:52:00, 12 thg 10, 2011

ohh hay phết, nhưng em thấy nhiều thông tin tác giả quá cũng hơi loãng

Reply
14:17:00, 12 thg 10, 2011

Hà ơi, mình đã làm mọi cách để có thể hiển thị thanh trạng thái bredcrumd ở tại vị trí trên cùng của blog ( tại vị trí dòng chữ DANH BẠ BLOGSPOT của blog thuthuatblogger) mà không cách nào làm được, Hà có thể giúp mình được không?

Reply
17:14:00, 12 thg 10, 2011

@Duy Pham Đúng thế, dù code trên ngắn nhưng khi add vào trong Template sẽ dài hơn, gồm cả share, backlinks, mobile nhưng khi tùy chọn hiển thị thông tin bài viết thì cũng nhẹ nhàng, code XML nên k ảnh hưởng nhiều đến tốc độ load. Như trên TTB load k vấn đề gì.

Reply
17:16:00, 12 thg 10, 2011

@VnAbout: Blogger À, cái đó là menu chứ gì đâu. Cho thử search hỏi bác Gúc trước đó.

Reply
21:22:00, 12 thg 10, 2011

Không phải rồi hà ơi, ý là làm thế nào đẻ hiên thị thanh breacrumd tại vị trí menu trên cung của Hà cơ mà.

Reply
22:11:00, 14 thg 10, 2011

@Nguyễn Đức Là do dòng này sai: <input name='ie' type='hidden' value='utp-8'/>

Sửa lại thành <input name='ie' type='hidden' value='utf-8'/>

Reply
22:21:00, 16 thg 7, 2012

Chào bạn , mình muốn làm phần hiện thị số bài viết của author dưới từng bài đăng , không biết trên thủ thuật blogger có bài nào tương tự cho mình xin link với nhé . mình kiếm mãi mà không có

Reply
15:20:00, 2 thg 12, 2012

Mình cũng tập tành chơi blog và lấy nó để làm kinh doanh, mình cũng tạo được 1 trang: www.dagiao.com , bạn xem giúp mình có bị lỗi nào và cần cati thiện thêm điều gì không ạh?

Mong những chia sẽ kinh nghiệm quý báu của bạ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