Widget Rating Bintang untuk Blogger

Hallo semua! Di artikel kali ini, saya akan berbagi widget bintang rating post terbaik untuk Blogger. Fitur ini cocok untuk meningkatkan interaksi dan engagement di blog Anda!

Widget rating bintang ini saya buat menggunakan API dari Firebase. Widget terbaru ini memiliki fitur penyimpanan lokal (localStorage) sehingga pengguna tidak bisa memberikan rating berulang, kecuali jika cookie browser dihapus.

Widget ini bisa ditampilkan di semua artikel atau halaman statis, tapi bisa juga disembunyikan di halaman tertentu dengan menambahkan tag kondisional.

Cara Memasang Widget Rating Bintang

Memasukkan CSS

Silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin> atau di atas kode </style>

/* widget stars rating by www.wendycode.com - Updated by www.lewis-kull.com */
.lewis-ranting-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}
.lewis-ranting-box{width:100%;text-align:center}
.lewis-ranting-box:before{content:attr(aria-label);font-size:12px;font-weight:800}
.lewis-ranting-box .stars{display:flex;justify-content:center;gap:15px;margin-top:15px}
.stars-svg{width:35px;height:35px;fill:#b5b8b1;transition:all 0.2s ease}
.stars-svg.active,.stars svg.hovered{fill:#ffb851;transform:scale(1.2)}
.hasil-rating{font-weight:800}
.hasil-rating:after{content:attr(aria-label);display:flex;justify-content:center;font-weight:normal;opacity:.8}
.sudahRt{display:none;margin-top:10px}
.sudahRt:after{content:attr(aria-label)}
@media screen and (max-width:480px){
  .stars-svg{width:28px;height:28px}
  .lewis-ranting-box .stars{gap:10px}
  .hasil-rating{font-size:12px}
  .hasil-rating:after{font-size:11px;width:50px}
}

Memasukkan Kode HTML dan JavaScript

Terakhir salin kode di bawah ini dan letakkan di bawah kode <data:post.body/> jika sudah klik simpan.

<div class='rating-wrap'>
  <div aria-label='Apakah artikel ini bermanfaat' class='lewis-ranting-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 aria-label='suara' class='hasil-rating'/>
    </div>
    <div aria-label='anda sudah memberikan rating' class='sudahRt'/>
  </div>
</div>

<script>/*<![CDATA[*/
// Firebase Configuration - REPLACE WITH YOUR OWN CONFIG
const firebaseConfig = {
  apiKey: "AIzaSyDnJQGXOySfxij19Ys_bHlxQ-FtZ_QDPyQ",
  authDomain: "visitor-art.firebaseapp.com",
  databaseURL: "https://visitor-art-default-rtdb.firebaseio.com",
  projectId: "visitor-art",
  storageBucket: "visitor-art.firebasestorage.app",
  messagingSenderId: "477384590502",
  appId: "1:477384590502:web:9bdc3cc1aae072cfba6067"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const database = firebase.database();

document.addEventListener('DOMContentLoaded', function() {
  // Get current page URL and convert to a valid Firebase key
  const currentUrl = window.location.pathname;
  const pageId = currentUrl.replace(/[.#$\/\[\]]/g, '_');
  
  // Reference to the ratings data for this article
  const ratingsRef = database.ref('articleRatings/' + pageId);
  
  // Check if user has already rated this article
  const hasRated = localStorage.getItem('rated_' + pageId);
  
  // Get all star elements
  const stars = document.querySelectorAll('.stars-svg');
  const hasilRating = document.querySelector('.hasil-rating');
  const sudahRt = document.querySelector('.sudahRt');
  const starsContainer = document.querySelector('.stars');
  
  // Initialize ratings data
  let totalRating = 0;
  let totalVotes = 0;
  let averageRating = 0;
  
  // Listen for changes in the database
  ratingsRef.on('value', (snapshot) => {
    const ratingData = snapshot.val() || {total: 0, votes: 0};
    totalRating = ratingData.total || 0;
    totalVotes = ratingData.votes || 0;
    
    // Calculate average rating
    averageRating = totalVotes > 0 ? (totalRating / totalVotes).toFixed(1) : 0;
    
    // Update the display
    updateRatingDisplay();
    
    // Add schema markup for SEO
    addSchemaMarkup();
  });
  
  // Function to update the display based on current ratings
  function updateRatingDisplay() {
    hasilRating.textContent = averageRating > 0 ? averageRating : '-';
    hasilRating.setAttribute('aria-label', totalVotes + ' suara');
    
    // Clear all active stars first
    stars.forEach(s => s.classList.remove('active'));
    
    // Show the user's rating if they've rated
    if (hasRated) {
      const userRating = parseInt(localStorage.getItem('rating_' + pageId)) || 0;
      for (let i = 0; i < userRating; i++) {
        stars[i].classList.add('active');
      }
      
      // Show the user has rated message
      starsContainer.classList.add('pointer');
      sudahRt.style.display = 'block';
    }
    // Don't show any active stars for average rating if user hasn't rated
  }
  
  // If user has already rated, set up the display
  if (hasRated) {
    starsContainer.classList.add('pointer');
    sudahRt.style.display = 'block';
  } else {
    // Add hover effects and click events to stars
    stars.forEach((star, index) => {
      star.addEventListener('click', () => rateArticle(index + 1));
      
      // Add hover effects with a separate class
      star.addEventListener('mouseover', () => {
        for (let i = 0; i <= index; i++) {
          stars[i].classList.add('hovered');
        }
      });
      
      star.addEventListener('mouseout', () => {
        stars.forEach(s => s.classList.remove('hovered'));
      });
    });
  }
  
  // Function to rate the article
  function rateArticle(rating) {
    if (hasRated) return;
    
    // Update Firebase
    ratingsRef.transaction((currentData) => {
      const data = currentData || {total: 0, votes: 0};
      data.total = (data.total || 0) + rating;
      data.votes = (data.votes || 0) + 1;
      return data;
    });
    
    // Save to localStorage that user has rated
    localStorage.setItem('rated_' + pageId, 'true');
    localStorage.setItem('rating_' + pageId, rating);
    
    // Update UI to reflect rating
    stars.forEach((star, index) => {
      star.classList.remove('hovered');
      if (index < rating) {
        star.classList.add('active');
      }
    });
    
    starsContainer.classList.add('pointer');
    sudahRt.style.display = 'block';
  }
  
  // Add schema markup for rich snippets in search results
  function addSchemaMarkup() {
    // Remove any existing schema
    const existingSchema = document.getElementById('rating-schema');
    if (existingSchema) {
      existingSchema.remove();
    }
    
    // Only add schema if there are ratings
    if (totalVotes > 0) {
      const schema = document.createElement('script');
      schema.id = 'rating-schema';
      schema.type = 'application/ld+json';
      
      const schemaData = {
        "@context": "https://schema.org/",
        "@type": "Article",
        "name": document.title,
        "url": window.location.href,
        "aggregateRating": {
          "@type": "AggregateRating",
          "ratingValue": averageRating,
          "bestRating": "5",
          "worstRating": "1",
          "ratingCount": totalVotes
        }
      };
      
      schema.textContent = JSON.stringify(schemaData);
      document.head.appendChild(schema);
    }
  }
});
/*]]>*/</script>

Konfigurasi Firebase

Untuk menggunakan widget ini, Anda perlu membuat project di Firebase dan mengganti konfigurasi Firebase di kode JavaScript dengan konfigurasi Anda sendiri:

Langkah-langkah Konfigurasi:

1. Kunjungi console.firebase.google.com

2. Buat project baru atau pilih project yang sudah ada

3. Pada menu Build, pilih Realtime Database

4. Klik tab Rules, lalu ganti semua isi kode menjadi:

{
{
  "rules": {
    "articleRatings": {
      "$articleId": {
        ".read": true,
        ".write": true
      }
    }
  }
}

5. Kembali ke halaman utama project

6. Di bagian Project Overview, klik Add Web App

7. Salin konfigurasi Firebase (apiKey, authDomain, databaseURL, dll.)

8. Ganti konfigurasi di kode Anda dengan milik Anda sendiri

Fitur-fitur Widget Rating

Rating disimpan di Firebase database
Menggunakan localStorage untuk menghindari rating ganda
Support responsif untuk tampilan mobile
Menambahkan schema markup untuk SEO
Tampilan bintang yang menarik dengan efek hover

Apakah Widget ini Berguna?

Meningkatkan Engagement Pengunjung

Widget rating bintang ini membantu meningkatkan interaksi pengunjung dengan konten blog Anda. Dengan adanya fitur interaktif, pembaca akan merasa lebih terlibat dengan konten yang Anda sajikan. Hal ini dapat meningkatkan durasi kunjungan dan menurunkan bounce rate pada blog Anda.

Feedback Langsung dan Terukur

Memberikan umpan balik real-time tentang kualitas artikel yang Anda publikasikan. Dengan begitu, Anda dapat mengetahui konten mana yang paling disukai oleh pembaca dan mengoptimalkan strategi konten berdasarkan preferensi mereka. Rating yang tinggi menunjukkan bahwa konten Anda diapresiasi, sementara rating rendah memberi sinyal untuk perbaikan.

Peningkatan SEO dan Visibilitas

Widget ini menambahkan schema markup untuk SEO yang dapat meningkatkan visibilitas blog di hasil pencarian Google. Rich snippets yang menampilkan rating bintang di hasil pencarian cenderung mendapatkan click-through rate yang lebih tinggi, sehingga berpotensi mendatangkan lebih banyak traffic ke blog Anda. Google juga cenderung menampilkan konten yang memiliki engagement tinggi di posisi yang lebih baik.

Anti-Spam dengan Teknologi Canggih

Widget ini mencegah spam rating berkat fitur localStorage yang membatasi satu rating per pengunjung. Pembaca tidak bisa memberikan rating berulang kali untuk manipulasi skor, sehingga hasil rating yang Anda dapatkan lebih akurat dan mencerminkan pendapat pembaca yang sebenarnya. Teknologi ini menjamin kredibilitas sistem rating pada blog Anda.

Analisis Konten yang Komprehensif

Data rating disimpan secara terpusat di Firebase, memungkinkan Anda melakukan analisis kualitas konten secara menyeluruh. Anda dapat mengidentifikasi pola, tren, dan insights dari rating yang diberikan pembaca untuk mengembangkan konten yang lebih sesuai dengan kebutuhan target audiens Anda. Firebase juga menawarkan kemudahan dalam mengakses dan mengolah data tersebut.

Tampilan Responsif Multi-Platform

Widget rating bintang ini dirancang secara responsif sehingga tetap terlihat menarik di berbagai ukuran layar, baik desktop maupun mobile. Pengalaman pengguna yang konsisten di semua perangkat akan meningkatkan reputasi blog Anda sebagai platform yang profesional dan user-friendly.

Instalasi dan Konfigurasi Mudah

Meskipun memiliki fitur yang canggih, widget ini sangat mudah dipasang dengan mengikuti langkah-langkah yang telah disediakan. Anda tidak perlu memiliki keahlian coding yang mendalam untuk mengimplementasikannya di blog Anda. Proses konfigurasi Firebase yang straightforward juga memudahkan Anda dalam mengelola data rating.

Peningkatan Kredibilitas Blog

Dengan menampilkan rating dari pembaca, blog Anda akan terlihat lebih kredibel dan terpercaya. Calon pembaca cenderung lebih yakin dengan konten yang telah mendapatkan penilaian positif dari pembaca lain. Hal ini dapat membangun reputasi yang baik untuk blog Anda dalam jangka panjang.

Ok jadi sekian widget stars rating blogger yang bisa saya bagikan kali ini, terima kasih telah berkunjung dan semoga bermanfaat.

Baca juga :

Lewis-Kull

Widget Rating Bintang untuk Blogger

Cara Memasang Widget Rating Bintang

Konfigurasi Firebase

Langkah-langkah Konfigurasi:

Fitur-fitur Widget Rating

Apakah Widget ini Berguna?

Meningkatkan Engagement Pengunjung

Feedback Langsung dan Terukur

Peningkatan SEO dan Visibilitas

Anti-Spam dengan Teknologi Canggih

Analisis Konten yang Komprehensif

Tampilan Responsif Multi-Platform

Instalasi dan Konfigurasi Mudah

Peningkatan Kredibilitas Blog

إرسال تعليق

Script Auto Update Postingan ke HTML Blogger

Teknologi 5G Membuka Peluang Ekonomi Baru

Panjang Ideal Postingan Blog untuk SEO yang Optimal

Cara Efektif Mempercepat Loading Blog Terbaru 2024

Script Anti Bom Klik Terbaru - Sesuai Dengan Kebijakan Adsense

Pendaftaran PPDB SMP Swasta Katolik Budi Murni 1 Medan 2025/2026 – Gratis Uang Pendaftaran!

Cara Setting APN Axis untuk Internet Cepat dan Stabil

Cara Setting APN Telkomsel untuk Internet Cepat dan Stabil

Recent Comments