Tạo Tab Nội Dung đơn giản với HTML, CSS, jQuery

Lời đầu tiên thì xin độc giả thứ lỗi vì đã quá lâu rồi không đăng bài mới, để blog trống không lâu quá chắc nhiều người cũng quên mất mình luôn rồi. Đối với những độc giả thường xuyên của blog mình, về tương lai mình sẽ có gắng sắp xếp thời gian tiếp tục với các bài viết hướng dẫn mọi người về Blogger, lập trình, marketing, adsense,... cũng như giải đáp thắc mắc nhiều hơn cho mọi người nhé.


Chủ đề chính là gần đây có bạn hỏi mình về cách phân trang bài viết cho Blogspot. Thế tiện thể đây mình làm một bài hướng dẫn về vấn đề này. Thực chất thì thủ thuật này có tên gọi là Tab Nội Dung (Tabbed Content) rất nhiều trên mạng, đủ cách làm Javascript, jQuery ngay cả CSS3 không cũng làm được nữa. Và không chỉ dành riêng cho Blogspot mà bất cứ mã nguồn nào hỗ trợ những ngôn ngữ làm web cơ bản.

Bài viết này chúng ta sẽ cùng nhau làm các Tab mà trong mỗi Tab là những phần nội dung của chúng ta. Việc phân chia nội dung theo Tab có nghĩa là sao, toàn bộ phần nội dung sẽ không được hiển thị mà sẽ được chia ra từng phần nhỏ nằm trong từng Tab. Khi người dùng chọn vào một Tab bất kì thì website sẽ hiển thị lên nội dung tương ứng. Chúng ta bắt đầu vào làm nó nhé, lần này mình sẽ hướng dẫn bằng jQuery, bạn nào thích mình hướng dẫn bên CSS3 thì có thể cho mình biết nhé.

DEMO

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
  • Tab 5

  • Nội dung cho tab 1


  • Nội dung cho tab 2


  • Nội dung cho tab 3


  • Nội dung cho tab 4


  • Nội dung cho tab 5


Cấu trúc HTML

Đối với cấu trúc cho việc làm Tab Nội dung thì khá đơn giản.
<ul id="tabs">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
    <li>Tab 5</li>
</ul>
<ul id="tab">
    <li class="active">
        <h2>Nội dung cho tab 1</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 2</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 3</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 4</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 5</h2>
    </li>
</ul>

Cấu trúc HTML bao gồm chỉ thẻ ul và li. Nhìn sơ qua thì mình chắc mọi người cũng có thể đoán được là thẻ ulclasstabs dùng để chứa các thẻ li là các Tab mà người dùng sẽ nhắp chọn. Còn thẻ ulclass là tab chứa nội dung tương ứng với các tab đó.


Phần CSS

ul#tabs {
    list-style-type: none;
    padding: 0;
    text-align: center;
}
ul#tabs li {
    display: inline-block;
    background-color: #32c896;
    border-bottom: solid 5px #238b68;
    padding: 5px 20px;
    margin-bottom: 4px;
    color: #fff;
    cursor: pointer;
}
ul#tabs li:hover {
    background-color: #238b68;
}
ul#tabs li.active {
    background-color: #238b68;
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}
Đoạn css trên thì có một số điểm nổi bật như này thôi, một là các thẻ li chứa các tab sử dụng CSS property là display: inline-block giúp cho toàn bộ các tab đứng trên cùng 1 hàng. Thứ 2 là toàn bộ các thẻ li chứa nội dung đều sẽ bị ẩn (display: none), và những thẻ li nào có class là active sẽ được hiển thị (display: block).

Tính năng với jQuery 

