Bảng Excel tính thép dầm BTCT theo TCVN 5574-2018

Xin chào mọi người, nhân dịp này mình sẽ chia sẻ widget bài viết xếp hạng sao cho nền tảng Blogger.

Tôi cũng đã thêm localStorage vào tiện ích này để những người đã xếp hạng không thể xếp hạng lại, nhưng nếu cookie trình duyệt bị xóa, họ có thể xếp hạng lại.

Một lần nữa, tôi đã tạo tiện ích này bằng cách sử dụng api từ Firebase, trong bài đăng trước tôi đã tạo tiện ích lượt xem bài bài viết theo thời gian thực trên Blogger và tiện ích like bài viết trên Blogger.

Và tất nhiên điều này có thể xuất hiện trong tất cả các bài viết hoặc thậm chí trên các trang tĩnh, nếu bạn không muốn nó xuất hiện trên các trang tĩnh thì chỉ cần thêm một thẻ có điều kiện.

Tiện ích xếp hạng sao trên Blogger

Để xem demo các bạn hãy bấm vào nút bên dưới nhé, OK, các bạn nào muốn dùng thử thì cùng xem cách thực hiện nhé.

Tiện ích xếp hạng sao trên Blogger

Lưu ý: Tiện ích này chỉ dành cho nền tảng Blogger/Blogspot.

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển 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 đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> hoặc ]]>*/</style> và dán các mã CSS sau ngay trên vào nó.

/* Widget stars rating by giahuy.net */
.rating-box .stars.pointer{pointer-events:none}
.rating-wrap{display:flex;gap:10px;padding:22px 0;border:1px solid #e4e3e1;border-left:0;border-right:0}
.rating-box{width:100%;text-align:center}
.rating-box:before{content:attr(aria-label);font-size:16px;font-weight:550}
.rating-box .stars{display:flex;justify-content:center;gap:15px;margin-top:15px}
.stars-svg{width:35px;height:35px;fill:#b5b8b1}
.stars svg.active,.stars svg:hover{fill:#ffb851;transform:scale(1.2)}
.result-rating{font-weight:800}
.result-rating:after{content:attr(aria-label);display:flex;justify-content:center;font-weight:normal;opacity:.8}
.alreadyRt{display:none;margin-top:10px}
.alreadyRt:after{content:attr(aria-label)}
@media screen and (max-width:480px){.result-rating{font-size:12px}.result-rating:after{font-size:11px;width:50px}.rating-box .stars{gap:10px}}

Bước 6: Sao chép mã HTML bên dưới và đặt nó ở dưới mã: <data:post.body/>. Đối với theme Median UI 1.7 bạn có thể đặt dưới mã <b:include data='post' name='postBody'/>.

<!--[ Widget stars rating by giahuy.net ]-->
<div class='rating-wrap' expr:data-view='data:blog.blogId + &quot;/&quot; + data:post.id + &quot;/viewpost&quot;' expr:view-ispost='data:view.isPost ? &quot;true&quot; : &quot;false&quot;' id='ratingContainer'>
  <div aria-label='Bài viết này có hữu ích không?' class='rating-box'>
    <div class='stars'>
      <svg class='stars-svg star1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg>
      <svg class='stars-svg star2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg>
      <svg class='stars-svg star3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg>
      <svg class='stars-svg star4' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg>
      <svg class='stars-svg star5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg>
      <div class='result-rating' data-after='vote'/>  
    </div>
    <div aria-label='Bạn đã đưa ra đánh giá' class='alreadyRt'/>
  </div>
</div>
                            
<script>
/*<![CDATA[*/
var ghRatings = {
  firebaseUrl: 'https://giahuy-default-rtdb.firebaseio.com/',
  sharedBy: 'www.giahuy.net' // Credit do not removed
};

function ratingLoad(){var script=document.createElement('script');script.async=true;script.src='https://cdn.giahuy.net/widget/js/Rating.js';document.body.appendChild(script)}function rtDtcLazy(){ratingLoad();localStorage.setItem("RatingsJs","true")}var ratingsStorage=localStorage.getItem("RatingsJs");if(ratingsStorage!=="true"){var t=false,e=false;window.addEventListener("scroll",()=>{if((document.documentElement.scrollTop!==0||document.body.scrollTop!==0)&&!t){rtDtcLazy();t=true;e=true}},true);window.addEventListener("click",()=>{if(!e&&!t){rtDtcLazy();e=true;t=true}},true)}if(ratingsStorage==="true"){ratingLoad()}
/*]]>*/
</script>

Chú ý: Những từ chúng tôi đánh dấu các bạn thay đổi nội dung cho hợp lý.

Bước 7: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Trên đây là hướng dẫn tiện ích xếp hạng sao trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Related Posts