Tạo Nút Home Trượt Đẹp Cho Blogspot

Hướng dẫn tạo nút home đẹp cho blogspot

Bước 1:

Đầu tiên các bạn vào Blogger chọn "Chủ đề" rồi chọn "Chỉnh sửa HTML" sau đó thêm đoạn code CSS dưới đây vào trước mã ]]></b:skin> hoặc </style>

#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/AVvXsEg8iyUKY6_dq-qf4WczNZ2AZ_-ixJEvCgeCbXhfB9tUKzlcBBtND6D-H-4VSRocuYcg6xFgBAbOTyp1HW4Zf3wF_DxDwWyboQMZtpdCBSFMaj0PZ1jEjXxOBMFeP7T-y8wPOrgGW1FPyuEC/s1600/ir-contact-floater11.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/AVvXsEhoiyLbzHItRzPEboxYzxqVoSf_svcd6YjGoh5z8sZF7cTqzl29h2k2dl6VH-kLCoeKqVG2XivaNCDIgvH4_686JJtnmA8RsojViAPe3kMllAtQZWcvwx_yM3ojFiaKNiwoCxCrqnr-K0Jp/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/AVvXsEg8iyUKY6_dq-qf4WczNZ2AZ_-ixJEvCgeCbXhfB9tUKzlcBBtND6D-H-4VSRocuYcg6xFgBAbOTyp1HW4Zf3wF_DxDwWyboQMZtpdCBSFMaj0PZ1jEjXxOBMFeP7T-y8wPOrgGW1FPyuEC/s1600/ir-contact-floater11.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}

Bước 2:

Vẫn ở mục chỉnh sửa ở bước 1, chúng ta sao chép tiếp mã dưới đây vào trước thẻ </body>

<a href='https://www.haidang.org/' id='contact-floater'><span/></a> (mở trong tab)

<a href="https://www.haidang.org/" target="_blank" id="contact-floater"><span></span></a> (mở tab khác)

Các bạn thay đường dẫn www.haidang.org thành link bên bạn

Tận hưởng CLICK HERE xem demo. Chúc các bạn thành công, nếu cần hỗ trở để lại comment dưới đây nhé.