Đây chắc là đoạn code quan trọng nhất giúp toàn bộ mọi thứ hoạt động, nó khá đơn giản thôi cùng xem nhé.
$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});
Đầu tiên chúng ta sẽ lắng nghe mọi hoạt động của toàn bộ các phần tử trên web, khi mà người dùng nhắp chọn vào thẻ li bất kì trong cặp thẻ ulclasstabs, nếu thẻ nhắp chọn vào đang được mở rồi (có class là active) thì thôi, ngược lại nếu nó không phải thì thêm class là active vào thẻ đó, và tiếp tục tìm đến thẻ li hiện tại đang có classactive và xóa nó đi.

Thế làm sao mà nó biết được nội dung nào tương ứng để thêm class active để hiển thị phần nội dung đó lên? Nó là như thế này, mặc định đầu tiên chúng ta đã dùng jQuery chọn vào tất cả những thẻ li của thẻ ul có class là tabs, trong đoạn mã trên bạn có thể thể thấy var tabNum = $(this).index(), hàm index() là hàm cho chúng ta biết được đó là thẻ li thứ mấy nằm trong thẻ ul mà chúng ta đang chọn, và trong lập trình đương nhiên là số bắt đầu là số 0 chứ không phải số 1, nên chúng ta tạo tiếp 1 biết khác nthChild = tabNum+1 để biết chính xác nó đang nằm ở vị trí nào để chọn vào phần li chứa nội dung tương ứng.

Chúng ta tiếp tục dùng jQuery kết hợp CSS3 để chọn vào đúng thẻ li với thứ tự tương ứng chứa nội dung, và chèn vào class active.

Sử dụng trong bài viết Blogger như thế nào

Mục này mình hướng dẫn cho những bàn nào ko rành chỉ muốn xài thôi cho Blogger, Blogspot nhé. Đầu tiên bạn phải chắc rằng trong template của mình có sử dụng jQuery. Tiếp tục là lúc soạn thảo bài viết các bạn chuyển qua soạn thảo ở chế độ HTML.

Các bạn cho toàn bộ css vào cặp thẻ
<style type="text/css">Phần CSS ở trên vào đây</style>
và toàn bộ jQuery vào cặp thẻ
<script type="text/javscript>Toàn bộ nội dung jQuery</script>.
Sửa phần HTML tương ứng với nội dung và tiêu đề các thẻ của bạn là được.

Lời kết
Việc phân chia nội dung theo tab này thì bạn có thể áp dụng để làm nhiều cái như, template cho Blogspot cũng như các mã nguồn khác, hoặc muốn phân chia phần nội dung của mình để người đọc tiếp cận một cách tốt hơn. Nếu bạn thích bài viết có thể +1, like hoặc comment, hoặc bạn nào không thích hoặc có thắc mắc có thể để lại comment ở dưới cho mình biết lý do hoặc thắc mắc nhé.

P/S: Nếu các bạn muốn mình viết về chủ đề gì tiếp theo có thể tiếp tục liên hệ với mình qua biểu mẫu liên hệ trên website hoặc giửi mail trực tiếp cho mình qua [email protected]. Mình không trả lời inbox facebook nhé nên mọi người đừng nhắn bên đấy nữa T_T

Bài đăng nổi bật tiện ích mới trên Blogger / Blogspot

Nếu bạn là một blogger thì chắc chắn bạn sẽ biết tầm quan trọng của việc viết blog thường xuyên để khuyến khích người đọc quay trở lại website của mình. Nhưng có một vấn đề là, bạn viết cần nhiều, đăng càng nhanh thì những bài viết trước đó nhanh chóng trượt xuống hoặc hơn nữa là lọt qua trang tiếp theo. Điều này làm cho nó khó khăn hơn cho độc giả của bạn để xem tất cả mọi thứ bạn đã đăng mà họ đang rất có thể quan tâm.

Để giúp dễ dàng hơn cho mọi người để giới thiệu những bài viết mà bạn muốn độc giả xem, Blogspot đã tạo một tiện ích mới có tên là Bài đăng nổi bật. Tiện ích này đơn giản hóa cho bạn để chọn một bài viết bất kì trên blog của mình với giao diện theo đánh giá cá nhân của mình là khá tốt.

