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(&apos;.post-body&apos;).textContent, &apos;Vietnamese Female&apos;);' 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.

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

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).

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

Sau đó lưu mẫu lại và tận hưởng thành quả.

Rì viu 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{alertInfo}

Xong rồi đó, xem thêm nhiều thủ thuật blogspot hơn tại đây nhé!!!

Đánh giá của bạn về bài viết này?

Trường

Chia sẻ những gì mình biết là cách ý nghĩa nhất để lưu lại giá trị của đời mình cho cộng đồng. Cho đi là cách nhận lại thông minh nhất. facebook flickr share

Nếu bổ ích hãy mời mình 1 ly nước mía 5k qua MoMo nhé: 085.45.74.559

2
Nhận xét

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn (Tích vào ô Thông báo cho tôi).
➥ Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang Upload Image, sau đó sao chép link ảnh dán vào khung bình luận.
➥ Không spam trong khung bình luận, hạn chế viết tắt. Xem quy định bình luận tại đây.

  1. Blog bạn sử dụng theme litspot hả bạn?

    Trả lờiXóa
    Trả lời
    1. Mình dùng mẫu Colorify Premium được thiết kế lại nha bạn :D

      Xóa