Hiển thị các bài đăng có nhãn Blog Templates. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blog Templates. Hiển thị tất cả bài đăng

Mẫu (template) cho Blogspot dạng tạp chí đơn giản

Như hôm trước viết một cái post về đổi giao diện cho blog kiểu đơn giản và sạch sẽ (clean, clear and simple).

Giờ đã hoàn thành ngon lành, để dùng một mình thì phí nên share ra đây để ai cần dùng thì cứ lấy về mà dùng.

Mẫu này có mấy tính năng sau:
  • Hiển thị dạng tạp chí: hiển thị dạng slider (chỉ ở trang chủ - nhớ chỉnh cấu hình và nhập 1 dòng vào nội dung HTML ở phần bố cục, đó là cái nhãn sẽ tìm kiếm các bài nổi bật), chữ to, ảnh to, dãn cách lớn
  • Hiển thị danh sách nội dung có hình ảnh lớn và chữ to
  • Chia sẻ nội dung với một số mạng xã hội (Facebook, Twitter, Google+, Linked In, Pinterest)
  • Hộp tìm kiếm
  • Danh sách bài cùng chủ đề (cùng nhãn)
  • Danh sách bài khác (bài mới nhất)
  • Danh sách bài đọc nhiều nhất
  • Danh sách nhãn/phân loại (labels/tags/categories)
  • Đặt sẵn icon để sửa bài (khi xem chi tiết - nhớ chỉnh cấu hình để cho hiển thị cái edit icon này)
  • Phân trang danh sách nội dung, mặc định 10 bài/trang (nhớ chỉnh cấu hình để cho hiển thị 10 bài trên trang chính)
  • Hiển thị hệ thống bình luận của Facebook phía trước danh sách bình luận của Blogspot  😂😂😂 Thế nên muốn quản được còm thì cần đăng ký một cái app ở Facebook, đặt rõ ID của app và của account ở phần meta tags, còn nếu không muốn dùng hệ thống còm của Facebook thì tìm trong mẫu dòng sau và xoá đi là xong (<div class="comments fb-comments" data-colorscheme="light" data-numposts="7" data-width="100%"/>)
Đặc điểm công nghệ:
  • Dạng responsive, chạy tốt trên tất cả các thiết bị từ mobile tới máy tính (sử dụng Bootstrap 3)
  • Tự điều chỉnh menu thành 2 cấp (chỉ định các mục menu cấp 2 bằng cách đặt dấu gạch chân [ _ ] - underscore) ở vị chí đầu tiên
  • Khi xử lý các nhãn, thì nhãn có nội dung "Nổi bật" sẽ được bỏ qua (vì đây là nhãn dùng cho hiển thị bài nổi bật dạng slide ở trang chủ)
  • Sử dụng font Roboto của Google Fonts để đem lại cách hiển thị tốt nhất khi đọc nhanh
  • Các icon đều sử dụng Font Awesome 4, độ phân giải cao mà dung lượng lại bé 😋
  • Cuối cùng (và cũng là hay ho nhất) 😍😍😍: tất cả các ảnh (nội dung, nền, link, ...) đang hosted ở địa chỉ "bp.blogspot.com" sẽ được "chuyển" sang sử dụng "lh.googleusercontent.com" để tránh bị chặn bởi ISP Việt Nam (vì ISP Vietnam "nhận lệnh lạ" để chặn DNS của tất cả các site .blogspot.com hoặc .wordpress.com)
Download XML tempate ở đây:
  • Minified: đã nén toàn bộ CSS và Javascript để trang chủ còn khoảng 20KB (tải nhanh nhất đối với mobile)
  • Original: không nén CSS và Javascript, để vọc hoặc muốn xem tui làm gì (kích thước các trang web sẽ tăng lên khoảng 2-3 lần)
Hướng dẫn upload và cập nhật vào Blogger.com thì có, dưng viết sẽ dài quá nên đọc tạm hướng dẫn của các bạn Sora Templates tý nhé.