20 Mẹo và Thủ Thuật cho Thiết Kế và Phát Triển Blogger Template

Xin chào các bạn, trong bài viết này mình sẽ chia sẻ cho các bạn 20 Mẹo và Thủ Thuật cho mọi người Thiết Kế và Phát Triển Blogger Template mà mình biết kể từ khi làm Blogspot cho các bạn để giúp các bạn có thêm kiến thức về Thiết Kế và Phát Triển giao diện hay template Blogger. Có những mẹo có thể rất ít người biết hoặc không để ý nhưng nó giúp ích rất nhiều cho các bạn.

Hãy cùng bắt đầu tìm hiểu về 20 Mẹo và Thủ Thuật mà mình nói để có thể giúp ích cho các bạn nhé!

Đảo ngược 1 vòng lặp

Các bạn có thể đạo ngược thứ tự 1 vòng lặp bằng cách thêm reverse='true' vào trong thẻ loop như sau:

<b:loop reverse='true' values='data:array' var='object'>
...
</b:loop>

Vô hiệu hoá hiển thị HTML Comment

Các bạn có thể tắt hay vô hiệu hoá hiển thị các comment HTML. Các comment sẽ chỉ hiển thị trong giao diện chỉnh sửa XML của Blogger nhưng không hiển thị trong HTML ở trang web khi bạn xem code. Để làm như vậy, các bạn cần thêm render='false' vào những thẻ comment như sau:

<b:comment render='false'>
        Your comment
</b:comment>

Tạo 1 Object tuỳ chỉnh và lấy giá trị của nó

Các bạn có thể tạo 1 Object tùy chỉnh và lấy các giá trị của nó như sau:

<b:with value='{item1: "Value", item2: "value"}' var='object'> <data:object.item1/> <data:object.item2/> </b:with>

Ẩn 1 widget hay tiện ích đang hoạt động.

Các bạn có thể ẩn bất kỳ tiện ích nào trên website của mình bằng cách thêm cond='false' như sau:

<b:widget cond='false' id='HTML1' type='HTML'>
...
</b:widget>

Tính toán các biểu thức toán học

Các bạn cũng có thể thực hiện các phép tính giá trị trong toán học và hiển thị ra kết quả của chúng như sau:

<b:eval expr='(10 + 3 ) * 2' />

Hiển thị Tiện Ích trên 1 Trang Cụ Thể:

Các bạn có thể ẩn hoặc hiển thị các tiện ích blogger cụ thể nào đó trên các trang blogger cụ thể. Ví dụ như:

<b:widget cond='data:view.isHomepage' id='HTML1' type='HTML'>
...
</b:widget>

isHomepage có nghĩa là tiện ích sẽ chỉ hiển thị tại trang chủ, các bạn có thể đọc thêm, Tìm hiểu về thẻ điều kiện và tổng hợp các thẻ điều kiện blogger/blogspot mới nhất.

Giới hạn độ dài của 1 chuỗi kí tự

Các bạn có thể giới hạn độ dài của chuỗi ký tự bất kỳ nào, đặc biệt khi các bạn tóm tắt 1 văn bản dài. Bạn có thể tạo các đoạn trích ngắn bằng cách giới hạn số ký tự như sau:

<b:eval expr='data:post.body snippet { length: 250 }'/>

Trong trường hợp này, chúng ta giới hạn 250 tự từ nội dung bài đăng.

Xem độ dài của 1 chuỗi ký tự

Chúng ta có thể tính toán độ dài của chuỗi ký tự trong blogger như sau:

<b:eval expr='data:view.title.length' />

Làm tròn kết quả của phép chia

Chúng ta có thể sử dụng một thủ thuật đơn giản như sau để làm trong một phép chia trong blogger.

<b:eval expr='(13 - (13 % 3)) / 3'/>

Hiển thị 1 giá trị của data trong HTML Comment

Có vẻ đơn giản nhưng các bạn có thể sử dụng bất kỳ thẻ XML nào của blogger bên trong thẻ nhận xét.

<b:comment render='true'>
    <data:view.title/>
</b:comment>

Giới hạn số vòng lặp trong thẻ loop

Các bạn có thể giới hạn số lần lặp trong một vòng lặp loop. Nói cách đơn giản, các bạn có thể giới hạn số lượng kết quả của một vòng lặp.

<b:loop values='data:array limit 4' var='object'>
...
</b:loop>

Đảo ngược giá trị của Boolean

Các bạn có thể đảo ngược giá trị của boolean trong trường hợp bạn muốn.

<b:eval expr='not true' />

Thay đổi định dạng hiển thị của ngày

Các bạn có thể sửa đổi hoặc thay đổi định dạng của ngày bằng thủ thuật sau:

<b:eval expr='format (data:post.date, "dd/MM/YYYY")' />

Thay đổi kích thước hoặc cắt hình ảnh

Các bạn có thể thay đổi kích thước hoặc cắt hình ảnh mặc định của blogger theo kích thước yêu cầu của các bạn như sau:

<img expr:src='resizeImage(data:view.featuredImage, 600, "16:9")' />

Thêm tham số vào đường dẫn URL

Các bạn có thể thêm tham số tùy chỉnh vào bất kỳ liên kết hoặc URL nào như sau:/p>

<a expr:href='data:view.url params { hl: "en" }'>
    LINK 
</a>

Hiển thị hoặc Ẩn Phần tử HTML theo điều kiện

Các bạn có thể hiển thị hoặc ẩn phần tử HTML dựa trên các điều kiện.

<b: tag cond='data:view.ispost' name='div'> </b: tag>

Tạo một thẻ động

Thẻ động ở đây có nghĩa là thẻ tag đó sẽ thay đổi khi hiển thị tại các trang điều kiện khác nhau. Các bạn có thể tự quyết định có thêm thẻ HTML đó hay không.

<b:tag expr:name='data:view.isSingleItem ? "h1" : "h2"> </b:tag>

Xác định giá trị mặc định nếu dữ liệu không tồn tại

Các bạn có thể xác định giá trị mặc định của riêng mình nếu không có dữ liệu trong một object.

<b:eval expr='data:foo ?: "default value" />

Lấy thuộc tính đầu tiên từ một Mảng mà không cần sử dụng Vòng lặp

Nếu các bạn chỉ muốn lấy thuộc tính hay phần tử đầu tiên của một mảng thì bạn không cần sử dụng vòng lặp.

<b:with value='data:posts first' var='post'>
    <data:post.title/>
    <data:post.body />
</b:with>

Tắt hay xoá bỏ CSS và JS mặc định của Blogger

Nếu CSS hay JavaScript mặc định của Blogger làm cho website của bạn load chậm hay là nó gây ra sung đột khi bạn thiết kế template thì các bạn có thể xoá đi bằng các sử dụng các thuộc tính b:css cho CSS và b:js cho JavaScript như sau:

<html b:css='false' b:js='false'>
...
</html>

Lời kết

Đó là tất cả, mình nghĩ những mẹp và thủ thuật này sẽ giúp các bạn cỏ thể tạo một template blogger chuyên nghiệp và hiệu quả hơn. Nếu có thằng mắc gì các bạn đừng ngại comment xuống phía dưới mình sẽ giải đáp nhanh nhất nếu có thể.

{fullwidth}