Thủ thuật wordpress, Tất cả bài viết

Hướng dẫn tạo code icon bố cục 10 cột giống tiki wordpress

Đăng vào Tháng 3 31, 2025Tháng 3 31, 2025 bởi Quản trị viên

Quản trị viên

31/03/2025

1 Phút đọc

535 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Để tạo một bố cục tương tự như trên, với 10 cột và các icon được bố trí giống Tiki trong WordPress, bạn cần sử dụng CSS Grid hoặc Flexbox để sắp xếp các phần tử trong một layout 10 cột. Đây là cách bạn có thể triển khai bằng HTML và CSS.

HTML:

<div class="styles__ContainerWidget-sc-1905sp2-2 hkUftd" style="min-height: 126px;">
<div class="style__QuickLinksStyled-sc-1j9jq39-0 dTYmVt">
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
<a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/2f/52/8e/00ab5fbea9d35fcc3cadbc28d7c6b14e.png"><img srcset="https://salt.tikicdn.com/ts/upload/2f/52/8e/00ab5fbea9d35fcc3cadbc28d7c6b14e.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(217, 56, 67);">TOP DEAL</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
      <a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/72/8d/23/a810d76829d245ddd87459150cb6bc77.png"><img srcset="https://salt.tikicdn.com/ts/upload/72/8d/23/a810d76829d245ddd87459150cb6bc77.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Sỉ lẻ</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
      <a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/8b/a4/9f/84d844f70e365515b6e4e3e745dac1d5.png"><img srcset="https://salt.tikicdn.com/ts/upload/8b/a4/9f/84d844f70e365515b6e4e3e745dac1d5.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Coupon siêu hot</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
<a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/a5/d8/06/cb6ff520f12973013c81a8b14ad5e5b3.png"><img srcset="https://salt.tikicdn.com/ts/upload/a5/d8/06/cb6ff520f12973013c81a8b14ad5e5b3.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Siêu sales</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
<a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/cf/46/d1/e474a9eb803909a59927600ee64ddd4f.png"><img srcset="https://salt.tikicdn.com/ts/upload/cf/46/d1/e474a9eb803909a59927600ee64ddd4f.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Hàng ngoại giá hot</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
      <a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/21/c1/02/65f847f59e5248746dc3d689faba85a0.png"><img srcset="https://salt.tikicdn.com/ts/upload/21/c1/02/65f847f59e5248746dc3d689faba85a0.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Mỹ phẩm</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
      <a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/ea/4f/d9/fcd5f95210ba2f3ce68974efd0b0ae90.png"><img srcset="https://salt.tikicdn.com/ts/upload/ea/4f/d9/fcd5f95210ba2f3ce68974efd0b0ae90.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Thực phẩm</div>
<p><a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/"></p>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
      <a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/81/05/13/417c6431ef14e702d466858d6b8b7e2f.png"><img srcset="https://salt.tikicdn.com/ts/upload/81/05/13/417c6431ef14e702d466858d6b8b7e2f.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Gel dưỡng ẩm</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
<a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/4a/47/32/47b17d8467da8f25cc3da756ff97056a.png"><img srcset="https://salt.tikicdn.com/ts/upload/4a/47/32/47b17d8467da8f25cc3da756ff97056a.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Son môi</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
<a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/e7/29/22/54acb55d05be22564873cacbfa7ffb66.png"><img srcset="https://salt.tikicdn.com/ts/upload/e7/29/22/54acb55d05be22564873cacbfa7ffb66.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Dưỡng thể</div>
<p>
      </a>
    </div>
</p>
</div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

</p>

</picture>

</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Coupon siêu hot</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Siêu sales</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Hàng ngoại giá hot</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Gel dưỡng ẩm</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Dưỡng thể</div>

<p>

</a>

</div>

</p>

</div>

Css:

/*10 cot*/
.hkUftd {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Alias-Theme, #fff);
    overflow-x: auto; /* Cho phép trượt ngang */
    white-space: nowrap; /* Không xuống dòng danh mục */
}

.dTYmVt {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    align-self: stretch;
    justify-items: center;
    overflow-x: auto; /* Trượt ngang khi cần */
    scroll-behavior: smooth; /* Hiệu ứng trượt mượt */
    white-space: nowrap; /* Ngăn danh mục xuống dòng */
}

