[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 1 )

     Chào mừng mọi người đến với bài đầu tiên của [TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot.
Tại sao mình lại làm tut này mặc dù trên mạng không thiếu những hướng dẫn? Mình xin mạo muội trả lời thế này: tuy trên mạng có rất nhiều bài hướng dẫn nhưng các bài này thường rời rạc, không có bài bản, hướng dẫn qua loa, ít tùy biến khiến cho trang blog xấu xí, lại không cập nhật xu thế HTML5, CSS3 vì vậy khi mới chân ướt chân dáo bước vào thế giới blogger mình thấy rất khó học và nghĩ những trang blog này khó có thể đẹp như wordpress (mình cũng chỉ biết xơ xơ về WP). Mặc dù vậy, tản mạn trên web đọc những bài của mọi người mình cũng hiểu dần cộng thêm thời gian vọc nữa nên cuối cùng mình cũng hiểu cái cấu trúc, nguyên lý của thằng này. Vì vậy, mình không muốn mọi người cũng phải vất vả để biết làm một trang blog như ý, mình xin nhấn mạnh là "như ý", bạn có thể tạo mọi giao diện với blog chỉ với CSS, JS (cái này mình nghĩ là không thể khi bắt đầu với blogger). Thôi giới thiệu dài dòng quá thì nhiều bạn lại khó chịu, hjhj.

Blogger, blogspot là gì?

     Chắc hẳn các bạn đang đọc bài này có thể có người biết đến blogspot nhưng cũng có bạn chưa biết và trước khi làm điều gì thì phải hiểu rõ về nó đã chứ, đúng không? Và các bạn có thể đọc qua bài tổng hợp của mình tại đây.Các bạn cũng nên xem qua bài hướng dẫn sử dụng trước khi dùng tại đây.

Bạn còn cần gì nữa?

     Trước khi bắt đầu, mình xin được nhắc thêm một số yếu tố thiết yếu khác:

• Kiến thức: Hiển nhiên rồi, và ở đậy bạn chỉ cần sử dụng tương đối thành thạo HTML, CSS, biết sử dụng CSS3 thì web càng đẹp, một chút Js vì những Js cần dùng có sẵn trên mạng rồi, bạn chỉ cần chỉnh sửa chút sao cho vừa ý thôi, một chút kiến thức về Ps sẽ giúp ích rất nhiều cho bạn.
• Một giao diện web như ý: Ý mình là một phác thảo nhỏ trên giấy về giao diện web bao gồm: head, main-post, sidebar, footer. Cụ thể: head bao gồm logo, navbar; main-post là phần hiển thị bài đăng và một số thứ khác như: share box, tác giả, bài viết liên quan ...;sidebar gồm những widget như: google search, bài viết phổ biến, bài viết ngẫu nhiên, sub mail,...; footer gồm thông tin bản quyền, địa chỉ liên hệ, navbar,...Các bạn có bản demo cho web thì càng hay, khi đó chỉ cần chuyển code html thông thường sang xml của blogspot là ok, sẽ nhẹ nhàng hơn, nhưng ở đây mình không hướng dẫn cái đó tuy nhiên đọc xong tut này thì hòa toàn bạn có thể làm đc. Ngoài ra, bạn còn có thể tìm hiểu thêm về cách phối màu, bố trí sao cho đẹp mắt và có thể sử dụng thêm các font-chữ khác rất đẹp, điều này sẽ mang lại những bất ngờ mà bạn chưa từng nghĩ tới.
  Các bạn nên tham khảo các trang web đẹp trên mạng hoặc có thể xem trên: http://www.cssdesignawards.com/, http://www.csslight.com/ hoặc https://www.awwwards.com/
• Một bộ icon đầy đủ là rất có ích.
• Sử dụng Picasa:điều này rất quan trọng vì hình ảnh mà bạn tải lên được lưu trữ ở đây.
  Cái này search trên google có rất nhiều, hoặc tại đây mình chỉ hướng dẫn các bạn cách thay đổi kích thước ảnh đại diện cho bài viết (thumbnail) tại đây
• Công cụ: Mình nghĩ chỉ cần trình duyệt chorme hay firefox là đủ, hay sử dụng thêm sublime text để hỗ trợ viết code, bạn có thể tải về tại đây.

Um... tạm thời mình chỉ nghĩ tới đó thôi.

Cấu trúc file XML của blogspot?

     Cái này khá là quan trọng, nhưng mình chỉ nói qua thôi vì khi nào thực hành ở những bài sau các bạn sẽ tự ngẫm ra thôi, không khó lắm đâu.

     Trước tiên là cặp thẻ <b:skin>...</b:skin> các bạn gõ code CSS vào đó. Tiếp theo là cặp <b:section>...</b:section> là nơi để chứa các widget của blog chúng ta, khi bạn vào phần bố cục, tất cả những vị trí của mọi thành phần đều nằm trong section này. Cặp <b:widget>...</b:widget>  là những tiện ích bạn thêm vào bố cục của trang web như: HTML/JavaScript, Popular Post, LinkList,...Cặp <b:includable>...</b:includable> là những thẻ mình tạo ra để lưu trữ những "nội dung" của chúng ta, mà khi ta muốn thì cần chỉ gọi nó ra để muốn sử dụng. (Đối với những bạn học CNTT thì nói đơn giản nó là "hàm"). Ngoài ra còn cặp điều kiện <b:if>...</b:if> và vòng lặp <b:loop>...</b:loop>.

Các bạn đón đọc bài viết tiếp theo tại: