Đọc tiêu đề chắc bạn đã đoạn được phần nào của nội dung bài viết, đúng như vậy. Bài viết hôm nay chúng ta sẽ nói về Widget Blog Posts (Widget Bài đăng trên Blog), Widget quan trọng nhất của Template Blogspot.
Chúng ta sẻ không mổ xẻ một template của ai đó để minh họa cho bài viết, mà chúng ta sẽ tự tạo nên một Widget Blog Post của riêng mình cho đỡ rối như hình dưới đây .
Widget này bắt đầu bằng một thẻ mở Widget với ID là Blog1 và tất nhiên sẽ kết thúc bằng một thẻ đóng Widget rồi, rất quen thuộc phải không?
Vậy Code bên trong Widget là những code gì mà có thể kỳ diệu đến vậy?
Để có thể thỏa mãn tính tò mò thì tôi đoán có thể bạn sẽ mở các Template được chia sẻ trên mạng lên và sau đó nhìn thấy một ma trận code rồi dẫn đến chán nản... Thực ra thì do khi Upload template, hệ thống đã tự động thêm 1 lượng code khá lớn vào template của bạn, mặc dù có thể những đoạn code được thêm vào đó không có tác dụng gì đối với bạn hết mà chỉ làm bạn rối thêm...
Với một Widget mẫu như hình vẽ trên thì bên trong cặp thẻ Widget kia sẽ chỉ cần 3 cụm code chính như sau là đã tạm đủ rồi, có gì ta sẽ thêm cụm thứ 4, thứ 5...v.v... sau :
Ta sẽ đi từng phần 1 cho rõ ràng.
A. Code phần 1
Code phần 1 ở đây là code cấu tạo chi tiết bài viết của bạn như tiêu đề bài viết, thumbnail, đoạn trích nội dung bài viết, nút readmore...
Đầu tiên tôi sẽ tạo 1 thẻ DIV với class là post-item (bạn đặt gì cũng được nhưng nhớ là class nhé, không phải ID) cho rõ ràng, với sau này Style cho dễ.
Bạn nhìn hình vẽ trên đầu, post item chính là cái ô mà có viền màu đỏ, do có đến 3 ô viền đỏ nên ta không thể dùng ID được (ID phải là duy nhất) vì thế tôi sẽ dùng class.
Cụ thể bên Code trong phần 1 này sẽ như sau :
1. Tiêu đề :
Đặt trong cặp h1 vì nghe nói như thế mới tốt cho SEO (thiên hạ đồn thổi ấy mà ^^):
Bạn sẽ thắc mắc là sao Template khác nó có đếm mấy dòng code mà sao tôi lại có 1 dòng ngắn củn thể kia, đúng ra thì nó phải đủ với các lệnh điều kiện như bạn nói thì mới chuẩn nhưng đây là Template đơn giản mang tính giới thiệu cho người mới mà, phức tạp hóa làm chi? Thiếu một tí cũng không sao, miễn bạn hiểu là được :d
2. Thumbnail :
Có nhiều cách lấy thumbnail nhưng tôi sẽ chọn cách đơn giản nhất là dùng chính XML của blogspot mà không động chạm gì đến javascript @@...
Link ảnh ở đây được lấy thông qua lệnh data:post.thumbnailUrl, mặc định sẽ có kích thước là 72x72 pixels và ta phải upload thông qua trình upload của blogspot.
3. Đoạn trích dẫn bài viết:
<data:post.snippet /> Đoạn trích dẫn này ta cũng chỉ dùng XML của blogspot mà không dùng gì khác, mặc dù biết có nhiều nhược điểm khi dùng cách này mà điển hình là số lượng ký tự cho phép khá là eo hẹp (140 ký tự)... Tuy nhiên, như trên đã nói... Đơn giản thôi....4. Nút Readmore:
Thẻ
<data:post.jumptext> có tác dụng lôi các từ như: "Read more", "Xem chi tiết" v.v... do bạn đặt ở trong Admin ra. Bạn có thể vào trong Admin Panel để thay đổi, không thì đổi trực tiếp ở code như trên
Ở đây bạn thấy có những 3 bài viết, mà thậm chí có thể có nhiều hơn... 50, 100 bài viết nhưng ta chỉ cần thiết kế 1 bài chung nhất như trên, sau đó sẽ dùng vòng lặp loop để lôi lần lượt các bài ra (sẽ được nói đến ở bài sau).
Đên đây là hết Code phần 1 rồi, tổng hợp lại ta được như sau :
Bài này có vẻ đã dài rồi nên chắc Code cho 2 phần B và C còn lại tôi sẽ đăng ở bài sau cho đỡ tẩu hỏa nhập ma (có mỗi tí mà cũng phải tách thành hai bài, nhục ghê ha :-p)
Không có nhận xét nào:
Đăng nhận xét