Tạo nút Liên hệ ẩn hiện trượt dọc theo website cho Blogger

How creat a Floater Contact Button for the website

Hôm nay Iris Tips xin chia sẻ cho các bạn cách tạo một nút Liên hệ nhỏ gọn nằm cạnh bên của website. Các bạn theo dõi bài viết bên dưới nhé.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

#contact-floater{height:107px;width:59px;display:block;position:fixed;top:40%;right:0;z-index:10000}
#contact-floater span{height:107px;width:59px;display:block;position:relative;top:0;right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEh23c4j2m69Udy2GYQXlc21UQKoBxbXY_HxylSFlziuzuoKTECfrEnkL8xdM8hd21zkCdFDZLjSSpxLrc2oqGRyBZ8MMQRMu2MlYuBrgcV8lunjAsD02DxHMzNvuuFKw6Days5mFWdOFA/s1600/ir-contact-floater.png) no-repeat 0 8px;z-index:10000}
#contact-floater:before{content:"";height:10px;width:59px;display:block;position:relative;top:51px;right:-9px;background:url(https://www.appsflyer.com/wp-content/themes/ohav-child/images/contact-floater-hands.png) no-repeat 0 0;z-index:0;-webkit-transition-delay:.4s;transition-delay:.4s}
#contact-floater:after{content:"";height:53px;width:59px;display:block;position:relative;top:-66px;right:-12px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRzNJ22qcyUIXwfDA4S7jFLSX3NWI2MTrdbMKUc80Rddi4z91BZv-3dZyR3gHazqkasFZNlRdiL1KJqWNnTj1NsIdg8ULsgWYks5cQxTWiPAvMaqybR9YvzW-hvTgiL3KY22dQUECyZiwm/s1600/ir-contact-floater-person.png) no-repeat 0 0;z-index:0;-webkit-transition:all ease .4s;-o-transition:all ease .4s;transition:all ease .4s}
#contact-floater:hover span{height:107px;width:59px;display:block;position:relative;top:0;right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEh23c4j2m69Udy2GYQXlc21UQKoBxbXY_HxylSFlziuzuoKTECfrEnkL8xdM8hd21zkCdFDZLjSSpxLrc2oqGRyBZ8MMQRMu2MlYuBrgcV8lunjAsD02DxHMzNvuuFKw6Days5mFWdOFA/s1600/ir-contact-floater.png) no-repeat 0 8px;z-index:10000}
#contact-floater:hover:before{z-index:10001;top:47px;-webkit-transition:all ease .2s;-o-transition:all ease .2s;transition:all ease .2s}
#contact-floater:hover:after{top:-110px;-webkit-transition-delay:.4s;transition-delay:.4s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;transition:all ease .6s}
#contact-floater span:before{display:none!important}
#contact-floater span:after{display:none!important}

HTML

2Tiếp tục tìm đến thẻ </body> và dán đoạn code sau vào trước thẻ đó.

<a href="http://iris-tips.blogspot.com/p/contact.html" target="_blank" id="contact-floater"><span></span></a>

• DEMO

Vậy là bạn đã có một Floater Contact Button trông khá đẹp mắt rồi đấy.
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm