Cách Thêm Hiệu Ứng Nhấp Nháy Vào Mục Lục Bài Viết Cho Template Median Ui 1.5 và 1.6

byHà Hữu Tùng • • 2 min read
0
Hello ae hôm nay nội dung mình chia sẻ tới ae là cách thêm hoạt động nhấp nháy vào mục lục bài viết ( Hay còn được gọi là hộp đèn ) cho template Median Ui 1.5 và 1.6.




Thông thường chúng ta có thể thấy rằng mục lục của hai template này thường không có hiệu ứng nhấp nháy.

Vậy nên nếu bạn muốn làm hiệu ứng nhấp nháy làm cho nó trở nên sinh động và đẹp mắt hơn thì hãy làm theo các bước sau.

Các bước thực hiện

Thêm hiệu ứng nhấp nháy vào Median Ui V1.6

Bước 1 : Hãy vào phần 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 : Dán mã xong thì lưu lại nhé bro

Thêm hiệu ứng nhấp nháy Median - Ui V1.6

Bước 1 : Hãy vào phần chủ đề => Chỉnh sửa HTML

Bước 2 : Thực hiện tìm kiếm ( Ctr + F ) thẻ
]]><b:skin>
Bước 3 : Sao chép toàn bộ code CSS dưới đây và đặt trước thẻ vừa tìm.
.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; }
Bước 4 : Dán code xong thì lưu lại nhé bro



Để kiểm tra xem thành công chưa các bạn ra ngoài trang Blogspot/Website.Ấn vào bài viết bất kì 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 mục lục ở Median V1.5 và V1.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 bạn nhiều sức khỏe !



Tags:
4.94 / 169 rates

Post a Comment

Previous Post Next Post