Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Web Development » Fix vị trí nút mạng xã hội bằng CSS hiển thị đẹp trên website

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

Thứ Sáu, 12/09/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Ở 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.
social-share-button-align

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ả:
điều chỉnh vị trí nút  social share

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.
social-share-base-line1

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

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Tự động lấy nút chia sẻ bài viết lên mạng xã hội với addthis
  2. Cách lấy toàn bộ hình ảnh trong file css
  3. Addthis Dynamic – Chèn nút chia sẻ bài viết addthis động cho website
  4. [Phần 2] Cấu hình cài đặt nâng cao nút chia sẻ addthis
  5. Thống kê chia sẻ addthis với Google Analytics
  6. Cấu hình cài đặt nâng cao nút chia sẻ addthis
  7. URL tạo chia sẻ bài viết lên mạng xã hội – Addthis share endpoint
  8. Tạo nút chia sẻ bài viết cho website với addthis
  9. Tùy biến nút addthis chia sẻ bài viết cho website
  10. Viết lại code CSS cho dễ nhìn – cssbeautify

Chuyên mục: Web Development Tìm kiếm: css, Social Share

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.