3 thg 9, 2007

Label Tabs For NEO Template

DangLVH
Cũng như cách mà mình đã hướng dẫn làm label tabs ở bài trước(link) bạn làm theo các bước như ở bài trước, chỉ thay đổi một tí ở bước 4 để làm cho tab của bạn hoàn hảo hơn đối với template NEO.

Ở bước 4 không làm giống như bài trước(link) mà làm thế này:

Các bạn copy đoạn code sau:
Code 1:

<b:widget id='Label1' locked='false' title='Nha~n' type='Label'>
<b:includable id='main'>
<div id='tabsJ'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<li>
<a href='javascript:fetchLatestPosts("
http://yourblog.blogspot.com/","Ten Label");'><span>Ten Hien Tren Tab</span>
</a>
</li>
<li>
<a href='javascript:fetchLatestPosts("
http://yourblog.blogspot.com/","Tên Label");'><span>Tên Hiện Trên Tab</span>
</a>
</li>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Trong đó "Tên Label" là Tên Label trong blog bạn, vd: blog bạn có một label là Tin Học, thì bạn phải để chính xác là "Tin Học" vào "Tên Label" ở phía trên. Và "Tên Hiện Trên Tab" là dòng chữ được hiển thị trên Tab của bạn.
vd: Mình có một label được đặt tên là "Blog Hack" thì mình sẽ sửa như sao:
<li>
<a href='javascript:fetchLatestPosts("http://danglvh.blogspot.com/","Blog
Hack");'><span>Blog Hack</span>
</a>
</li>

Ở trên mình chỉ ví dụ cho 2 Tab, nếu bạn có nhiều label thì làm nhiều dòng như thế này và thêm vào "Tên Label":

<li>
<a href='javascript:fetchLatestPosts("
http://yourblog.blogspot.com/","Tên Label");'><span>Tên Hiện Trên Tab</span>
</a>
</li>

Sau đó vào Edit HTML/Chọn Expand Widget tìm và paste đoạn code 1 ở trên vào dòng ".......copy code 1 bỏ vào đây....." ở đoạn code bên dưới:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

.......
copy code 1 bỏ vào đây.....
</b:section>
</div>

Sau đó nhấn nút lưu lại. Quay lại blog và F5
Chúc bạn thành công, có gì thì comment nhé!

About the Author

DangLVH / Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