.dYnjmk a {
    display: flex;
    width: 100px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.gmDlFL {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 35%;
    overflow: hidden;
    box-sizing: content-box;
    background: white;
}

.hzrFdJ {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Giới hạn tối đa 2 dòng */
    overflow: hidden;
    color: var(--Alias-Primary---On-Theme, #27272a);
    text-align: center;
    text-overflow: ellipsis;
    min-height: 36px; /* Đảm bảo đủ không gian cho 2 dòng */
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    white-space: normal; /* Cho phép xuống dòng */
    word-break: break-word; /* Xuống dòng khi cần */
}

/* Định dạng trượt ngang trên thiết bị di động và máy tính bảng */
@media (max-width: 1024px) {
    .dTYmVt {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 10px;
    }

    .dYnjmk a {
        flex: 0 0 auto;
        width: 90px;
    }

    .hkUftd {
        overflow-x: auto;
    }
}

/*10 cot*/

.hkUftd {

display: flex;

padding: 16px;

flex-direction: column;

align-items: flex-start;

gap: 12px;

align-self: stretch;

border-radius: 8px;

background: var(--Alias-Theme, #fff);

overflow-x: auto; /* Cho phép trượt ngang */

white-space: nowrap; /* Không xuống dòng danh mục */

}

.dTYmVt {

display: grid;

grid-template-columns: repeat(10, 1fr);

gap: 8px;

align-self: stretch;

justify-items: center;

overflow-x: auto; /* Trượt ngang khi cần */

scroll-behavior: smooth; /* Hiệu ứng trượt mượt */

white-space: nowrap; /* Ngăn danh mục xuống dòng */

}

.dYnjmk a {

display: flex;

width: 100px;

flex-direction: column;

align-items: center;

gap: 8px;

text-align: center;

}

.gmDlFL {

border: 1px solid rgba(0, 0, 0, 0.05);

border-radius: 35%;

overflow: hidden;

box-sizing: content-box;

background: white;

}

.hzrFdJ {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2; /* Giới hạn tối đa 2 dòng */

overflow: hidden;

color: var(--Alias-Primary---On-Theme, #27272a);

text-align: center;

text-overflow: ellipsis;

min-height: 36px; /* Đảm bảo đủ không gian cho 2 dòng */

font-family: Inter, sans-serif;

font-size: 14px;

font-style: normal;

font-weight: 500;

line-height: 150%;

white-space: normal; /* Cho phép xuống dòng */

word-break: break-word; /* Xuống dòng khi cần */

}

/* Định dạng trượt ngang trên thiết bị di động và máy tính bảng */

@media (max-width: 1024px) {

.dTYmVt {

display: flex;

overflow-x: auto;

gap: 12px;

padding-bottom: 10px;

}

.dYnjmk a {

flex: 0 0 auto;

width: 90px;

}

.hkUftd {

overflow-x: auto;

}

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Hướng dẫn sửa toàn bộ lỗi hay gặp phải trong Antigravity

Antigravity đang được Google định vị như một nền tảng phát triển theo hướng agent-first, nơi AI không chỉ chat bên cạnh editor mà còn...
Tài khoản Antigravity Ultra giá rẻ chỉ 450k/tháng – Mua ngay tại Muathemewpgiare.com

Trong thời gian gần đây, nhu cầu tìm kiếm các công cụ AI hỗ trợ lập trình, làm sản phẩm và tăng tốc quy trình...
Tài khoản Genspark AI giá rẻ có đáng mua không? Phân tích kỹ từ A đến Z

Thời gian gần đây, Genspark xuất hiện ngày càng nhiều trong các cuộc thảo luận về công cụ AI làm việc đa năng. Không ít...
Top địa chỉ mua theme WordPress giá rẻ với theme Flatsome

Giới thiệu Lý do lựa chọn theme WordPress chuẩn, giá rẻ Theme wordpress free, đặc biệt là flatsome theme, luôn được cộng đồng quan tâm....
Antigravity Pro và Antigravity Ultra khác nhau như thế nào? Nên mua gói nào?

Khi tìm hiểu về Google Antigravity, rất nhiều người không dừng lại ở câu hỏi “Antigravity là gì” mà sẽ đi ngay tới câu hỏi...
GitHub Pro có đáng mua không? Ai nên nâng cấp để học tập và làm việc hiệu quả hơn?

Với những ai đang học lập trình, làm dự án cá nhân hoặc làm việc trong ngành công nghệ, GitHub gần như là một nền...
Tài khoản GitHub Pro giá rẻ chỉ 130k/tháng tại Muathemewpgiare.com

Trong thời điểm mà học lập trình, làm dự án cá nhân, xây dựng portfolio và phát triển sự nghiệp công nghệ đang trở thành...
Tài khoản BoltNew AI 490K/năm giá cực rẻ dành cho anh em coder

Giới thiệu Tổng quan về BoltNew AI BoltNew AI là một nền tảng trí tuệ nhân tạo hiện đại, cung cấp các giải pháp hỗ...
Hướng dẫn sử dụng Antigravity cho người mới

Bạn mới nghe về Antigravity.google và đang tò mò: “Nó dùng như thế nào? Có khó không? Có cần giỏi lập trình mới dùng được...
Antigravity.google là gì? Tìm hiểu nền tảng Antigravity của Google và lý do nó đang được quan tâm

Nếu bạn từng gặp cảm giác “lập trình càng nhiều càng rối”, càng làm càng tốn thời gian cho những việc lặp đi lặp lại...
Cách Fix lỗi There was an unexpected issue setting up your account. Please try again later.

Bạn đang cố gắng tạo tài khoản nhưng lại gặp thông báo: “There was an unexpected issue setting up your account. Please try again later.”?...
Học SEO đơn giản với cẩm nang SEO: Kiến thức nền tảng

Giới thiệu về SEO SEO là gì? Vai trò của SEO trong Marketing SEO là viết tắt của từ Search Engine Optimization, hay còn gọi...
Zalo Cập Nhật Điều Khoản, Thu Thập Dữ Liệu Cá Nhân Người Dùng

Zalo Cập Nhật Điều Khoản – Góc Nhìn Cá Nhân Của Một Người Làm Web & SEO “Khi một ứng dụng miễn phí tồn tại...
Lộ trình học SEO cho người mới bắt đầu từ con số 0

Giới thiệu về SEO SEO là gì? Tầm quan trọng trong marketing hiện đại SEO là viết tắt của từ Search Engine Optimization. Đây là...
Khóa học đào tạo SEO: Học SEO từ căn bản đến nâng cao

Giới thiệu về SEO SEO là gì? Tại sao cần học SEO? SEO là viết tắt của từ Search Engine Optimization. Đây là quá trình...
Share Code WordPress, Topcode và Sharecode.vn – Có an toàn không?

Giới thiệu: Vì sao share code WordPress lại được tìm nhiều đến vậy? Nếu bạn từng làm WordPress, chắc chắn bạn đã ít nhất một...