Banner

Hướng dẫn thiết kế blogspot căn bản - Bắt đầu thiết kế với template trắng

Chia sẻ source xml template trắng của Blogger đã được dựng sẵn khung và thêm sẵn một số thứ quan trọng để học thiết kế blogspot căn bản.


Cách đơn giản nhất để thiết kế blogspot là hãy bắt đầu từ một source xml trống đã được dựng sẵn bộ khung với những mã được yêu cầu bắt buộc. Với mã nguồn template mà mình tạo mới kết hợp với những bài đăng trên Blog của mình sẽ giúp bạn dễ dàng học thiết kết blogspot hơn bao giờ hết, chỉ là bạn có chịu khó tìm tòi học hỏi hay không thôi.

blogger template v3

Source xml mình dựng đã chặn tải hoàn toàn font, css, js mặc định của Blogger. Trong đó mình đã tích hợp bộ meta đầy đủ, link fonts, các plugin jquery, lazysizes và fancybox ngoài ra với css mình cũng đã tạo sẵn một số icon svg, modal popup và một số class để dàn flex box.

Thông tin template:

  • Name: Emporio
  • Layout: version 3
  • Widget: version 2
  • Demo Page: bloggerwidgetv2.blogspot.com

Hướng dẫn thiết kế Bài đăng trên Blog với template trắng

Yêu cầu: Blog đã xuất bản bài đăng. Trong tiện ích Blog1 các bạn tìm và mở các thẻ sau đây để đặt code trong các thẻ này

Với bài đăng hiển thị tại nhóm trang chỉ mục MultipleItems: Trang chủ, trang các bài đăng cũ hơn, trang tìm kiếm kết quả, trang label và trang lưu trữ

<b:includable id='postBodySnippet' var='post'>

Với bài đăng hiển thị tại nhóm trang SingleItem: post, page có 3 thẻ chính:

<b:includable id='postHeader' var='post'>
<b:includable id='postBody' var='post'>
<b:includable id='postFooter' var='post'>

Bài viết tới mình sẽ hướng dẫn các bạn thiết kế chi tiết phần này. Các bài viết tham khảo học thiết kế

  1. Danh sách tổng hợp các loại thẻ data mặc định trong blogspot
  2. Điều kiện và các tùy chọn hiển thị Label bài viết trong vòng lặp
  3. Một số thẻ điều kiện thông dụng trong blogspot và cách sử dụng
  4. Các thẻ dữ liệu hiển thị văn bản trong template layout version 3

Mình không chia sẻ link tải template mà chỉ gửi qua email cụ thể là gmail, bạn nào cần template để học thiết kế thì liên hệ bằng cách đăng nhận xét với email bên dưới để mình gửi qua mail.


Liên hệ Zalo