Hướng dẫn tạo nút theo dõi hiệu ứng rung cho Blog đơn giản nhất

 


Cách thực hiện:


Đầu tiên các bạn tìm thẻ </head> hoặc </body> rồi thêm đoạn code này vào

<link rel="stylesheet" href="https://cdn.leanhduc.pro.vn/utilities/animation/shake-effect/style.css"/>

 


tiếp theo các bạn tìm cho mình thẻ <![CDATA[ rồi cop đoạn code này bên dưới nó


/* ---------------------------------------------------CSS cho nút đăng ký nhận thông báo-------------------------------------------------------- */


.codepro-noti-box {bottom: 65px;right: 17px;position: fixed;display: flex;align-items: center;justify-content: center;background: var(--main-color);height: 40px;width: 40px;z-index: 100;border-radius: 100%;animation: codepro-noti 2s 0s ease-out infinite;}


.rtl .codepro-noti-box{right:auto;left:17px;}


.codepro-noti-box i {font-size: 20px;margin: 0;color: #fff;}


.codepro-noti-box svg {fill: #fff;}


@media only screen and (max-width: 980px){


.codepro-noti-box{right:13px;bottom:65px}


.rtl .codepro-noti-box{left:13px;right:unset}


}


@keyframes codepro-noti {


0% {box-shadow: 0 0 0 0 rgba(0, 45, 255, 0.5)}


75% {box-shadow: 0 0 0 16px rgba(109, 181, 27, 0)}


100% {box-shadow: 0 0 0 0 rgba(109, 181, 27, 0)}


}


 


Tiếp theo các bạn dán đoạn code này trên thẻ </body> lưu lại lại.


<!-- HTML tạo chuông đăng ký nhận thông báo -->


<a class='codepro-noti-box' href='https://www.blogger.com/follow.g?blogID=2385286059465605635' style='text-decoration:none' target='_blank' title='Theo dõi Blog'>


<i aria-hidden='true' class='fal fa-bell rung'/>


</a>

Chúc các bạn thành công.

Nguyễn Đình Thắng

Kiến thức như một ngọn lửa, càng chia sẽ nó sẽ càng bùng cháy!

إرسال تعليق (0)
أحدث أقدم