Bộ nút mạng xã hội với tooltip đẹp bằng CSS

Mạng xã hội là một trong những nguồn lực quan trọng để chúng ta lấy được lưu lượng truy cập. Ngày nay thì hầu như ai ai cũng biết đến và sử dụng các mạng xã hội như Google+, Facebook, Twitter,.. ,do đó bằng việc sử dụng nó một cách hợp lý, website của bạn sẽ phát triển một cách rất nhanh chóng. Chính vì thế nhiều giao diện bộ nút mạng xã hội ra đời nhằm mục đích này kiếm thêm lưu lượng từ mạng xã hội.


Trước đây mình có chia sẻ khá nhiều giao diện về các loại nút mạng xã hội, và hôm nay tiếp tục lại chia sẻ thêm một bộ nút nữa. Về bộ nút này, bộ nút sử dụng Pure HTML và CSS để làm ra, do đó các bạn không cần phải lo lắng tẹo nào về tốc độ tải trang cho blog của bạn.

Bộ nút mạng xã hội với tooltip đẹp bằng CSS

Bạn truy cập vào blog của mình và thêm một tiện ích mới bằng HTML trong  phần Bố cục

Tại phần nội dung của widget bạn thêm vào đoạn mã sau đây

<style>
a.tooltip{font-family:arial;font-weight:700}a.tooltip span{position:absolute;width:120px;color:#FFF;background:#111;height:30px;line-height:30px;text-align:center;visibility:hidden;border-radius:6px;top:-40px;margin-left:-60px!important}a.tooltip span:after{content:'';position:absolute;top:100%;left:50%;margin-left:-8px;width:0;height:0;border-top:8px solid #111;border-right:8px solid transparent;border-left:8px solid transparent}a:hover.tooltip span{visibility:visible;bottom:30px;left:50%;margin-left:-76px;z-index:999}.social-tooltip a{display:inline-block;position:relative}.social-tooltip a:hover{opacity:.8}.facebooktip{background:url(https://googledrive.com/host/0B8D3MQmcZTyva00xallLc2JoUTQ/) no-repeat;height:50px;width:50px}.twittertip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvdTF5MURZQVd1Ykk/) no-repeat;height:50px;width:50px}.google_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvbUxQT0gtUV9aSVE/) no-repeat;height:50px;width:50px}.linkedin_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvdUROT0NwNkFLaU0/) no-repeat;height:50px;width:50px}.pinterest_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvaWZ1T0FGLW9RNDA/) no-repeat;height:50px;width:50px}.rss_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvNDhEbnRfczVydnM/) no-repeat;height:50px;width:50px}
</style>
<div class="social-tooltip">
<a class="tooltip facebooktip" href="#">
<span>Facebook</span></a>
<a class="tooltip twittertip" href="#">
<span>Twitter</span></a>
<a class="tooltip google_tip" href="#">
<span>Google+</span></a>
<a class="tooltip pinterest_tip" href="#">
<span>Pinterest</span></a>
<a class="tooltip linkedin_tip" href="#">
<span>Linkedin</span></a>
<a class="tooltip rss_tip" href="#">
<span>RSS</span></a>
</div>

sau khi chèn vào thay thể đường dẫn đến các mạng xã hội của bạn và lưu lại.

Như vậy là đã hoàn tất rồi, hi vọng bộ nút này phù hợp với blog của bạn, nếu bạn không thích bạn có thể xem thêm nhiều bộ nút về mạng xã hội khác ở đây

• Bộ nút mạng xã hội

để tìm được một giao diện ứng ý cho blog của bạn.