Wednesday, September 26, 2007

Mẫu Minima 3 cột dành cho Blogger mới

Đã cập nhật: Giải pháp sử dụng tên miền miễn phí CO.CC cho Blogger và Yahoo! 360plus.
Đây là mẫu 3 cột dành cho Blogger mới.

Các đặc điểm nổi bậc của Template này:

- Ba cột với chiều rộng cố định (main: 520px; mỗi sidebar: 220px).
- Sử dụng kỹ thuật mở rộng bài viết do Ramani (Hackosphere) tạo (*).
- Nút Bookmark và Feed của AddThis dưới mỗi bài viết.
- Danh sách liên kết có thể đóng mở ở sidebar (**).
- Ẩn navbar (Navigation bar).

(*) Sử dụng kỹ thuật mở rộng bài viết:

Bước 1: Đăng nhập vào Blogger, thẻ Settings (Cài đặt) và chọn Formatting (Định dạng).




Bước 2: Kéo thanh cuộn và dán đoạn mã dưới đây vào Post Template(Mẫu bài đăng) :

Phần tóm tắt hay đầu bài đăng
<span id="fullpost">
Phần còn lại.
</span>





Bước 3: Bây giờ hãy tạo bài đăng mới và click trên thẻ Edit HTML (Chỉnh sửa HTML), bạn phải nhập bài đăng theo cấu trúc này.




(**) Sử dụng danh sách liên kết đóng mở:

<a href="javascript:void(0);" onclick="expandcollapse('TÊNDUYNHẤT')"> [+/-] Tên hiển thị</a>
<ul id="TÊNDUYNHẤT" class="texthidden">
<ul>
<li><a href="Liên kết 1"> Tên của liên kết 1</a></li>
<li><a href="Liên kết 2"> Tên của liên kết 2</a></li>
</ul>
</ul>


TÊNDUYNHẤT: Là một tên duy nhất, không trùng lắp để bạn có thể sử dụng nhiều danh sách liên kết. Và các Liên kết 1, 2 tương ứng với liên kết được liệt kê trong danh sách đó.

Dán đoạn mã này vào tiện ích HTML/JavaScript lưu lại trên sidebar.

Download Template here (.rar file)
Demo.



Một kiểu hiện thị khác (cả hai sidebar cùng nằm bên phải):

Download
Hiển thị như hình:



(Vào thời điểm bài hướng dẫn này. Blog bạn đang xem là demo).

Cả hai mẫu này dành cho Blogger mới hoàn toàn. Để không gặp lỗi bạn phải tham khảo hướng dẫn về sao lưu và phục hồi.

Chúc bạn thành công.

Dropbox, dịch vụ lưu trữ đám mây, chia sẻ và đồng bộ dữ liệu giữa điện thoại di động, tablet, laptop và desktop. Tài khoản miễn phí 2.25GB! Bạn có thể kiếm thêm tối đa đến 18GB khi giới thiệu thêm người đăng ký Dropbox (mỗi người mà bạn giới thiệu đăng ký và cài đặt thành công Dropbox, bạn được 500MB!)

