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.
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ụ https://responsivevoice.org/license/
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 Scriptchạy tập lệnh lên phía trên đó:
<script src='https://code.responsivevoice.org/responsivevoice.js?key=AN1jc0tp'/>
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}
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>
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[UWSL] ở phía trên đoạn HTML là đoạn mà nó hiểu để đọc nội dung.[/UWSL]
Ngoài ra tiện ích này hỗ trợ rất nhiều ngôn ngữ bạn có thể truy cập https://code.responsivevoice.org/responsivevoice.js?key=AN1jc0tp . 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).
Sau đó lưu mẫu lại và tận hưởng thành quả.
REVIEW GIỌNG ĐỌC NÀY
Cá nhân mình đã trải nghiệm tuy nhiên khi ngắt nghỉ dấu . và , khá lâu 😂 và giọng đọc nữ khá là củ chuối, giọng nam thì khá là OK
Xong rồi đó, xem thêm nhiều thủ thuật blogspot hơn tại đây nhé!!!
