Trang chủ
blogger
code

Hướng dẫn thêm tiện ích tìm kiếm Google và share Facebook khi bôi đen text trên Website

0 lượt xem
Tìm kiếm từ khóa hoặc chia sẻ bài viết kèm với trích dẫn đoạn văn bản được bôi đen là tùy chọn tuyệt vời mà mỗi website cần áp dụng vào bài viết của mình giúp cho người đọc có nhiều tùy chọn hơn khi chia sẻ bài viết. Khi họ đọc đến đoạn nào hay họ có thể bôi đen đoạn đó sau đó chọn tùy chọn chia sẻ lên mạng xã hôi Facebook hoặc tìm kiếm trên Google.

Thủ thuật này không còn mới nhưng lại ít khi áp dụng vào bài viết trong website vì đoạn text không được nằm trong cặp thẻ <p></p>, theo mình thấy rất ít website nào chia sẻ về vấn đề này. Thủ thuật tạo popup chia sẻ với trích dẫn khi bôi đen đoạn văn bản bài viết chỉ bao gồm một bước chèn js là xong.

Hướng dẫn thêm tiện ích tìm kiếm Google và share Facebook khi bôi đen text trên Website

Bước 1: Chèn Javascript

Copy và dán 2 đoạn mã bên dưới đây vào trước thẻ </body>:
<script src='https://cdn.jsdelivr.net/gh/WIKIANOW/effect-when-hightlighting-text/hightlighting-text.js' />
<script>//<![CDATA[
Sharect.config({
  facebook: true,
  search: true,
  backgroundColor: '#FF3152',
  iconColor: '#FFFFFF',
  selectableElements: ['body'],
}).init()
//]]></script>
Trong đoạn code thứ 2 đó là phần cấu hình:
  • Thay thế false nếu bạn muốn ẩn Share Facebook hoặc Search Google.
  • Thay thế các mã màu cho phù hợp với Website của bạn.
  • Trong thẻ selectableElements chính là quy định giới hạn mà việc bôi đen có thể hiển thị. Thay thế bằng id, class, html,...

Bước 2: Tạo trang hiển thị kết quả tìm kiếm.

Nếu ở bước 1 bạn chọn hiển thị nút tìm kiếm thì bạn phải thiết lập bước 2 này:
  • Đầu tiên là tạo một trang mới trong blogger với tiêu đề là "ket qua tim kiem" (tiêu đề có thể đổi lại sau).
  • Chọn Chế độ xem HTML sau đó dán đoạn mã sau vào và nhấn Xuất bản.
<script async src="https://cse.google.com/cse.js?cx=5e290e20eed155b50"></script>
<div class="gcse-searchresults-only"></div>
  • Bây giờ nhấn vào chỉnh sửa trang và thay đổi lại Tiêu đề trang theo ý bạn rồi lưu lại.
Vậy là xong! Bạn có thể thử kết quả. Code trên áp dụng được cho Wordpress, Blogger,... nhưng cần thay đổi một tý nếu không phải Blogger. Nếu bạn không làm được có thể để lại bình luận bên dưới nhé!{alertSuccess}