Fix vị trí nút mạng xã hội bằng CSS hiển thị đẹp trên website

Ở bài trước mình có hướng dẫn các bạn chèn nút chia sẻ mạng xã hội, tích hợp vào website bằng addthis và sharethis. Những dịch vụ này rất hoàn hảo, bạn dễ dàng quản lý số lượng người dùng chia sẻ bài viết của bạn lên tài khoản facebook, google plus..của họ.

Nhưng làm sao để làm đẹp các nút này gây thu hút độc giả ngay từ lúc vào trang web, làm cho họ thấy ấn tượng và thật chuyên nghiệp và nhấn like chia sẻ nội dung ngay lập tức.

Chèn code thông thường, các nút chia sẻ facebook, google, twitter..hiển thị trên web bạn sẽ thấy các nút này hiển thị không đều nhau theo chiều ngang, kiểu như thế này.

Bạn hoàn toàn có thể định vị trí nút sử dụng thêm CSS. Ví dụ, tôi thêm đoạn mã nút của dịch vụ addthis vào trang như sau:

<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
<a class="addthis_button_tweet" tw:text=""></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>

Thoạt nhiên, nút facebook bị hiển thị lệch so với google+ và twitter. Chúng ta thêm thuộc tính style vào nút addthis_button_facebook_like với nội dung sau:
width:47px; overflow:hidden;position:relative; top:auto; bottom:2px; left:-3px;.
Save lại file và upload lên host, sau đó load lại trang bạn sẽ thấy nút ở vị trí khác, tùy vào bạn điều chỉnh để các nút ở trên cùng một hàng nhìn trông đẹp mắt hơn. Nút facebook like, sau khi thêm CSS:

<a class="addthis_button_facebook_like" style="width:47px; overflow:hidden;position:relative; top:auto;  bottom:2px; left:-3px;" fb:like:layout="button_count"></a> 

Kết quả:

Như trên hình, nút google+ nằm xa so với nút twitter, chúng ta sẽ điều chỉnh lại nút này. Thiết lập vị trí left cho gần với 2 nút còn lại.

<a class="addthis_button_google_plusone" style="width:47px; overflow:hidden;position:relative; top:auto;  bottom:2px; left:-3px;" g:plusone:size="medium"></a>

Điều chỉnh đến khi 3 nút nằm trên một hàng đều nhau như thế này.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook