Tạo box hỗ trợ trực tuyến đẹp cho blogger

Box hỗ trợ trực tuyến là một box không thể thiếu cho blogger admin, đặc biệt là các blog kinh doanh, bán hàng lại là rất cần thiết. Cho nên hôm nay Hồng Designer hướng dẫn cách  Tạo box hỗ trợ trực tuyến đẹp cho blogger.

Chức năng của box

• Ả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..

<div class='boxhohokythuat'><ul><li><div class='avatar-hotrokt'><a href='ymsgr:sendim?nchong2409&amp;m=Chào bạn, tôi muốn tư vấn kinh doanh...'><img alt='Hồng Designer' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDkgvfU6mV8p_Xkx8xBoIZ7q4qNZFJ3tb3ngsDxfhBAGAYRUaOmaEbfNb4YhMPZ_rSs-9iGpWLUrGQb69fnpC87evxJ2oWRFdzREmSfG3tMWWbTLPk5F6KP2xI-RjZhJ78EnPozJD5wV1c/s1600/105756.jpg'/></a></div><div class='info-hotrokt'><p>Admin - <span>Hồng Designer</span></p><p>Call: 0967.84.99.34</p><p>Manhongit.dhp@gmail.com</p><p><a class='mar-right' href='skype:hongdesigner?chat'><img alt='skype' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP1laOyUK_uGuL-50ZuX0QUn9KmIhWME_ApiI5mOuGHc5R24ONReOMF6lMOCB-9FKlLFvNi7aS2Pa9k6TgbvWm-KI59hUUlQC0Ili1lnd0a9yV8LW_0Wmc7u-AFtQJoW4BRZJNyglShbvs/s0/skype-icon.png' style='float: left;margin-right: 10px;'/>  </a><a href='ymsgr:sendim?nchong2409&amp;m=Chào bạn, tôi muốn tư vấn kinh doanh'><img alt='hongdesigner' border='0' src='http://opi.yahoo.com/online?u=nchong2409&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/AVvXsEil01gCWd12kyQxEOsLoe9pUaAiGWFiWO1zmoBs4WgovKvU3V_4SJJwytQRTBNAEgtSKNQObvToO1v4F14xXz4LzwgfsqvLlnce53yHIKZsWS4VabP-potrCoLWMndXrCuQFZmihyphenhyphen84h-QN/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>

Lưu ý : 

Sửa những phần mình tô màu bên trên thành nick skype, mail và nick yahoo của các bạn.
+ Nếu muốn thêm 2 admin bạn có thể nhân đôi đoạn code trong thẻ <li>...</li>
Chúc các bạn thành công !

Share :

Tweet

More

Related Post