Bài đăng nổi bật tiện ích mới của Blogger / Blogspot

Nếu bạn muốn thử nghiệm ngay, chỉ cần đầu vào tab Bố cục, Thêm tiện ích, chọn 'Bài đăng nổi bật'. Bạn sẽ có thể đặt các tiện ích bất cứ nơi nào bạn muốn trên blog của bạn sau đó chọn bài viết mà bạn muốn hiển thị. Nếu bạn muốn làm nổi bật một cái gì đó mới, bạn có thể thay đổi bài viết mà bạn trang bị bất cứ lúc nào.


Các bạn thấy thế nào về tiện ích này? Mình chắn chắn sẽ sử dụng nhiều trong thời gian sắp tới. Còn bạn ý kiến của bạn thế nào về tiện ích này, hãy chia sẻ với mọi người nhé.

KslDualView - Blogger / Blogspot Template

KslDualView là một trong những template mà mình có thời gian convert gần đây. Nếu bạn đang thắc mắc nó được convert từ đầu thì nó có tên gốc là Draggable Dual-View Slideshow được chia sẻ ở Codrops một trang rất nổi tiếng chuyên chia sẻ về thiết kế và phát triển Website. Do cũng bận quá nên mình cũng chỉ mới hoàn thành giao diện chứ gần như là chưa thêm gì đặc biệt như, nút like share, bài viết liên quan,... Để lâu quá thì cũng uổng nên chia sẻ ở đây cho các bạn có thể phát triển tiếp để sử dụng cho mình.



Đây là một template theo phong cách kéo thả, xài cực kì thích cho những màn hình cảm ứng, bạn cũng có thể xài bàn phím và nút nhỏ ở góc phải trên để xem được toàn bộ bài viết trên một trang. Không có gì nhiều để nói, nếu bạn nào cần hỗ trợ về template và ý kiến đóng góp gì thì đừng ngại để lại bình luận ở dưới nhé.

HTTPS chính thức hỗ trợ Blogger / Blogspot

Vào ngày 30 tháng 9 vừa qua thì Blogspot đã thông báo chính thức hỗ trợ HTTPS cho nền tảng này. Nhưng tiếc một cái là hiện tại nó không hỗ trợ đối với những blog sử dụng tiên miền tùy chỉnh.

HTTPS chính thức hỗ trợ Blogger / Blogspot

Lợi ích của sử dụng HTTPS với  Blogger / Blogspot

 HTTPS là một giao thức giúp bảo mật cho người dùng sử dụng những website có hỗ trợ nó: nó giúp ngăn chặn những người xấu theo dõi hoặc đánh cắp thông tin của chủ blog cũng như khách truy cập, nó cũng giúp kiểm tra xem bạn đã vào một website thực sự án toàn chưa và đảm bảo rằng bạn không bị chuyển hướng đến những website độc hại.

Hướng dẫn thêm HTTPS vào Blogger / Blogspot

Như đã đề cập thì nó đã hỗ trợ từ ngày 30/09/2015 rồi, nên đơn giản bạn chỉ cần đăng nhập vào https://www.blogger.com, chọn blog mà bạn muốn kích hoạt  HTTPS, chuyển đến mục Cài đặt, và chuyển từ "Không" sang "Có" tại phần Cài đặt HTTPS. Và cũng như đề cập thì nó chưa có hỗ trợ cho những blog đang xài domain nhé.

Bật HTTPS cho Blogger / Blogspot

Sau hi bật xong blog sẽ tự động chuyển giao thức từ HTTP thành HTTPS. Lưu ý là nếu bạn kích hoạt tính năng này thì có thể một số Blogger Template sẽ rất có khả năng bị mất một vài tính năng được nhúng bên ngoài như Javascript, jQuery,.. vì không thể hoạt động được với HTTPS. Để sử nó làm sao thì bạn phải tự chỉnh sửa lại hoặc đợi tác giả template cập nhật lại cho phù hợp.