21 comments:

  1. giup minh nha minh chen code vao sao no xoa code hoac khong hien thi co the chi o hon ko

    Trả lờiXóa
  2. uhm, vì lúc bạn comment hay gửi một bài entry mà dùng chèn code bình thường thì nó sẽ hiểu là code và thực thi nó lun.

    Bây giờ bạn muốn chèn code thì trc khi chèn vào, bạn hãy copy nó vào Frontpage hoặc dreamweaver ở chế độ Design, rồi chuyển qua view code copy dòng code đó bỏ vào entry hoặc comment rùi gửi đi.

    Trả lờiXóa
  3. ban giup minh voi khi minh chép doan code hien thi label vao cho bạn chi thi no bao la co hon 1. hoac no xoa doan code di minh ko tai nao lam cho tab no hiện lên .
    cậu co thể chỉ thêm một vài ki thuật dể thiết kế blog

    Trả lờiXóa
  4. à, chắc là nó có cái id Label1 rồi, bạn thử đổi thành Label2 xem, nếu bị nữa thì đổi thành Label3. Bạn sửa chổ đoạn code này:
    code 1
    <b:widget id='Label1' locked='false' title='Nha~n' type='Label'>
    <b:includable id='main'>
    <div id='tabsJ'>
    <ul>
    <li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>

    Sửa xong rùi bạn làm lại theo hướng dẫn xem nó có báo lỗi nữa ko nha. Nếu có gì thì bạn cứ comment cho mình.

    Uhm, mình sẽ viết thêm một vài bài nữa. Cám mơn bạn vì đã ghé thăm blog của mình nha!

    Trả lờiXóa
  5. hu!hu!
    minh vẩn ko tai nào chèn nó vào đựoc .
    khi minh paste cả doạn code vào điên thông tin vào và luu thi no xóa tât nó chi chừa lại doan id label hà.

    khi minh xem phan tư trang thi có cái nhan nhung xem blog thi chang thấy gi
    À cái đoạn code tab phai nam duoi cai tieu đề phai ko .

    nếu có thể D post template đầy dủ của D lên dể mình down vê so sanh xem minh thiếu sót gi ko

    lai phai phiên den D mot lân nừa rổi

    Trả lờiXóa
  6. source code nè 12A7 ơi>>
    http://danglvh.blogspot.com/2007/09/my-template-blogs-source-code.html

    Trả lờiXóa
  7. cam on D da tan tinh chi cho minh minh, minh rat cam on !
    Minh rat vui vi duoc lam wen voi D.
    neu co the minh mong ban chi bao minh nhieu hon nua .
    À cho minh hoi cách nao de chen hinh chu thích vào giua daon van ban. và tao download here sau khi da upload len
    cả read more nua minh hoi hom rai ma khong ai chi het
    cam on D nhieu!minh co lam phien ban wa ko?

    Trả lờiXóa
  8. hihi, có bận một tí nhưng mà được giúp đở các bạn là một niềm vui đối với D mà, mấy cái mà bạn nói D sẽ hướng dẫn sau hén. Cái Read more thì hình như trong NEO nó có hổ trợ sẵn cho mình rùi thì phải, cái này thì để D viết một bài hướng dẫn dành cho template thường và template NEO lun.

    Còn bạn muốn chèn hình vào thì đơn giản thui. Ở mục post bài đó bạn. Trên thanh công cụ của nó, bạn kiếm cái biểu tượng nào mà khi ra chuột tới nó có cái chử là Add Image. Bấm vô rùi copy link hình đó vào là xong.

    Còn nếu muốn add link vào chữ download thì trước tiên bạn đánh chữ Download ra rùi tô đen lên chữ download. Cũng kiếm trên thanh công cụ rà chuột tới biểu tưởng có hình giống cái mắt xích, nó sẽ hiện ra chữ Link, bạn bấm vào và nó sẽ ra một cửa sổ cho bạn copy link vào đó sao đó ok là xong ngay.

    Chúc bạn vui vẻ nhe! Có gì thì cứ comment nhé.

    Trả lờiXóa
  9. uh minh cam on nhieu vi su giup do tan tinh cua Dang nha !

    Trả lờiXóa
  10. blog của bạn là gì vậy 12A7, sao ko để lại link cho mình vào xem với

    Trả lờiXóa
  11. thực ra không cần thẻ span ở ngoài tên tab đâu.

    Trả lờiXóa
  12. hic, hỏng có thẻ span thì sao ta chèn link vô được bạn, bỏ thẻ span đi thì mất luôn cái label đó còn gì.

    Trả lờiXóa
  13. Thanks Đăng nhiều những bài post của Đăng thật hữu ích

    Trả lờiXóa
  14. Có cái span đó thì nó mới có cái image phía dưới cái tab được, do cái CSS quy định vậy nên mình phải tuân thủ để đạt kết quả tốt nhất.

    Trả lờiXóa
  15. Khi làm nó hiện thi: "Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.
    Thông báo lỗi XML: The element type "li" must be terminated by the matching end-tag "".
    Là sao vậy D?

    Trả lờiXóa
  16. Hải coi cái thẻ li có đóng chưa, xem kỹ code lại đi, lỗi code đó.

    Trả lờiXóa
  17. Hello Đăng,

    Tôi rất thích làm được như bạn chỉ dẫn. Sau khi thử thì kết quả như sau:

    1) Mấy cái hình tab không hiện lên. Kiểm tra lại thì thấy rằng cái style CSS thì là "tabsF", nhưng cái đoạn code sau thì để là J: div id='tabsJ'. Sau khi sửa lại chữ F thì nó work đã hiện lên hình tab.

    2) Còn cái đoạn code tag a:

    thì sau khi saved, blogger tự động biến dạng thành string có nhiều chữ "&quotes..."

    Không hiểu tại sao? Nó không work (cho dù sau khi thế tên chính xác của nhãn vào).

    3)Mình muốn xem source code của bạn nhưng cái link bị die rồi.

    Bạn có thể sửa link lại và giúp thêm cho mình không?

    Cám ơn

    Trả lờiXóa
  18. Tôi đã mò ra được rồi (cũng hên). Tôi phải mở Notepad ra, copy code vô Notepad, và lấy tên của label bằng cách bấm chuột phải lên tên của label trong blog của mình và nhận "copy link location". Thí dụ, thí dụ cái label có tên video không nhất thiết là sẽ có link mà đoạn cuối là chính xác "video" mà có thể xen lẫn các dấu hiệu phần trăm và số nữa. Phải dùng cái đoạn link nầy để thay thế vào.

    Sau khi thay thế link vào ở Notepad thì mình copy tất cả vào blog template. Đã thử thì work. Cám ơn Đăng nhiều.

    Trả lờiXóa
  19. Mình có một câu hỏi. Mình thấy trong blog nầy có nhãn "Recent Post" nằm trong dưới phần "categories". Hãy xem:
    http://www.techgardens.com/

    Khi một người bấm vào đó (sau khi đã lang thang khắp các posts khác) thì nó sẽ hiện lại các bài mới đăng mà không cần phải load nguyên trang trở lại. Đăng có thể chỉ mình làm cách nào được không?

    Trả lờiXóa
  20. xin loi vi reply cho ban tre, vi dao nay minh qua ban nen it hay ghe vao blog lam. Cai recent post ma ban noi la 1 chuc nang cua template NEO. Ban co the tim hieu them o cac bai viet sau

    ban co the xem them o bai viet nay, http://danglvh.blogspot.com/2007/08/cch-ci-t-neo-cho-blogger_28.html

    va bai viet nay
    http://danglvh.blogspot.com/2007/08/cch-ci-t-neo-cho-blogger_28.html

    Trả lờiXóa
  21. Cám ơn Đăng,

    Mình vừa tìm ra được code sau đây: nó sẽ hiện ra các bài đăng mới:

    <li><a href='javascript:fetchPosts("");'>Bài đăng mới</a></li>

    Code trên là từ source code của blog:
    http://www.techgardens.com/

    Trả lờiXóa

Recent Posts

Posts

Popular Posts