Chủ Nhật, 26 tháng 5, 2019

Các Thành phần Cơ bản của một Blogger Template

các thành phần cơ bản của một template


Các Thành phần Cơ bản của một Blogger Template gồm có các phần như hình trên, được tạo thành bởi bộ code HTML cơ bản nhất của một template blogger, để tạo khung dành cho các nhà phát triển (developer) triển khai ý tưởng cũng như thêm code, HTML, JavaScript và CSS vào.



Xem thêm:

Cấu trúc của một blogger template có dạng như sau:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
      xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>
    <head>
        <title><data:blog.pageTitle/></title>
        <b:skin>
            <![CDATA[
            <!-- Nội dung SKIN - LAYOUT -->
            ]]>
        </b:skin>
    </head>
    <body>
        <!-- Nội dung BODY -->
    </body>
</html>


Đoạn mã trên không chứa bất cứ phần Layout nào nên sẽ không hiển thị đoạn code nào, mình chỉ lấy đây là ví dụ nhất của thành phần một Blogger template, để bạn có thể hình dung. Bạn có thể tham khảo bài này để tạo một blank blogger template.


Như bạn thấy, thành phần cơ bản nhất gồm:


  • Hai dòng khai báo trên cùng.
  • Đoạn HTML khai báo các chuẩn data, các định nghĩa và thư viện sử dụng.
  • Phần head và body hoàn toàn nằm trong html
  • Trong head là các CSS định nghĩa layout của các widget, các thành phần cơ bản của blog như viền bao, nút bấm, các đường viền, kẻ chỉ,... nói chung tất tật về đồ họa giao diện
  • Trong body sẽ là nội dung của trang home, label, bài posts,...


Từ bộ khung cơ bản này, tất cả các template tuyệt vời đã được xây dựng nhờ thêm thắt code vào - và bạn cũng có thể tự tạo cho mình một template tuyệt vời đầy cá tính. Có đôi điều cần lưu ý sau:



  • Hiện nay Google rất coi trọng và đánh giá cao tính năng Responsive cho blog, đặc biệt dùng điểm hỗ trợ mobile để chấm điểm, ranking, vậy nên bạn phải quan tâm đến mobile trước nếu muốn tranh bá top đầu
  • Thuật ngữ Above the foldUnder the fold trong blog/website chỉ những gì trên và dưới khung màn hình. Để tối ưu cho blog khi được duyệt, cần lập trình để phần Above the fold hiển thị trước còn Under the fold sẽ được load sau (ví dụ như lazy image, tức ảnh chỉ được load khi nó được cuộn đến, tức hiện ra trong Above the fold, còn chưa cuộn màn hình đến phần ảnh thì không cần load ảnh làm gì) Một trang để test rất hay là Page Speed Insight của Google.
  • Các đoạn code bạn tìm kiếm từ các mẹo vặt trên mạng thường được tác giả khuyên dán trên phần head, vì tác giả đó không biết template của bạn như thế nào nên cứ dán trên head cho chắc ăn. Nhưng thực ra điều này khiến blog của bạn nặng nề vì mở bất cứ trang nào cũng phải load code đó. Vậy nếu code chỉ dành cho trang nào đó, như trang Sitemap chẳng hạn, thì bạn chỉ dán ở cuối phần body. Việc này giúp điểm số của blog tăng lên đáng kể.


Related Posts