Chúc bạn thành công! Đừng quên để lại ý kiến của bạn tại đây để chúng ta cùng thảo luận nhé.

5 yếu tố xếp hạng Google cần lưu ý nhất hiện nay

Ngày nay Google dùng các thuật toán để xác định hàng trăm các yếu tố khác nhau nhằm mục đích xếp hạng website của chúng ta trên công cụ tìm kiếm của họ. Đối với các SEOer thì việc tìm hiểu các yếu tố xếp hạng là vấn đề nên làm thường xuyên. Và hiện tại bài viết này mình sẽ chia sẻ với các bạn 5 yếu tố xếp hạng Google mà mình cảm thấy cần lưu ý nhất trong thời gian hiện tại.

5 yếu tố xếp hạng Google cần lưu ý nhất hiện nay

1. Link Building không còn quan trọng như trước nữa

Link building trước giờ vẫn là một vấn đề nan giải nhất đối với các SEOer. Hiện tại thì theo cảm nhận thì nó không còn quá ảnh hưởng đến thứ hạng từ khóa như trước đây nữa, đặc biệt là đối với những bạn nào đi rải backlink, mua backlink khắp nơi mà chã chịu đầu tư vào chất lượng nội dung bài viết của mình.

Nếu các bạn có biết qua ông John Mueller, một nhân viên của Google có đề cập là, mục tiêu chính của chúng ta bây giờ nên là tạo ra những nội dung thật tốt và có giá trị cho người đọc để chia sẻ thay vì đi xây dựng liên kết (Link Building) vì hiện tại xây dựng liên kết nhiều khi có hại hơn là có lợi.

Ở đây không phải là chúng ta sẽ dừng nó, Link Building vẫn rất cần thiết cho việc làm SEO. Nhưng trước tiên bạn nên đầu tư vào chất lượng nội dung ở trang đích, và đi link một cách cực kì cẩn thận. Xu hướng hiện tại, mọi người đang dần chuyển từ Link Building sang hoàn toàn là Link Earning. Link Earning ở đây là gì, bạn đầu tư viết một nội dung có giá trị cho người đọc, tiếp đến đăng nội dung này ở những website uy tín khác. Nội dung này sẽ có backlink trỏ về trang đích của chúng ta và nó cung cấp giá trị cho người đọc khi click vào backlink đó.

Tại Việt Nam mình đăng cái bài viết đó ở đâu bây giờ? Bạn có thể mua đăng bài viết lên các trang báo, hoặc đơn giản hơn là tìm những Blogger có nội dung liên quan để liên hệ đăng bài viết lên trang của họ.

2. Hãy tận dụng mạng xã hội

Vấn đề này cũng nhiều người có đề cập về mạng xã hội và SEO có ảnh hưởng đến không. Năm 2014 Matt Cutts có nói rõ là mạng xã hội hoàn toàn không trực tiếp ảnh hưởng đến thứ hạng từ khóa. Mặc dù không có tác động trực tiếp, nhưng chắc chắn một điều là nó vẫn có ảnh hưởng gián tiếp đến với thứ hạng trên công cụ tìm kiếm.

Hiện tại mạng xã hội là một trong những nơi xây dựng thương hiệu tốt nhất. Bạn có thể mang những nội dung chia sẻ lên đó, một khi người đọc tiếp cận, nếu nội dung đó mang lại giá trị cho họ, rất nhiều khả năng họ sẽ xem nhiều trang khác trên website, chia sẻ nội dung đó lên mạng xã hội và cả nhớ tìm kiếm tên thương hiệu của bạn trên Google.

