Thêm nút chuyển văn bản thành giọng nói cho Blogspot bằng giọng Chị Google

Trong bài viết này mình sẽ hướng dẫn các bạn thêm một tips nhỏ cho Blogspot/Blogger, đó là Thêm nút chuyển văn bản thành giọng nói cho Blogspot bằng Chị Google.

Thêm nút chuyển văn bản thành giọng nói cho Blogspot bằng Chị Google

Ở bài viết trước mình cũng đã hướng dẫn thêm Thêm nút chuyển văn bản thành giọng nói cho Blogspot bằng dịch vụ WebsiteVoice, bạn có thể tham khảo lại.

Công dụng của tiện ích này mình sẽ không nói lại, mình bắt đầu hướng dẫn thêm vào Blogspot/Blogger luôn nhé ^^

Hướng dẫn chi tiết

Bài viết này mình sử dụng dịch vụ ResponsiveVoice.{alertSuccess}

Bước 1: Cấu hình cho trang Blog của bạn (mình sẽ hướng dẫn đăng ký dịch vụ này sau, bài viết này sử dụng API mà mình cung cấp).

Truy cập Blogger -> Chủ để -> Chỉnh sửa HTML -> Tìm kiếm thẻ ~~</body>~~ và chèn đoạn Script chạy tập lệnh lên phía trên đó:

<script src='https://code.responsivevoice.org/responsivevoice.js?key=AN1jc0tp'/>{codeBox}

Tiếp theo bạn tìm ~~]]></b:skin>~~ và dán đoạn mã CSS sau lên phía trên đó:

/*-- Google Voice --*/
.btnvoice{margin:0;overflow:hidden;position:relative;background: #f90;border-radius: 20px;}
.btnvoice button.voice-button,.btnvoice button.voice-stop{padding:0 5px;font-size:13px;background:none;outline:0;cursor:pointer}
.btnvoice button.voice-button{color:#fff;border:none;border-radius:0}
.btnvoice button.voice-stop{color:#222;border:none;border-radius:0}{codeBox}

Chèn nút hiển thị, thường là chèn trong phần hiển thị bài viết ~~<data:post.body>~~ (đoạn mã này thường xuất hiện 2 hoặc nhiều hơn, tuỳ mỗi Template mà bạn sử dụng) bạn cần tìm đúng thẻ hiện thị bài viết hoặc thử đoạn mã để chính xác hơn. Bạn chèn vào phía dưới nó.

<span class='btnvoice'>
<button class='voice-button' onclick='responsiveVoice.speak(document.querySelector('.post-body').textContent, 'Vietnamese Female');' title='Đọc bài viết'><i class="fas fa-microphone"></i> Đọc bài viết</button>
<button class='voice-stop' onclick='responsiveVoice.cancel();' title='Dừng lại'><i class="fas fa-microphone-slash"></i> Dừng lại</button>
</span>{codeBox}

Tuy nhiên đoạn mã này hoạt động ngay cả khi không cần chèn vào phần hiển thị bài viết, ví dụ như mình chèn vào ~~<div class="entry-meta">~~ để làm đẹp trang luôn (phần này nâng cao yêu cầu phải hiểu rõ về code của blog). Bạn cần xác định đúng chỗ để chèn.

Bước 2: Chỉnh sửa tiện ích

.post-body ở phía trên đoạn HTML là đoạn mà nó hiểu để đọc nội dung.
Vietnamese Female - Là giọng đọc Nữ Việt Nam (Nếu muốn chuyển qua Nam sửa thành Vietnamese Male).

Ngoài ra tiện ích này hỗ trợ rất nhiều ngôn ngữ bạn có thể truy cập link này. Bấm tổ hợp phím ~~Ctrl F~~ và gõ Male hoặc Female (Trước đó là ngôn ngữ bạn có thể sửa).