27 comments:

  1. Xin bạn chỉ rõ hơn về cách sử dụng danh sách liên kết đóng mở được ko?
    Mình đã làm theo hướng dẫn của bạn nhưng các liên kết hiện lên mà ko đóng lại???
    Cảm ơn về những bài viết hay của bạn!

    ReplyDelete
  2. Ví dụ:

    <a href="javascript:void(0);" onclick="expandcollapse('baoDienTu')"> [+/-] Các báo điện tử</a>
    <ul id="baoDienTu" class="texthidden">
    <ul>
    <li><a href="http://www.tuoitre.com.vn"> Tuổi Trẻ 1</a></li>
    <li>
    <a href="http://www.thanhnien.com.vn"> Thanh Niên</a></li>
    <a href="http://www.laodong.com.vn"> Lao Động</a></li>
    </ul>
    </ul>

    Giải thích:
    id="baoDienTu" : La ten duy nhat, khong trung voi bat ky ten nao. Moi id la mot ten rieng biet trong ma nguon cua Template.
    Những địa chỉ mà bạn muốn kết nối đến dành cho tên hiển thị tương ứng. Cái này nếu bạn biết HTML thì rõ hơn! Được dùng để gọi hàm expandcollapse() đã được khởi tạo trong Template.

    ReplyDelete
  3. Blog nay tuyet voi wa. Ban dung la Blog Master. Xin bai lam su phu. Cam on Blog Master nhe.

    ReplyDelete
  4. Cảm ơn bạn rất nhiều về những chỉ dẫn. Nhưng rất tiếc kết quả vẫn chưa được, các đường link vẫn hiện ra hết mà ko tự đóng lại. Nó cứ mở ra hết. Ko lẽ fải dowwnload mẫu template của bạn về mới được. Mình hiện cũng làm mẫu template 3 cột. Mong bạn júp jùm mình. Thanks

    ReplyDelete
  5. Hướng dẫn về phần link chỉ dành cho template mẫu mà mình đưa lên. Nếu bạn muốn sử dụng hãy paste đoạn mã này phía trên thẻ </head> trong Edit HTML và lưu lại. Nhớ là phải phía trên thẻ này.

    <script type='text/javascript'>
    document.write('<style>.texthidden {display:none} </style>');</script>
    <script type='text/Javascript'>
    function expandcollapse (postid)
    {
    whichpost = document.getElementById(postid);
    if (whichpost.className=="shown")
    {
    whichpost.className="texthidden";
    }
    else
    {whichpost.className="shown";
    }
    }
    </script>

    ReplyDelete
  6. mình đã làm đúng theo hướng dẫn của bạn, trong phân Customise thì nhìn thấy 3 cột đúng như bạn trình bày, nhưng vào "View blog" chỉ thấy mỗi phần giữa là phần "Bài dăg trên blog" thôi. Mình ko hiểu, xin bạn chỉ dẫn thêm. Cảm ơn.

    ReplyDelete
  7. c�m �n amin rất nhiều ,bộ code v� theme thật tuyệt vời ...bấy l�u to�n d�ng theme c� sẵn chỉ chỉnh sửa site ,nay ...thank

    ReplyDelete
  8. em khong cho no thanh 3 cot duoc anh ah. Voi blog moi khi up cai .xml len thj no ko chap nhan.

    ReplyDelete
  9. anh ơi..đây là dành cho blog mới..thế blog CŨ thì lằm thía nào?..giúp em cái...em thấy nhìu blog có thêm 1 cột nữa bên phải entry..có phải cái này hok vậy?

    ReplyDelete
  10. Anh ơi làm sao tạo được phần đăng nhập ở ngay trên Blog của mình( em dùng templates 3 cột ), mà không cần vào trang chủ của Blogger?

    ReplyDelete
  11. Mình làm cái này hoài không được vì cái template của mình nó đã có dạng "link to this post" . có phải nếu nó đã có như vậy rồi thì cái bạn nói trong bài này là không xd dc không ?

    Sao mình làm hoài mà cái phần link 2 nó vẫn hiện ngoài trang đầu luôn đó . Vậy phải làm sao hả bạn ? Vì khi mình post hình của 1 model thì entry post nó dài quá .

    Nếu có thời gian bạn ghé blog mình xem dùm mình nha . Blog của bạn hay lắm . mình học được rất nhiều . Cám ơn bạn .

    ReplyDelete
  12. Ba5n ơi sao bạn không trả lời giúp mình ? Cho mình biết là tại sao đi . Chúc bạn vui vẻ !

    ReplyDelete
  13. @ViXi, cái mới tạo phải đưa nội dung vào chứ ạ.

    @Anonymous, blog cũ là dạng HTML nên em tạo rất dễ bằng cách khai thêm id, hoặc dùng template dạng table.

    @Lãng Khách, em tạo cái link đăng nhập từ blog.

    @JEFFERSON LA [JEFFY], nếu không dùng Link to this post thì vào Bố cục, chọn Chỉnh sửa bài đăng và bỏ nó đi.

    Khi sử dụng hình nền post trên trình soạn thảo của Blogger sẽ không gặp trục trặc.

    ReplyDelete
  14. minh muon chen them hieu ung thanh truot vao 2 ben trai fai cua blog ma kho qua. Ban huong dan minh dc ko? Thanks!

    ReplyDelete
  15. blog hay đấy phát huy nhé. chia sẻ trang nhà nha

    http://viewave.blogspot.com

    ReplyDelete
  16. tạo thanh trượt đó dễ mà, ghé thăm http://viewave.blogspot.com và liên hệ Viewave sẽ hướng dẫn cho

    ReplyDelete
  17. anh nhân qớ.sao cái temp ni nó kô có thanh navbar rứa,tìm khoang mà chẻn thấy chi hết.

    ReplyDelete
  18. cám ơn bác, để hôm nào rảnh em chia tiếp cái tenplates 4 cột của em thành 5 cột :D.
    Quên mất, bà con có thể tìm thấy rất nhiều templates đẹp cho blog với google: "blogger templates". vd:
    http://www.bloggertemplates.org/
    Nhưng em thấy còn phải chỉnh sửa nhiều lắm :D

    ReplyDelete
  19. Bài viết này dễ hiểu quá, không học về CSS cũng có thể hiểu, cảm ơn tác giả!

    ReplyDelete
  20. Chào bác! Mình đã làm thử rồi nhưng lại hiện thông báo này, "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: Content is not allowed in prolog." Vậy cách sửa như thế nào vậy!

    ReplyDelete
  21. very good.wlcome to my blog: http://huynhphongchau.blogspot.com

    ReplyDelete
  22. Anh cho em hỏi mình muốn bỏ nút chỉnh sửa trên blogspot thế nào. Cái icon18_wrench_allbkg anh có thấy ko? Cảm ơn !

    ReplyDelete
  23. Anh ơi giúp em thêm phần này vào trong bố cục:

    http://img25.imageshack.us/img25/6827/31447538.png

    Thank you!!!

    ReplyDelete
  24. nghĩa là sao??? chẳng hiểu gì cả? Đang định tìm phim xem sao lại ra cái trang thổ tả tống tàng này ???

    ReplyDelete
  25. http://vietfunny.blogspot.com/

    Bạn ơi
    biết làm
    code hiển thị bài đăng
    giống blogger
    đó không vậy

    ReplyDelete

Cám ơn đã đọc bài viết. Bạn có thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới. Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc hơn. Xin đừng spam!