Ngoài ra bản chất của mạng xã hội bây giờ gần như tương đồng với công cụ tìm kiếm, mọi người tìm kiếm thứ mà mình yếu thích và quan tâm trực tiếp đó. Nếu bạn tận dụng tốt thì nó sẽ mạng lại cho bạn nguồn traffic tự nhiên, và đảm bảo cũng gián tiếp tăng thứ hạng website của bạn trên Google.

 

3. Trải nghiệm người dùng nhân tố chính quyết định thứ hạng trên Google

Google luôn muốn mang đến trải nghiệm tốt nhất cho những người sử dụng công cụ tìm kiếm cho họ. Đương nhiên họ không chỉ tự cải thiện trên các dịch vụ của họ, mà họ cũng muốn những website mà họ đề xuất người dùng đi vào cũng phải là những website có trải nghiệm tốt nhất.

Thế Google dựa vào những gì vào để xếp hạng website của bạn?

Chúng ta bắt đầu với cái đầu tiên đó là tỉ lệ CTR (click-through rate), đây là tỉ lệ mà người ta click vào kết quả tìm kiếm để vào website của bạn. Ngay từ bắt đầu ở những kết quả tìm kiếm củ thể là tiêu đề, mô tả, url mang đến của người dùng cảm giác đây là nội dung mà mình tìm kiếm. Bạn đã ăn điểm trực tiếp từ Google và người đọc. Ở đây mình xác nhận là cái này có ảnh hưởng khá lớn đến với thứ hạng trên Google.

Tỉ lệ Bounce Rate thấp là yếu tố thứ 2 mình sẽ đề cập đến. Bounce Rate là gì và nó nằm ở đâu? Bạn có thể tìm thấy nó ở trong dịch vụ Google Analytics, bounce rate là tỉ lệ mà người dùng chỉ xem một trang duy nhất trên website của bạn mà không hề xem bất cứ một trang nào khác. Ngoài Bounce Rate ra thì còn có thêm thời gian trung bình xem trang của người dùng cũng góp một phần không hề nhỏ để Google đánh giá trải nghiệm người dùng trên website đó.

Chính vì thế bạn nên cố gắng giảm Bounce Rate và tăng thời gian trên trang của người dùng, đương nhiên không phải nói bạn là dùng tool hoặc trao đổi với người khác. Cái chính bạn có thể làm là viết ra nội dung thật tốt, độ dài bài viết dài là tốt nhưng tùy thuộc vào khả năng mà bạn có thể viết tốt nội dung đó, và cố gắng cải thiện giao diện, đi liên kết nội cho mỗi bài viết của mình.

Ngoài ra cũng có một việc không thể thiếu nữa là tăng tốc độ tải trang cho website của bạn.

4. Chú ý tối ưu website trở nên thân thiện với di động (Mobile Friendy)

Vào ngày 21/08/2015 thì Google đã cho ra mắt thêm thêm thuật toán mobile-friendly ảnh hưởng đến xếp hạng tìm kiếm trên các thiết bị di động. Ngày nay đây là một xu thế bắt buộc bạn phải nắm bắt, mọi người hiện tại tỉ lệ dùng các thiết bị di động là rất cao. Và Google mang đến thuật toán này nhắm giúp mọi người có thể vào những website tối ưu trải nghiệm người dùng cho các thiết bị di động.

Để website trở nên thân thiện với di động, đương nhiên yếu tố đầu tiên là website bạn cần phải Responsive hoặc có một phiên bản dành riêng cho di động. Bạn có thể làm và kiểm tra tính thân thiện với di động của website mình.

5. Local SEO đang dần phát triển

Trước giờ thi Local SEO đã nắm có mình một ví trị khá quan trọng rồi. Với thuật toán Pigeon được đưa vào sử dụng vào năm 2014 thì Google Web Search & Google Maps xếp hạng các kết quả tìm kiếm dựa trên vị trí của mỗi người dùng.

