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. 
  • Xem thêm nhiều thủ thuật hay và PSD Ảnh bìa đẹp tại Ảnh Đẹp Blog
- 2 bình luận
CHUYÊN MỤC

TẤT CẢ BÌNH LUẬN (2)

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Không nói lời thiếu văn hóa, không quảng cáo thông qua khung bình luận.

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!