Tạo box hỗ trợ trực tuyến tích hợp skype và yahoo cho Web/Blogspot

Một Website không thể thiếu 1 trang liên hệ. Bạn có 1 Website/Blogspot chia sẻ thủ thuật hay giới thiệu sản phẩm... Bạn đang cần cho mình 1 trang hỗ trợ trực tuyến thông qua các công cụ như skype, yahoo, mail và 1 vài thông tin. Ở bài này, tác giả sẽ chia sẻ thêm cho bạn đọc 1 mẫu box hỗ trợ trực tuyến khá đầy đủ và chuyên nghiệp gồm:

+ Ảnh đại diện
+ Thông tin liên hệ
+ Số điện thoại liên hệ
+ Email..
+ Tích hợp buton skype, yahoo hiển thị dạng online/Offline..

Cách thực hiện khá đơn giản như sau: Bạn chỉ cần chèn đoạn Code sau vào nơi cần hiển thị:

 <div class='boxhohokythuat'><ul><li><div class='avatar-hotrokt'><a href='ymsgr:sendim?thaiaiti&amp;m=Chào bạn, tôi muốn tư vấn kinh doanh' title='Chát cùng Thái AiTi'><img alt='Thái AiTi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRXcx0c308zGP2R9mHK9URVEDKV9XgRHPq7kktCcOPmT72oHmx_MUXM1nVIxI2QY9DcBEhtgILOwqmBfbOCmMWSPICBcR6UlL1V5CCB-yl4B-A8eP8Q7xwfnW5zCZ17xq3nsDOID2eaYoB/s0/0001455718_w76.png'/></a></div><div class='info-hotrokt'><p>Tư vấn - <span>Thái AiTi</span></p><p>Call: 0985.899.017</p><p>hohoangthai@gmail.com</p><p><a class='mar-right' href='skype:thaiaiti?chat' title='Chát cùng Thái AiTi'><img alt='skype' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGesVHFmmye5IWBQLShevPrbbPCl6zqHV9kinAp552XaogCOECGpfEwQhexXv9B9m73l4Vu3gBYYjuGb8Lwol6ygVpzy3ojpGkHaSF6KF4uEBhJma3wN71xifsDQGLuJoX4XEHri2mY6gg/s0/skype-icon.png' style='float: left;margin-right: 10px;'/>  </a><a href='ymsgr:sendim?thaiaiti&amp;m=Chào bạn, tôi muốn tư vấn về Thiết kế Web'><img alt='thaiaiti' border='0' src='http://opi.yahoo.com/online?u=thaiaiti&amp;m=g&amp;t=1&amp;l=us'/></a></p></div></li>
<li><div class='avatar-hotrokt'><a href='ymsgr:sendim?thaiaiti&amp;m=Chào bạn, tôi muốn tư vấn kinh doanh' title='Chát cùng Thái AiTi'><img alt='Thái AiTi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilDVNOIiMYLyVsilLB6_c4aUHbMOG7NKZmyNIWMNweirzgKSwUamHhqVvJC84_FvO0PeKLVYjW4YFS2Gc4gLfiX67TQZm0HfCVNslHqMFocS3OjuxJ_VxT_ha2nOzeW8eozNox7ZU7ASLT/s0/IMG_0034.JPG'/></a></div><div class='info-hotrokt'><p>Kỹ thuật - <span>Mr.Thái</span></p><p>Call: 0985.899.017</p><p>hohoangthai@gmail.com</p><p><a class='mar-right' href='skype:thaiaiti?chat'><img alt='skype' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGesVHFmmye5IWBQLShevPrbbPCl6zqHV9kinAp552XaogCOECGpfEwQhexXv9B9m73l4Vu3gBYYjuGb8Lwol6ygVpzy3ojpGkHaSF6KF4uEBhJma3wN71xifsDQGLuJoX4XEHri2mY6gg/s0/skype-icon.png' style='float: left;margin-right: 10px;'/>  </a><a href='ymsgr:sendim?thaiaiti&amp;m=Chào bạn, tôi muốn nhờ bạn giúp về lỗi kỹ thuật...'><img alt='thaiaiti' border='0' src='http://opi.yahoo.com/online?u=thaiaiti&amp;m=g&amp;t=1&amp;l=us'/></a></p></div></li>
<li><div class='avatar-hotrokt'><a href='ymsgr:sendim?thaiaiti&amp;m=Chào bạn, tôi muốn tư vấn kinh doanh...'><img alt='Thái AiTi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRXcx0c308zGP2R9mHK9URVEDKV9XgRHPq7kktCcOPmT72oHmx_MUXM1nVIxI2QY9DcBEhtgILOwqmBfbOCmMWSPICBcR6UlL1V5CCB-yl4B-A8eP8Q7xwfnW5zCZ17xq3nsDOID2eaYoB/s0/0001455718_w76.png'/></a></div><div class='info-hotrokt'><p>Kinh doanh - <span>Mr.Thái</span></p><p>Call: 0985.899.017</p><p>hohoangthai@gmail.com</p><p><a class='mar-right' href='skype:thaiaiti?chat'><img alt='skype' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGesVHFmmye5IWBQLShevPrbbPCl6zqHV9kinAp552XaogCOECGpfEwQhexXv9B9m73l4Vu3gBYYjuGb8Lwol6ygVpzy3ojpGkHaSF6KF4uEBhJma3wN71xifsDQGLuJoX4XEHri2mY6gg/s0/skype-icon.png' style='float: left;margin-right: 10px;'/>  </a><a href='ymsgr:sendim?thaiaiti&amp;m=Chào bạn, tôi muốn tư vấn kinh doanh'><img alt='thaiaiti' border='0' src='http://opi.yahoo.com/online?u=thaiaiti&amp;m=g&amp;t=1&amp;l=us'/></a></p></div></li>
</ul></div><style>div.boxhohokythuat {float: left;width: 100%;}div.boxhohokythuat li{list-style: none;float: left;width: 313px;margin-bottom: 15px;}div.boxhohokythuat ul {margin: 0;padding: 0;}div#boxlienhehotrokt {float: left;width: 100%;overflow: hidden;}div.avatar-hotrokt {float: left;width: 110px;overflow: hidden;height: 99px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBPs19rcxfU6ZEvYZ3_ZBlz7BURLhCF3mLRippS_Lh7r0fQMxpyu1swdNzOyCgo3mgsau7lwqYBiEzzDFlYnOrOqyiUuOr-d0JKZYuuywhuu1H_ccqoFKsg9Vmb-Qp_Ufn7Wc1uW4C3uj/s0/bg_avatar.png) no-repeat;position: relative;}div.avatar-hotrokt img {float: left;margin-left: 13px;margin-top: 12px;width: 75px;height: 75px;border-radius: 100%;overflow: hidden;}div.info-hotrokt p {font: 13px arial;color: #333;margin: 0;padding: 0;line-height: 22px;}div.info-hotrokt span {color: #f55438;}</style>

Ghi chú: Bạn thực hiện thay đổi các chữ màu đỏ ở đoạn code trên phù hợp với nick yahoo, skype của bạn nhé
Chúc bạn thực hiện thành công. Nếu có thắc mắc vui lòng để lại comment hoặc có thể yêu cầu thêm thủ thuật tại đây