Hướng dẫn tùy chỉnh tiện ích Addthis float toolbar và Addthis welcome bar

 Trước đây HHV đã có giới thiệu tương đối đầy đủ về tiện ích social sharing toolbar của addthis ở đây.
Bài viết đó khá đầy đủ tuy nhiên HHV vẫn còn bỏ sót 2 điểm chưa được đề cập tới đó là Addthis float toolbar và Addthis welcome bar. Hôm nay nhân tiện lúc mình cập nhật giao diện Blog Thiết Kế xin giới thiệu nó với mọi người. Chính vì vậy bạn sẽ thấy demo ngay trên trang Blog Thiết Kế.

Lưu ý rằng muốn sử dụng 2 tiện ích này bạn cần phải chèn đoạn code js mặc định của Addthis. Nếu bạn chưa biết thì vui lòng đọ qua bài viết cách chèn tiện ích chia sẻ Addthis social sharing toolbar vào blog, website trước khi đọc tiếp phần sau.

1. Addthis Float toolbar

Float toolbar là tiện ích mới cập nhật sau này của Addthis, ưu điểm của nó là sẽ chạy dọc theo bài viết, luôn luôn hiện diện trước mặt độc giả và như vậy thuận tiện hơn cho họ khi muốn chia sẻ nội dung blog với bạn bè. Muốn sử dụng Addthis float toolbar bạn chỉ cần chèn đoạn code này vào bất cứ điểm nào trên blog.

Data provided by Pastebin.com - Download Raw - See Original

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<!-- AddThis Button END -->

Sau khi thêm code, Kiểm tra blog bạn sẽ thấy float toolbar xuất hiện. Tuy nhiên điểm phiền nhiễu là nó nằm hết sức lơ lửng giữa trời, khi xem ở màn hình có độ phân giải thấp hơn 1024px thì chính float toolbar sẽ che khuất đi một phần nội dung bài viết rất phản cảm và khó chịu.
Để khắc phục tình trạng này, cố định float toolbar bên cạnh bài viết ở bất kỳ độ phân giải nào bạn chỉ cần chỉnh sửa đoạn code ở trên 1 chút xíu

Data provided by Pastebin.com - Download Raw - See Original

<!-- tìm đến đoạn  -->
 
style="left:50px;top:50px;"
 
<!-- thay bằng  -->
 
style="position: fixed; top: 50%; left: 50%; margin-top: -200px; margin-left: -550px"

Bạn cần tùy chỉnh một chút phần margin-top và margin-right để giúp float toolbar hiển thị chính xác. Bạn cũng có thể trang trí cho float toolbar bằng cách thêm màu nền, thêm thuộc tính border…

2. Addthis welcome bar

Addthis welcome bar là tiện ích mới nhất của Addthis, nó xuất hiện ở đầu mỗi trang web và thông báo cho độc giả một thông tin ngắn hữu ích hoặc có thể khuyến khích độc giả chia sẻ nội dung bài viết. Điểm đặc biệt hay của welcome bar là nó cho phép lựa chọn thông tin hiển thị tùy theo nguồn độc giả. VD một độc giả đến từ bộ máy tìm kiếm Google sẽ thấy thông tin khác với độc giả đến từ một liên kết trên Facebook.
Muốn chèn welcome bar vào blog bạn chỉ cần đến trang này Addthis Welcome Bar  để lấy code.
Trước tiên bạn lựa chọn cách thức mà thanh Welcome bar hoạt động.

Sau đó tiếp tục lựa chọn cách hiển thị bao gồm màu nền, màu nút nhấn, màu chữ, thời điểm tự động tắt…

Cuối cùng bạn copy đoạn code và dán vào ngay trên thẻ </body>. Nói chung là rất dễ dàng. Nếu bạn tìm hiểu thêm sẽ thấy rằng bạn có thể can thiệp trực tiếp vào code tùy chỉnh sự hiện thị đa dạng hơn.
Nếu có khó khăn để lại lời nhắn ở đây – Hồng Hòa Vi