Bởi vậy một trong những sai làm của SEOer hiện tại là đang bỏ quên về Local SEO cho doanh nghiệp của mình. Chính vì thế nếu bạn chưa tạo một Google My Business page nên tạo ngay, và tối ưu trang doanh nghiệp này của bạn. Ngoài ra bạn nên SEO những từ khóa về vị trí của doanh nghiệp của bạn như "từ khóa + vị trí doanh nghiệp". Vì sao? Thứ nhất là lý do về thuật toán và thứ hai là xu hướng sử dụng điện thoại họ tìm kiếm bất cứ cái gì họ muốn mua ở trên điện thoại, và họ thường sẽ tìm kiếm những dịch vụ nào ở gần mình nhất.

Tóm lại

Đây là 5 yếu tố xếp hạng của Google mà bạn nên lưu ý nhất cho đến bây giờ. Tất cả chúng ta nên nhớ Google càng ngày càng thông minh, họ luôn nghiên cứu xu hướng sử dụng internet của mọi người, họ luôn cải thiện và nâng cấp để mang đến giá trị tốt nhất cho những người sử dụng dịch vụ của họ.

Như vậy chốt lại ở đây ngoài những yếu tố hiện tại, cái mà các bạn SEOer nói riêng và Marketer nói chung, hãy nắm bắt xu thế và cải thiện những trải nghiệm tốt nhất cho mọi người về website của bạn và Google đảm bảo sẽ dành cho bạn một vị trí xếp hạng thật tốt trên công cụ tìm kiếm của họ. Đây là ý kiến riêng theo kinh nghiệm cá nhân của mình, còn cảm thấy thế nào hãy để lại bình luận cho mình ở dưới nhé.

Thẻ data xuất dữ liệu trong Blogger XML

Cũng giống như những nền tảng về blog khác, Blogger hỗ trợ cho chúng ta khả năng tùy chỉnh giao diện Blogger. Một trong những thứ không thể thiếu ở đây chắc chắn có dữ liệu mà người dùng nhập vào hoặc tùy ở trong mã nguồn này (tiêu đề bài viết, tiêu đề blog, tên widget, nội dung widget,...). Hôm nay mình xin được giới thiệu đến các bạn về cách lấy dữ liệu ra để sử dụng.

<data:tên_dữ_liệu>

Cú pháp sử dụng

Cú pháp sử dụng của thẻ data đơn giản được sử dụng như sau
<data:tên/>
hoặc
<data:tên.tên2/>
trong đó:
  • tên chính là tên của dữ liệu cần lấy ra.
  • tên2 là dữ liệu con của dữ liệu tên nằm trước nó.

Ở đây điều cần lưu ý chính là chỉ có một số ít dữ liệu có thể dùng thẻ data lấy ra ở bất cứ đâu người ta gọi nó là Globally Available Data, còn lại tất cả thẻ data thưởng được đặt trong đoạn mã của một widget để gọi ra dữ liệu của riêng của widget đó. Bạn có thể tham khảo qua toàn bộ tên dữ liệu của Blogger ở đây để gọi ra sử dụng: Tên Data Blogger XML.

Ví dụ

Bạn có thể gọi ra tiêu đề blog ở bất cứ vị trí nào trong Template của bạn bằng cú pháp
<data:blog.title/>

Còn bạn muốn gọi ra tiêu đề bài viết trong widget Blog thì như sau
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>
  <b:includable id='main' var='top'>
    <b:loop values='data:posts' var='post'>
      <data:post.title/>
    </b:loop>
   </b:includable>
</b:widget>

Video hướng dẫn

CẬP NHẬT SAU

Tạm kết

Bài giới thiệu về thẻ data trong Blogger XML thì đơn giản chỉ có thể thôi, nếu các bạn bất cứ ai không hiểu có thể trực tiếp để lại nhận xét ở dưới bài viết này mình sẽ hỗ trợ.

Thẻ b:include và b:includable trong Blogger XML

