68 Kopakolong, Thống nhất, TP.Kon Tum 600000

14.349171, 108.007778

Cách Tạo Code Đánh Giá 5 Sao Cho Web Blog Bằng HTML5 Và CSS

Veolike blog tổng hợp các bộ phim hay không có quảng cáo, các code blogspot, template blogspot, giải trí âm nhạc, tin tức......

Để mình có thể tạo một nút like hay nút nhận xét đánh giá 5 sao thì rất đơn giản hôm nay mình sẽ chia sẻ miễn phí code đánh giá 5 sao cho blog, website bằng HTML và CSS, bay giờ mình bắt đầu nhé
Cách tạo nút nhận xét 5 sao cho website blog
Cách tạo nút nhận xét 5 sao cho website blog bằng CSS và HTML
Để xem demo thì bạn chỉ cần nhấn nút RUN là ok
Bước 1: pass đoạn link sau thẻ <head>

<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

Bước 2: vào trang quản trị blog chọn chỉnh sửa HTML và pass CSS sau trước thẻ </style>

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: '\f005';
  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: '\f006';
  font-family: FontAwesome;
}

Bước 3: pass đoạn HTML nơi bạn muốn hiển thị

<h2>Đánh giá của bạn</h2>
<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>

Đăng nhận xét