ChiroUp Posted February 25, 2022 Share Posted February 25, 2022 Site URL: https://chiroup.com Hi there, I am wanting to add blog ratings where users can rate our blog posts on a scale of 1-5 with star ratings. Is there code or a plugin I can add to include these ratings in the blog posts? Link to comment
derricksrandomviews Posted February 25, 2022 Share Posted February 25, 2022 There are a number of them out there: https://ourcodeworld.com/articles/read/498/top-7-best-jquery-javascript-star-rating-plugins Link to comment
ChiroUp Posted February 25, 2022 Author Share Posted February 25, 2022 1 hour ago, derricksrandomviews said: There are a number of them out there: https://ourcodeworld.com/articles/read/498/top-7-best-jquery-javascript-star-rating-plugins If I wanted to use this https://github.com/nashio/star-rating-svg How would I add it to my site? Link to comment
derricksrandomviews Posted February 25, 2022 Share Posted February 25, 2022 I am not a coder, but there are folks here who can tell you how to implement javascript. Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 On 2/25/2022 at 11:03 PM, ChiroUp said: If I wanted to use this https://github.com/nashio/star-rating-svg How would I add it to my site? Try adding this to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> <style> .jq-stars { display: inline-block; } .jq-rating-label { font-size: 22px; display: inline-block; position: relative; vertical-align: top; font-family: helvetica, arial, verdana; } .jq-star { width: 100px; height: 100px; display: inline-block; cursor: pointer; } .jq-star-svg { padding-left: 3px; width: 100%; height: 100% ; } .jq-star:hover .fs-star-svg path { } .jq-star-svg path { /* stroke: #000; */ stroke-linejoin: round; } /* un-used */ .jq-shadow { -webkit-filter: drop-shadow( -2px -2px 2px #888 ); filter: drop-shadow( -2px -2px 2px #888 ); } </style> <script> $(".my-rating").starRating({ starSize: 25, callback: function(currentRating, $el){ // make a server call here } }); </script> Next, add this to Blog Page Header > Post Blog Item Code Injection <div class="my-rating"></div> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ChiroUp Posted March 2, 2022 Author Share Posted March 2, 2022 On 2/27/2022 at 2:35 AM, tuanphan said: Try adding this to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> <style> .jq-stars { display: inline-block; } .jq-rating-label { font-size: 22px; display: inline-block; position: relative; vertical-align: top; font-family: helvetica, arial, verdana; } .jq-star { width: 100px; height: 100px; display: inline-block; cursor: pointer; } .jq-star-svg { padding-left: 3px; width: 100%; height: 100% ; } .jq-star:hover .fs-star-svg path { } .jq-star-svg path { /* stroke: #000; */ stroke-linejoin: round; } /* un-used */ .jq-shadow { -webkit-filter: drop-shadow( -2px -2px 2px #888 ); filter: drop-shadow( -2px -2px 2px #888 ); } </style> <script> $(".my-rating").starRating({ starSize: 25, callback: function(currentRating, $el){ // make a server call here } }); </script> Next, add this to Blog Page Header > Post Blog Item Code Injection <div class="my-rating"></div> Hi there, I added both codes and nothing happened. Link to comment
tuanphan Posted March 6, 2022 Share Posted March 6, 2022 On 3/3/2022 at 12:43 AM, ChiroUp said: Hi there, I added both codes and nothing happened. Can you share link to a blog post on your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ChiroUp Posted March 17, 2022 Author Share Posted March 17, 2022 On 3/5/2022 at 8:17 PM, tuanphan said: Can you share link to a blog post on your site? https://chiroup.com/blog/chiropractic-evaluation-of-neurologic-heel-pain Link to comment
tuanphan Posted March 19, 2022 Share Posted March 19, 2022 On 3/17/2022 at 8:52 PM, ChiroUp said: https://chiroup.com/blog/chiropractic-evaluation-of-neurologic-heel-pain Try removing it from Blog Post Item Code Injection & Add a Code Block on a specific post >> Paste the code <div class="my-rating"></div> (I Just want to test to see if it works on a blog post) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment