Có vẻ như WidgetPack đã ngừng hoạt động hoặc có thể nó đã ngừng cung cấp các dịch vụ miễn phí.
Xin chào! Chào mừng bạn đến với Blog iTeam OS.
Nhiều người muốn thêm Xếp hạng bài viết vào trang web của họ để khách truy cập có thể xếp hạng các bài viết và cải thiện nội dung của họ theo xếp hạng nhưng họ không thể thêm nó vì Blogger hiện không có bất kỳ Tiện ích hoặc Tiện ích Xếp hạng Bài viết nào.
|
| Thêm tiện ích đánh giá 5 sao bài viết tự động vào Blogger |
Trong bài viết này, chúng tôi sẽ thêm Tiện ích Xếp hạng bài viết vào bất kỳ Trang web Blogger nào. Khách truy cập có thể đánh giá bài viết của bạn thông qua tiện ích này. Ngoài ra, bạn không cần phải thêm đi thêm lại bất kỳ mã nào trong HTML bài viết vì tiện ích này sẽ được thêm tự động vào tất cả các bài viết của bạn.
Làm cách nào để thêm Tiện ích con xếp hạng bài viết tự động?
Thêm tiện ích Xếp hạng bài viết vào Trang web Blogger sẽ không yêu cầu nhiều kiến thức về HTML, CSS hoặc JS vì tôi đã thiết kế nó cho bạn. Những gì bạn cần làm là triển khai các mã ở đúng vị trí trong XML Chủ đề Blogger của bạn.
Quan trọng! Trước khi chúng tôi bắt đầu thêm mã trong XML, tôi khuyên bạn nên tạo một Bản sao lưu của chủ đề hiện tại của bạn. Tình cờ nếu có bất kỳ sự cố nào xảy ra, bạn có thể khôi phục lại sau.
Bước 1: Trước hết, Đăng nhập vào Trang tổng quan Blogger của bạn.
Bước 2: Trên Trang tổng quan Blogger, nhấp vào Chủ đề .
Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút'tùy chỉnh'.
Bước 4: Nhấp vào Chỉnh sửa HTML , bạn sẽ được chuyển hướng đến trang chỉnh sửa.
Bước 5: Bây giờ, hãy tìm kiếm mã ]]></b:skin> và dán các Mã CSS sau vào ngay trên với nó.
Nếu mẫu của bạn có tính năng chế độ tối và nếu bạn muốn có màu khác khi ở chế độ tối, bạn có thể tùy chỉnh các mã theo nhu cầu của mình. Mỗi mẫu có thể có một lớp chế độ tối khác nhau, vì vậy hãy điều chỉnh nó, bạn có thể thay thế lớp đã đánh dấu bằng lớp chế độ tối mẫu của mình.
/* Article Rating by Fineshop */
.pRate{display:none;padding:30px 0 10px 0}
.pRateC{display:flex;max-width:400px;margin-top:30px;padding:25px 17px;line-height:25px;background:#fff;border-radius:5px;box-shadow:0 5px 35px rgba(149,157,165,.3);font-size:16px;font-family:inherit;color:#08102b;text-align:center;justify-content:center}
.pRateC .ld{display:inline-flex;align-items:center;font-size:13px;opacity:.8}
.pRateC .ld svg{width:18px;height:18px;margin-right:5px;stroke:none !important;fill:#08102b}
.pRateS{background:#fff;position:absolute}
.darkMode .pRateC, .darkMode .pRateS{background:#252526}
.darkMode .pRateC{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe}
.darkMode .pRateC .ld svg{fill:#fefefe} Bước 6: Bây giờ, hãy thêm HTML sau đây ngay bên dưới vào <data:post.body/>.
<b:if cond='data:view.isPost'>
<!--[ Article Rating by Fineshop ]-->
<div id='pRating' class='pRate'>
<div class='pRateC'>
<div class='ld'><svg viewBox='0 0 50 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'/></path></svg>Getting Info...</div>
<div id='wpac-rating' class='pRateS'></div>
</div>
</div>
</b:if> Bước 7: Bây giờ, hãy thêm Mã JavaScript sau ngay ở trên vào thẻ </body>. Nếu bạn không tìm thấy nó, có thể nó đã được phân tích cú pháp là </body>.
Sau đây là Lazyload JavaScript, vì vậy đừng lo lắng về Lighthouse, Hiệu suất và Tốc độ tải. Bất cứ điều gì sẽ không bị ảnh hưởng.
<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/ /* Article Rating Script by Fineshop (Lazyload) */ var lazyrs=!1;window.addEventListener('scroll',function(){(0!=document.documentElement.scrollTop&&!1===lazyrs||0!=document.body.scrollTop&&!1===lazyrs)&&(!function(){wpac_init=window.wpac_init||[],wpac_init.push({widget:'Rating',id:32139}),function(){var t,e;'WIDGETPACK_LOADED'in window||(WIDGETPACK_LOADED=!0,(t=document.createElement('script')).type='text/javascript',t.async=!0,t.src='https://cdn.widgetpack.com/widget.js',(e=document.getElementsByTagName('script')[0]).parentNode.insertBefore(t,e.nextSibling))}();document.querySelector('#pRating').style.display='block';}(),lazyrs=!0)},!0); /*]]>*/</script>
</b:if>Nếu bạn đã thêm Tiện ích xếp hạng theo Gói tiện ích trên trang web của mình và bạn sẽ thay thế nó bằng Tiện ích này, hãy thay thế ID xếp hạng được đánh dấu bằng ID xếp hạng tiện ích cũ hoặc tạo ID tiện ích xếp hạng mới TẠI ĐÂY. Giữ nguyên hiện trạng nếu bạn không có ý tưởng về nó vì chúng tôi không muốn bạn gặp bất kỳ khó khăn nào.
Bước 8: Cuối cùng, Lưu các thay đổi bằng cách nhấp vào biểu tượng này
Đã xong! Bây giờ Widget Xếp hạng Bài viết sẽ được tự động thêm vào tất cả các bài viết của bạn. Khách truy cập bây giờ có thể đánh giá bài viết của bạn.
Demo
Bạn muốn xem nó hoạt động?
Bạn có thể kiểm tra Kiểu tiện ích con xếp hạng bài viết trước khi áp dụng nó trên Trang web Blogger của mình.
Kết luận
Đây là tất cả về việc thêm Tiện ích Xếp hạng Bài viết vào Trang web Blogger. Tôi hy vọng bạn thích bài viết này. Xin vui lòng chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào thì hãy hỏi chúng tôi trong hộp bình luận. Cảm ơn bạn!
