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
để tìm được một giao diện ứng ý cho blog của bạn.

2 bình luận

  1. avatar says

    08:47 Ngày 06 tháng 06 năm 2014

    Rất hay, xin cảm ơn và G+ blog: muabectuoi.blogspot.com

  2. avatar says

    07:03 Ngày 15 tháng 05 năm 2016

    The mystery and the art of trading in the Forex know it here .. http://www.xforex.ml/ .

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.