TẠO TIỆN ÍCH LIÊN HỆ CHẠY DỌC CHO BLOGSPOT
Tiện ích này cũng khá đơn giản để thực hiện =))), Demo thì bạn có thể xem trực tiếp trên ảnh hoặc trên blog của chúng tôi. Cùng bắt tay vào ...
Tiện ích này cũng khá đơn giản để thực hiện =))), Demo thì bạn có thể xem trực tiếp trên ảnh hoặc trên blog của chúng tôi.
Cùng bắt tay vào làm ngay thôi nào :D
- Bước 1: Đăng nhập vào Blogger > Chủ Đề > Chỉnh sửa HTML
- Bước 2: Copy và Paste đoạn Css dưới đây vào trước thẻ ]]></b:skin>
#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:0 -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 3: Tìm đến thẻ </body> và dán đoạn Code dưới đây 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'>anhdepblogger@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;'>0926831105</span</div></div><div class='contact contact_faq'><a class='icon icon_faq' href='https://www.facebook.com/TanBinh220601'/<div class='helper'/><div class='contactDetail'><a href='https://www.facebook.com/TanBinh220601'>Trợ giúp</a></div</div</div>
- Bước 4: Thay các thông tin được bôi đậm theo ý của bạn và lưu mẫu.
- Chúc các bạn thành công.
TẠO TIỆN ÍCH LIÊN HỆ CHẠY DỌC CHO BLOGSPOT
Reviewed by the loi
on
tháng 11 11, 2017
Rating:
Không có nhận xét nào: