Chào các bạn, trong bài viết này Chiasema.Com sẽ chia sẻ cho các bạn cách tạo danh mục dạng lưới cho blogger. Danh mục này có thể áp dụng linh động trong rất nhiều trường hợp, một ví dụ ứng dụng của code này là tại trang chủ của blog mình.
Cách tạo danh mục dạng lưới cho blogspot:
Bước 1. Copy đoạn css dưới đây, dán vào trước thẻ đóng </head>;
<style>
.at-feature { background: #fff; padding:5px; text-align: center;position: relative;} .at-feature h2 { font-size: 1.6em; line-height: 1.6em; margin-bottom: 0; padding-bottom: 0; } .at-feature ul { clear: both; margin: 15px 0 20px; width: 100%; display: flex;padding: 0; flex-wrap: wrap; justify-content: space-between; }.at-feature.icon-p-2 li { position: relative; width: 30%; list-style: none; line-height: 1.3em; text-align: center; border-radius: 10px; margin:6px 0; background: rgba(255, 255, 255, 0.5); border: 1px solid rgb(230,230,230); box-sizing: border-box; padding: 6px 0 12px; display: flex; align-items: center; justify-content: center; } .at-feature li a { display: block; text-decoration: none; color: #333; /* font-size: 14px; */ /* line-height: 18px; */ }.at-feature li svg{ margin: 3px 0; width: 35px; height: 35px; display: inline-block; }.at-feature li span { display: block; padding: 0 3px; }.darkMode .at-feature li{box-shadow: inset 0 0 10px #3b3939;}
</style>Bước 2. Copy đoạn Html dưới đây và dán vào vị trí bạn muốn hiển thị
<div class='at-feature coll-3 icon-p-2'>
<h2>
<span>Top Categories</span>
</h2>
<ul>
<li>
<a href='' title='game'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M7,6H17A6,6 0 0,1 23,12A6,6 0 0,1 17,18C15.22,18 13.63,17.23 12.53,16H11.47C10.37,17.23 8.78,18 7,18A6,6 0 0,1 1,12A6,6 0 0,1 7,6M6,9V11H4V13H6V15H8V13H10V11H8V9H6M15.5,12A1.5,1.5 0 0,0 14,13.5A1.5,1.5 0 0,0 15.5,15A1.5,1.5 0 0,0 17,13.5A1.5,1.5 0 0,0 15.5,12M18.5,9A1.5,1.5 0 0,0 17,10.5A1.5,1.5 0 0,0 18.5,12A1.5,1.5 0 0,0 20,10.5A1.5,1.5 0 0,0 18.5,9Z' fill='currentColor'/>
</svg><span>Latest Jobs</span></a>
</li>
<li>
<a href='' title='Entertainment'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M18 4L20 7H17L15 4H13L15 7H12L10 4H8L10 7H7L5 4H4C2.9 4 2 4.9 2 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V4H18M11.25 15.25L10 18L8.75 15.25L6 14L8.75 12.75L10 10L11.25 12.75L14 14L11.25 15.25M16.94 11.94L16 14L15.06 11.94L13 11L15.06 10.06L16 8L16.94 10.06L19 11L16.94 11.94Z' fill='currentColor'/>
</svg><span>Entertainment</span></a>
</li>
<li>
<a href='' title='Photography'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z' fill='currentColor'/>
</svg><span>Photography</span></a>
</li>
<li>
<a href='' title='News'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M4 7V19H19V21H4C2 21 2 19 2 19V7H4M21.3 3H7.7C6.76 3 6 3.7 6 4.55V15.45C6 16.31 6.76 17 7.7 17H21.3C22.24 17 23 16.31 23 15.45V4.55C23 3.7 22.24 3 21.3 3M8 5H13V11H8V5M21 15H8V13H21V15M21 11H15V9H21V11M21 7H15V5H21V7Z' fill='currentColor'/>
</svg><span>News</span></a>
</li>
<li>
<a href='' title='seo'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M16,11.78L20.24,4.45L21.97,5.45L16.74,14.5L10.23,10.75L5.46,19H22V21H2V3H4V17.54L9.5,8L16,11.78Z' fill='currentColor'/>
</svg><span>Seo</span></a>
</li>
<li>
<a href='' title='How to'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M13 3C16.88 3 20 6.14 20 10C20 12.8 18.37 15.19 16 16.31V21H9V18H8C6.89 18 6 17.11 6 16V13H4.5C4.08 13 3.84 12.5 4.08 12.19L6 9.66C6.19 5.95 9.23 3 13 3M10.32 7.39H12.25C12.26 7.09 12.35 6.86 12.53 6.7C12.71 6.55 12.93 6.47 13.19 6.47C13.5 6.47 13.76 6.57 13.94 6.75C14.12 6.94 14.2 7.2 14.2 7.5C14.2 7.82 14.13 8.09 13.97 8.32C13.83 8.55 13.62 8.75 13.36 8.91C12.85 9.25 12.5 9.55 12.31 9.82C12.11 10.08 12 10.5 12 11H14C14 10.69 14.04 10.44 14.13 10.26C14.22 10.07 14.39 9.9 14.64 9.74C15.09 9.5 15.46 9.21 15.75 8.81C16.04 8.41 16.19 8 16.19 7.5C16.19 6.74 15.92 6.13 15.38 5.68C14.85 5.23 14.12 5 13.19 5C12.32 5 11.62 5.2 11.08 5.59C10.56 6 10.3 6.57 10.31 7.36L10.32 7.39M12 14H14V12H12V14M13 1C8.41 1 4.61 4.42 4.06 8.9L2.5 11L2.47 11L2.45 11.03C1.9 11.79 1.83 12.79 2.26 13.62C2.62 14.31 3.26 14.79 4 14.94V16C4 17.85 5.28 19.42 7 19.87V23H18V17.5C20.5 15.83 22 13.06 22 10C22 5.03 17.96 1 13 1Z' fill='currentColor'/>
</svg><span>How to</span></a>
</li>
</ul>
</div>Tổng kết
Vừa rồi mình đã hướng dẫn các bạn cách tạo danh mục dạng lưới cho blogger. Chúc các bạn ứng dụng thành công trên blog của bạn!
Nếu có bất kỳ câu hỏi nào, hãy để lại bình luận xuống phần Comment dưới đây để mình giải đáp nhé.