Ads Below The Title

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é.


Không có nhận xét nào

Ads Inter Below The Post

CÓ THỂ BẠN QUAN TÂM

Image Link [https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghyphenhyphenA8YNicdfPOAA4bmGlgM8GjUF_BknWT9wCb1sDEoYC5a8HMglUV0ylKNLbpmZxXqR6XfPWek91WLK6Twc2NHXpTqF3c2PRVLpqBDINalp9ouWmZD_BjWI3R6vVVUsH65OvuBYn7blMI/s320/MUI+TEN+XUONG.png] Author Name [CÓ THỂ BẠN QUAN TÂM] Author Description [Những sản phẩm dưới dây tương tự sản phẩm bạn đang xem. Bạn có thể xem qua hoặc liên hệ trựt tiếp 093.6666.209 để được tư vấn.] Facebook Username [#] Twitter Username [#] GPlus Username [#] Pinterest Username [#] Instagram Username [#]