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?tuan_vnam&amp;m=Chào bạn, tôi muốn tư vấn kinh doanh" title="Chát cùng Tuấn CNTT"><img alt="Tuấn CNTT" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lUjus0qM4sUQ4l_fJHu0Z1R0727KF-NG1rjEqx9ZSPd4QtNf5-9b6haWII43lVFu44xrheaLY35sbnbNFAlG1X0rW0VPtklaKYCGxVIOJboWWSfaq1nUvJyvWBI3wgKafBzE8hrctiFg/s0/0001455718_w76.png" / /></a></div><div class="info-hotrokt"><p>Tư vấn - <span>Tuấn CNTT</span></p><p>Call: 096.278.3456</p><p>dinhdongtuan@gmail.com</p><p><a class="mar-right" href="skype:tuanprime?chat" title="Chát cùng Tuấn CNTT"><img alt="skype" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyQcXNGgvSic4ybOYhQ20olVBv7T1uxfb1ca9Z4GjIBpiqPWQj15UTzIyVISiI1qjSdKmP-38iwtYv_eAS-xrat1bGr_a4jllipWMJdTBwoYn11bhLKOli46JDvJSDujFyZdDUgIe-mdP/s0/skype-icon.png" style="float: left; margin-right: 10px;" / />  </a><a href="ymsgr:sendim?tuan_vnam&amp;m=Chào bạn, tôi muốn tư vấn về Thiết kế Web"><img alt="Tuấn CNTT" border="0" src="http://opi.yahoo.com/online?u=tuan_vnam&amp;m=g&amp;t=1&amp;l=us" / /></a></p></div></li><li><div class="info-hotrokt"><p>Kỹ thuật - <span>Mr.Tuấn</span></p><p>Call: 0915.188.084</p><p>dinhdongtuan@gmail.com</p><p><a class="mar-right" href="skype:tuanprime?chat"><img alt="skype" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyQcXNGgvSic4ybOYhQ20olVBv7T1uxfb1ca9Z4GjIBpiqPWQj15UTzIyVISiI1qjSdKmP-38iwtYv_eAS-xrat1bGr_a4jllipWMJdTBwoYn11bhLKOli46JDvJSDujFyZdDUgIe-mdP/s0/skype-icon.png" style="float: left; margin-right: 10px;" / />  </a><a href="ymsgr:sendim?tuan_vnam&amp;m=Chào bạn, tôi muốn nhờ bạn giúp về lỗi kỹ thuật..."><img alt="tuan_vnam" border="0" src="http://opi.yahoo.com/online?u=tuan_vnam&amp;m=g&amp;t=1&amp;l=us" / /></a></p></div></li><br /><li><div class="avatar-hotrokt"><a href="ymsgr:sendim?tuan_vnam&amp;m=Chào bạn, tôi muốn tư vấn kinh doanh..."><img alt="Tuấn CNTT" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lUjus0qM4sUQ4l_fJHu0Z1R0727KF-NG1rjEqx9ZSPd4QtNf5-9b6haWII43lVFu44xrheaLY35sbnbNFAlG1X0rW0VPtklaKYCGxVIOJboWWSfaq1nUvJyvWBI3wgKafBzE8hrctiFg/s0/0001455718_w76.png" / /></a></div><div class="info-hotrokt"><p>Kinh doanh - <span>Mr.Tuấn</span></p><p>Call: 096.278.3456</p><p>dinhdongtuan@gmail.com</p><p><a class="mar-right" href="skype:tuanprime?chat"><img alt="skype" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyQcXNGgvSic4ybOYhQ20olVBv7T1uxfb1ca9Z4GjIBpiqPWQj15UTzIyVISiI1qjSdKmP-38iwtYv_eAS-xrat1bGr_a4jllipWMJdTBwoYn11bhLKOli46JDvJSDujFyZdDUgIe-mdP/s0/skype-icon.png" style="float: left; margin-right: 10px;" / />  </a><a href="ymsgr:sendim?tuan_vnam&amp;m=Chào bạn, tôi muốn tư vấn kinh doanh"><img alt="tuan_vnam" border="0" src="http://opi.yahoo.com/online?u=tuan_vnam&amp;m=g&amp;t=1&amp;l=us" / /></a></p></div></li><br /></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/AVvXsEj5ooUJz2zKfH3DnlpZIiOF1Lz3uzU0zVDiZTjQQMyifA8TknTEhu9uVAf7SFvUgJ8ie-1GC-XnA89IjQdHiqdIjOoNyj2-A7tGaLQyDg5_50lSHWBMKL_tdrW3JUYlFDpGenpCCt4-69yT/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 

Share on Google Plus

Giới thiệu đôi chút. Hơi ít nói nhưng được cái vui tính. Đam mê các kiến thức về CNTT. Mình lập ra trang này là 1 phần ghi lại những gì mình đã trải nghiệm về CNTT từ khi mình làm tới nay...Luôn sẵn sàng chia sẻ mọi kiến thức mà bản thân tích lũy được. Xin chào các bạn, mình là Đinh Đồng Tuấn. Mong nhận được sự góp ý của tất cả các bạn ! Xin cảm ơn!