Trong Blogger XML một trong những thẻ được xuất hiện với tần xuất khá nhiều đặc biệt là trong widget Blog mặc định đó chính là b:includeb:includable. Chắc chắn rằng rất nhiều người không biết đây là thẻ gì và sử dụng chúng ra sao, và bài viết này mình sẽ chia sẻ với mọi người nó là gì và cách thức sử dụng chúng như thế nào.

Thẻ b:include và b:includable trong Blogger XML
Tìm hiểu b:include và b:includable

Thẻ b:include và b:includable là gì?

Khi mà bạn muốn sử dụng nhiều lần một đoạn mã (HTML hay JS) nhiều lần trong một widget bất kỳ, nhưng đoạn mã đó quá dài, hai thẻ này chính là giải pháp dành cho bạn.

Các thực hiện rất đơn giản, đầu tiên bạn tạo ra một thẻ b:includable gắn cho nó một cái id và ghi toàn bộ nội dung của đoạn mã mà bạn muốn sử dụng nhiều lần vào trong đó. Sau đó khi cần lấy ra sử dụng ở đâu bạn đơn giản chỉ cần sử dụng thẻ b:include để lấy dữ liệu trong đoạn mã đó ra để sử dụng.

Cú pháp sử dụng


<b:includable id='ten-id' var='ten-gia-tri'>
  [ĐOẠN MÃ HOẶC NỘI DUNG BẤT KỲ]
</b:includable>

Các thuộc tính cho thẻ b:includable

  • id (bắt buộc): Bạn có đặt với chữ số không dấu bất kì, viết liền và không dấu. Mỗi widget phải có tối thiểu một thẻ includable vời id='main' là thẻ đầu tiên mà widget thực thi.
  • var (không bắt buộc) Bạn có thể đặt với chữ và số, đây là biến tạo ra để sử dụng tham chiếu dữ liệu.
Một lưu ý là khi bạn tạo ra thẻ b:includable thì nó hoàn toàn không xuất hiện cho đến khi bạn gọi nó ra bằng the b:include. Các gọi như sau, nếu bạn đặt thẻ b:includable với id='ksl', thì khi đó bạn gọi nó ra bằng thẻ <b:include name='ksl' />, thuộc tính name chính là tên của id của thẻ includable.

Các thuộc tính cho thẻ b:include

  • name (bắt buộc): Phải trùng với ID của thẻ b:includable đã tạo ra trước đó.
  • data (không bắt buộc): Là dữ liệu bạn muốn truyền vào thẻ b:includable bạn đã tạo trước đó. Có nghĩa là giá trị của thằng này sẽ chuyển vào cho cái biến mà bạn đã đặt cho var cho thằng kia.
  • cond (không bắt buộc) Điều kiện thực thi thẻ include. Tương tự không khác gì thẻ b:if.

Ví dụ

Dưới đây là ví dụ cho thấy làm thế nào để sử dụng b:includableb:include.

Đây là ví dụ mình tạo ra thẻ includable để gọi ra tiêu đề bài viết của 10 bài mới nhất, tại widget blog mình sẽ có đoạn mã như sau.
<b:includable id='main'>
  <b:loop var='bv' index='index' values='data:posts'>
    <b:include name='baiviet' data='bv' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='baiviet' var='baiviet'>
  Tiêu đề: <data:baiviet.title/>
</b:includable>

Video hướng dẫn

CẬP NHẬT SAU

Tạm kết

Bạn nào thường xuyên tham khảo blog của mình sẽ thấy mình có một bài viết về cặp thẻ này rồi, bài này mình muốn viết lại đơn giản hơn và cập nhật thêm đầy đủ cũng như viết lại tiêu đề cho chính xác để phù hợp hơn với mọi người. Và như mọi người thấy thì cũng hoàn tất rồi, bạn nào có thắc mắc gì hãy để lại ở dưới khung nhận xét mình sẽ giải đáp. Sắp tới mình sẽ viết lại nhiều bài nữa về Blogger XML mọi người đón xem nhé.