Khi Blog của
bạn có quá nhiều nhãn thì việc hiển thị rất dài, làm khách truy cập ko tập
trung được. Vì vậy bạn cần ẩn bớt nó đi, nếu khách muốn xem có thể bấm vào
để cho nó hiện lên. Quá tiện và đẹp phải ko bạn
Chi tiết hướng dẫn (chú ý: Bạn làm thật cẩn
thận và tỉ mỉ nhé)
1. Tới Blogger> Layout> Thêm
Widgets> HTML / Javascript> sau đó nhập mã HTML bên dưới và lưu nó.
|
<a class='show-more' id='showmore'
onclick='document.getElementById('Label1').style.height='auto';document.getElementById('showmore').style.display='none';document.getElementById('hidemore').style.display='block';'
href='javascript:;'>Show More Categories</a>
<a class='show-more' id='hidemore'
onclick='document.getElementById('Label1').style.height='130px';document.getElementById('hidemore').style.display='none';document.getElementById('showmore').style.display='block';'
href='javascript:;'>Hide More Categories</a>
|
Thông tin: 130px là loại kích thước sẽ điều chỉnh số
lượng các loại sẽ được hiển thị. Nếu bạn thay đổi cũng có thể thay đổi 130px
130px trong CSS.
2. Tới Blogger> Template> Chỉnh sửa
HTML> sau đó đặt đoạn code CSS bên dưới ngay trên code]]> </ b: skin>hay </
style>
|
/* CSS Show More Categories */
#Label1{height:130px;transition:all 1s
ease-in-out;overflow:hidden}
a.show-more{width:180px;overflow:hidden;color:#fff;background:#36BD80;text-transform:uppercase;font-weight:bold;border:4px
solid #ddd;padding:10px
30px;text-align:center;margin:15px;border-radius:10px;font-size:12px;transition:all
.5s ease-in-out}
a.show-more:hover{border:4px solid
#22AF6F;background:#fff;color:#22AF6F}
#showmore{display:block}#hidemore{display:none}
|
Thông tin: # Label1 là thẻ CSS trong các thể loại, các
thẻ CSS trong blog có các loại khác nhau để đánh đồng với các lựa chọn
"xem hình 1".
Save Template
và xem kết quả
Lưu ý: Nếu màn hình hiển thị còn nhiều loại và vẫn còn
lộn xộn, vui lòng xem hướng dẫn và điều chỉnh như mã # Label1và130px.
Hy vọng rằng hướng dẫn
này hữu ích với bạn. Hãy chia sẻ với mọi người nhé. Thanks!