Xin chào các bạn, chủ đề ngày hôm nay là thêm hoạt động nhấp nháy vào hộp đèn (thường gọi là mục lục) cho template Median Ui 1.6 và 1.5.

Hướng Dẫn Thêm Hiệu Ứng Nhấp Nháy Vào Hộp Đèn Bài Viết Cho Template Median Ui 1.6 Và 1.5

Thông thường, các hộp đèn của 2 template này chỉ bình thường, không có sự nhấp nháy ở đó.

Vì vậy nếu các bạn muốn làm cho nó trở nên sinh động hơn, đẹp mắt hơn thì hãy theo dõi bài viết dưới đây, không được bỏ qua bước nào.

Các Bước Thực Hiện

Thêm nháy mắt vào hộp đèn Median Ui 1.6

Bước 1: Hãy vào Chủ đề => Chỉnh sửa Html 

Bước 2: Thực hiện tìm kiếm (Ctr + F) thẻ /*]]>*/</style>

Bước 3: Sao chép toàn bộ css dưới đây:

.tocC:before{content:'';display:block;width:12px;height:12px;background-color:var(--linkC);border:2px solid var(--bodyB);border-radius:50%;position:absolute;top:5px;left:12px;animation:indicator 1s ease infinite;-webkit-animation:indicator 1s ease infinite;z-index:1}@-webkit-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

Bước 4: Sau khi dán mã, hãy lưu lại

Thêm nhấp nháy vào hộp đèn Median Ui 1.5

Hãy lập lại hoạt động như ở các bước trên.

Sau đó, thực hiện (Ctr + F) tìm thẻ ]]><b:skin> trong Html. Sau khi tìm được, sao chép tất cả css dưới đây và chèn lên trên thẻ ]]><b:skin>.

.Blog .post-tocContainer .show:before{content:unset;display:block;position:absolute;width:10px;left:13px;border-radius:50px;top:7px;height:10px;background:#555;webkit-animation:indicator 1s ease infinite;-moz-animation:indicator 1s ease infinite;animation:indicator 1s ease infinite}
@-webkit-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-moz-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.tableOfIcon:before {
content: '';
display: block;
width: 12px;
height: 12px;
background-color: var(--link-color);
border: 2px solid var(--content-bg);
border-radius: 50%;
position: absolute;
top: 8px;
left: 15px;
animation: indicator 1s ease infinite;
-webkit-animation: indicator 1s ease infinite;
}

Đừng quên lưu lại nhé.

Sau khi lưu lại, hãy ra ngoài blog/website của các bạn, ấn một bài viết tùy chọn và xem hộp đèn của bạn có hoạt động không nhé.

Lời Kết

Toàn bộ cách thực hiện và css của Techaadi, hy vọng sau khi xem bài viết này các bạn có thể áp dụng cho hộp đèn ở template Median Ui 1.5 hoặc 1.6. Nếu có thắc mắc hay khiếu nại bản quyền thì bình luận bên dưới nhé. Chúc may mắn!

Tham khảo: www.techaadi.eu.org