seo Question posted in
Some basic information to get you started with this can be found here.

how to add rating stars in static web? – SEO

I am looking for a five star rating code to add to my HTML document and it works on the server without any problems and does not have a negative effect on SEO in terms of its static.
I mean below Google results. Image narration:

enter image description here

Its static code is ready and I do not know how to execute it.
I will put the static code down. Please apply your code to it and please tell a few sources

I hope I explained well.

div.stars {
  width: 270px;
  display: inline-block;
}

input.star { display: none; }

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked ~ label.star:before {
  content: '2605';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
  content: '2605';
}
<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

My English is not very good, maybe I did not explain it well, so if you have any questions, ask

Tags:

2

Answers


  1. 0

    You mean this?

    window.addEventListener("load", function() {
  document.querySelector(".stars").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName==="LABEL" && tgt.classList.contains("star")) {
      const star = tgt.getAttribute("for"); 
      console.log(star);
      // here you can ajax to the server
    }
  })
})
    div.stars {
  width: 270px;
  display: inline-block;
}

input.star {
  display: none;
}

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked~label.star:before {
  content: '2605';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked~label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked~label.star:before {
  color: #F62;
}

label.star:hover {
  transform: rotate(-15deg) scale(1.3);
}

label.star:before {
  content: '2605';
}
    <div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star" />
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star" />
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star" checked />
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star" />
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star" />
    <label class="star star-1" for="star-1"></label>
  </form>
</div>
    Login or Signup to reply.
  2. 0

    You can post json data to server and save rating.

    $("input.star").click(function() {
      var value = $(this).attr("id");
      console.log("start ID : "+ value);
      
      var data={
        point: value
      };
      
       $.ajax({    
          type: 'POST',
          url: './rating',
          contentType: 'application/json; charset=utf-8',
          data: JSON.stringify({data}),
          dataType: 'json',
          success: function (response) {
            alert('succes!!');
          },
          error: function (error) {
            alert("errror");
          }
       });
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search