Tạo nút liên hệ trượt dọc theo blog cực đẹp

CÁC BƯỚC THỰC HIỆN

Bước 1: Chèn đoạn CSS Sau vào trước ]]></b:skin>

/* Contact Home */
#contacts{position:fixed;right:0;top:220px;width:49px;z-index:1000}
#contacts:before{display:block;width:100%;height:36px;background:no-repeat url("http://i.imgur.com/SWWK1mI.png");content:'  '}
#contacts:after{display:block;width:100%;height:37px;background:no-repeat url("http://i.imgur.com/nG1qro5.png");content:''}
#contacts a,#contacts a:hover,#contacts a:visited,#contacts span{color:#fff;text-decoration:none;text-align:right;white-space:nowrap}#contacts .contact{display:block;position:relative;width:100%;background-color:#F79138;padding:2px 0;text-align:center}#contacts .contact .helper{height:100%;width:50%;display:block;position:absolute;right:0;z-index:2;background-color:#F79138;top:0}#contacts .contact .icon{width:100%;height:42px;background:no-repeat center;display:inline-block;cursor:pointer;z-index:3;position:relative;vertical-align:middle;margin:3px 0}
#contacts .contact .icon.icon_home{background-image:url(http://i.imgur.com/z18sE5v.png);background-position:-40px -148px;width:35px;height:35px}
#contacts .contact .icon.icon_phone{background-image:url(http://i.imgur.com/z18sE5v.png);background-position:-120px -148px;width:35px;height:35px}
#contacts .contact .icon.icon_email{background-image:url(http://i.imgur.com/z18sE5v.png);background-position:-160px -148px;width:35px;height:35px}
#contacts .contact .icon.icon_faq{background-image:url(http://i.imgur.com/z18sE5v.png);background-position:0px -148px;width:35px;height:35px}
#contacts .contact:hover{}
#contacts .contact .contactDetail{position:absolute;height:37px;top:5px;right:0;display:block;line-height:37px;padding:0 20px 0 20px;background-color:#FF7700;border-top-left-radius:20px;border-bottom-left-radius:20px;z-index:1;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;opacity:0;font-weight:bold;color:#fff}#contacts .contact:hover .contactDetail{right:50%;opacity:1}@media (max-width: 960px){#contacts{box-shadow:0 -3px 3px #ebebeb;bottom:0;width:100%;height:40px;text-align:center;position:fixed;left:0;background-color:#f4f4f4;top:auto;font-size:0}#contacts:before,#contacts:after{display:none}#contacts a,#contacts a:hover,#contacts a:visited,#contacts span{text-align:center}#contacts .contact{height:100%;display:inline-block;width:20%;background-color:#f4f4f4;position:static}#contacts .contact i,#contacts .contact a{height:30px !important;background-size:contain;margin:6px 0;line-height:30px;text-align:center}#contacts .contact .contactDetail{top:auto;bottom:0;left:0;right:auto !important;width:100%;overflow:visible;border-top-right-radius:10px;border-top-left-radius:10px;border-bottom-left-radius:0;z-index:-1;-webkit-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;padding:0 2px;text-align:center;font-size:12px;background-color:transparent}#contacts .contact:nth-child(2){left:-100%}#contacts .contact:nth-child(3){left:-200%}#contacts .contact:nth-child(4){left:-300%}#contacts .contact:nth-child(5){left:-400%}#contacts .contact.active .contactDetail{bottom:42px;opacity:1;background-color:#FF7700}#contacts .helper{background-color:#f4f4f4 !important}}

Bước 2: Chèn đoạn code dưới vào trước thẻ </body>

<div id='contacts'><div class='contact contact_home'><a class='icon icon_home' href='/'/><div class='helper'/><div class='contactDetail'><a href='/'>Home</a></div></div><div class='contact contact_email'><i class='icon icon_email'/><div class='helper'/><div class='contactDetail'><a href='mailto:support@shopee.vn' style='display: block'>tixiufc@gmail.com</a></div></div><div class='contact contact_phone'><i class='icon icon_phone'/><div class='helper'/><div class='contactDetail'><span style='display: block; '>01658263521</span></div></div><div class='contact contact_faq'><a class='icon icon_faq' href='http://www.phongdz.ml/p/moi-cau-hoi-ve-gop-y-bao-loi-noi-dung.html'/><div class='helper'/><div class='contactDetail'><a href='http://www.phongdz.ml/p/moi-cau-hoi-ve-gop-y-bao-loi-noi-dung.html'>Trợ giúp</a></div></div></div>

 Bước 3: Lưu Template.

LỜI KẾT

Mình đã fix all lỗi của code
Chỉ có thế thôi. Chúc các bạn thành công!

Nguồn: Copy

Liên Hệ Click here HOME Click here

Lượt Xem