Tạo tiện ích liên hệ chạy dọc cho blogger

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.

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait