Cara Membuat Sistem Vote Bintang Interaktif Postingan di Blog Anda

Memberikan kesempatan kepada pembaca untuk menilai konten Anda adalah cara yang bagus untuk meningkatkan interaksi dan mendapatkan umpan balik berharga. Salah satu cara paling populer untuk melakukannya adalah dengan sistem vote bintang. Artikel ini akan memandu Anda langkah demi langkah dalam membuat sistem vote bintang interaktif yang dapat Anda terapkan di blog Anda, khususnya bagi pengguna platform seperti Blogger yang mungkin menghadapi tantangan parsing XML.

Mengapa Sistem Vote Bintang Penting?

Sistem vote bintang memungkinkan pembaca untuk dengan cepat dan mudah memberikan penilaian terhadap kualitas postingan Anda. Ini tidak hanya memberikan indikasi popularitas atau kualitas konten Anda, tetapi juga dapat:

Meningkatkan Interaksi: Pembaca merasa lebih terlibat dengan konten Anda.
Memberikan Umpan Balik: Anda dapat melihat postingan mana yang paling disukai atau membutuhkan perbaikan.
Meningkatkan SEO (Tidak Langsung): Konten yang interaktif dan relevan cenderung memiliki waktu tinggal yang lebih lama, yang bisa menjadi sinyal positif bagi mesin pencari.

Alat yang Kita Gunakan

Kita akan membangun sistem ini menggunakan kombinasi teknologi web standar:

HTML: Untuk struktur dasar elemen bintang dan postingan blog.
CSS: Untuk gaya visual bintang, efek hover, dan tampilan yang dipilih.
JavaScript: Untuk fungsionalitas interaktif, seperti mendeteksi klik, mengubah tampilan bintang, dan menampilkan pesan.
Font Awesome: Untuk ikon bintang yang mudah digunakan dan skalabel.

Struktur Dasar HTML Postingan Blog

Pertama, mari kita lihat struktur HTML dasar untuk postingan blog yang akan kita gunakan sebagai target penyisipan bintang. Ini adalah struktur yang umum ditemukan di banyak platform blog:

Ini adalah elemen yang ada di blog saya

<div class="blog-post">
    <h3 class="post-title">Judul Postingan Anda</h3>
    <div class="post-info">
        <span class="author-info">
            by
            Nama Penulis
        </span>
        <time datetime="YYYY-MM-DDTHH:MM:SS+07:00" title="YYYY-MM-DDTHH:MM:SS+07:00">
            Tanggal Postingan
        </time>
        </div>
</div>

Klik tombol "Salin" di atas untuk menyalin konten ke clipboard Anda!

Kita akan menyisipkan elemen vote bintang di dalam div dengan claas post-info.

Gaya Visual dengan CSS

CSS akan mengontrol bagaimana bintang-bintang terlihat. Kita akan mengatur warna default (abu-abu), warna saat di-hover (emas), dan warna saat dipilih (emas).

Tambahkan kode CSS ini ke bagian <head> template blog Anda atau ke file CSS eksternal Anda:

CSS

/* Mengatur font Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
    /* Tambahkan margin dan background-color sesuai kebutuhan blog Anda */
}

/* Kelas untuk wadah postingan blog */
.blog-post {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Gaya untuk wadah informasi postingan (penulis, tanggal, bintang) */
.post-info {
    display: flex;
    align-items: center; /* Mensejajarkan secara vertikal */
    flex-wrap: wrap;
    margin-top: 5px;
}

/* Gaya untuk judul postingan */
.post-title {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 5px;
}

/* Gaya untuk penulis dan tanggal postingan */
.author-info,
.post-info time {
    font-size: 0.9em;
    color: #757575;
    margin-right: 5px;
}

/* Gaya untuk wadah bintang */
.star-rating {
    display: flex;
    align-items: center;
    margin-left: 10px;
    cursor: pointer; /* Menunjukkan bahwa bintang dapat diklik */
    margin-top: -2px; /* Penyesuaian untuk mensejajarkan bintang */
}

/* Gaya untuk setiap bintang */
.star-rating .fa-star {
    color: #ccc; /* Warna default (abu-abu) */
    font-size: 1.2em;
    margin-left: 2px;
    transition: color 0.2s ease; /* Animasi halus */
}

/* Gaya untuk bintang yang di-hover */
.star-rating .fa-star:hover,
.star-rating .fa-star:hover ~ .fa-star {
    color: gold; /* Bintang akan berwarna emas saat di-hover */
}

/* Gaya untuk bintang yang dipilih (rating) */
.star-rating .fa-star.selected {
    color: gold; /* Bintang yang dipilih akan berwarna emas */
}

/* Gaya untuk pesan rating */
.rating-message {
    margin-left: 10px;
    font-size: 0.85em;
    color: #555;
}

/* Gaya untuk modal pesan */
.modal {
    display: none; /* Sembunyikan secara default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

Klik tombol "Salin" di atas untuk menyalin konten ke clipboard Anda!

Fungsionalitas Interaktif dengan JavaScript

Bagian ini adalah inti dari sistem vote bintang kita. JavaScript akan secara otomatis menyisipkan bintang ke setiap postingan dan menangani interaksi pengguna.

Tambahkan kode JavaScript ini di bagian akhir <body> template blog Anda, tepat sebelum tag </body> penutup. Penting: Untuk platform seperti Blogger yang memproses template sebagai XML, Anda harus membungkus kode JavaScript Anda dalam <![CDATA[ ... ]]> untuk menghindari kesalahan parsing.

JavaScript

<script type="text/javascript">
//<![CDATA[
    document.addEventListener('DOMContentLoaded', function() {
        const starRatings = document.querySelectorAll('.star-rating');
        const modal = document.getElementById('myModal');
        const modalMessage = document.getElementById('modalMessage');
        const closeButton = document.querySelector('.close-button');

        function showModal(message) {
            modalMessage.textContent = message;
            modal.style.display = 'flex';
        }

        function hideModal() {
            modal.style.display = 'none';
        }

        closeButton.addEventListener('click', hideModal);
        window.addEventListener('click', function(event) {
            if (event.target == modal) {
                hideModal();
            }
        });

        starRatings.forEach(starRatingContainer => {
            const stars = starRatingContainer.querySelectorAll('.fa-star');
            const postId = starRatingContainer.dataset.postId;
            const messageSpan = document.getElementById(`message-${postId}`);

            function updateStars(rating) {
                stars.forEach(star => {
                    if (parseInt(star.dataset.value) <= rating) {
                        star.classList.add('selected');
                    } else {
                        star.classList.remove('selected');
                    }
                });
            }

            updateStars(0); // Inisialisasi bintang (tidak ada yang dipilih)

            stars.forEach(star => {
                star.addEventListener('click', function() {
                    const rating = parseInt(this.dataset.value);
                    updateStars(rating);
                    if (messageSpan) {
                        messageSpan.textContent = `Anda memberi ${rating} bintang.`;
                    }
                    showModal(`Terima kasih! Anda memberi ${rating} bintang untuk postingan ini.`);
                    // Di sini Anda akan mengirim rating ke server Anda (misalnya, via Fetch API)
                    console.log(`Post ID: ${postId}, Rating: ${rating}`);
                });

                star.addEventListener('mouseover', function() {
                    const hoverRating = parseInt(this.dataset.value);
                    stars.forEach(s => {
                        if (parseInt(s.dataset.value) <= hoverRating) {
                            s.style.color = 'gold';
                        } else {
                            if (!s.classList.contains('selected')) {
                                s.style.color = '#ccc';
                            }
                        }
                    });
                });

                star.addEventListener('mouseout', function() {
                    const currentRating = starRatingContainer.querySelector('.fa-star.selected') ?
                                            parseInt(starRatingContainer.querySelector('.fa-star.selected:last-child').dataset.value) : 0;
                    updateStars(currentRating);
                });
            });
        });
    });
//]]>
</script>

Klik tombol "Salin" di atas untuk menyalin konten ke clipboard Anda!

Integrasi ke Template Blogger Anda

Berikut adalah langkah-langkah spesifik untuk mengintegrasikan ini ke template Blogger Anda:

1. Tambahkan Font Awesome:

Di bagian <head> template Blogger Anda, pastikan ada baris ini untuk memuat ikon bintang:

Font bintang

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>

Klik tombol "Salin" di atas untuk menyalin konten ke clipboard Anda!

3. Sisipkan Kode Bintang di postInfo:

Cari b:includable id='postInfo' di template Blogger Anda. Di dalamnya, setelah baris yang memanggil tanggal (<b:include name='postInfoPostDate'/>), kalo saya meletakannya di bawah </b:loop>. Sisipkan kode HTML berikut:

Kode bintang

<div class="star-rating" expr:data-post-id='data:post.id'>
    <i class="fas fa-star" data-value="1"></i>
    <i class="fas fa-star" data-value="2"></i>
    <i class="fas fa-star" data-value="3"></i>
    <i class="fas fa-star" data-value="4"></i>
    <i class="fas fa-star" data-value="5"></i>
</div>
<span class="rating-message" expr:id='"message-" + data:post.id'></span>

Klik tombol "Salin" di atas untuk menyalin konten ke clipboard Anda!

expr:data-post-id='data:post.id' akan memberikan ID unik untuk setiap postingan, memungkinkan JavaScript melacak rating untuk postingan yang berbeda.
expr:id='"message-" + data:post.id' akan membuat ID unik untuk elemen pesan rating.

4. Sisipkan Kode Modal:

Salin seluruh blok HTML untuk modal:

Kode Pesan

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close-button">✕</span>
        <p id="modalMessage"></p>
    </div>
</div>

Klik tombol "Salin" di atas untuk menyalin konten ke clipboard Anda!

Tempelkan kode ini di bagian akhir template Blogger Anda, tepat sebelum tag </body> atau tepat di atas JavaScript yang sudah anda lentakkan di awal.

Kustomisasi dan Pengembangan Lebih Lanjut

Warna dan Ukuran: Anda dapat dengan mudah mengubah warna (gold, #ccc) dan ukuran (font-size) bintang di bagian CSS.
Pesan Rating: Ubah teks pesan di JavaScript sesuai keinginan Anda.
Penyimpanan Rating: Saat ini, rating hanya ditampilkan di browser. Untuk menyimpan rating secara permanen, Anda perlu mengintegrasikannya dengan backend (misalnya, menggunakan Firebase Firestore, Google Sheets API, atau sistem database lainnya) di mana console.log() berada. Ini akan melibatkan permintaan fetch() atau XMLHttpRequest ke server Anda.
Tampilan Rating Rata-rata: Anda bisa mengambil rating yang disimpan dari backend dan menampilkannya sebagai rating rata-rata saat halaman dimuat.

Kesimpulan

Dengan mengikuti langkah-langkah ini, Anda kini memiliki sistem vote bintang interaktif yang berfungsi penuh di blog Anda. Ini adalah cara yang efektif untuk meningkatkan keterlibatan pembaca dan mengumpulkan umpan balik berharga tentang konten Anda. Selamat mencoba!

Tanda tangan

Allo Widget

Cara Membuat Sistem Vote Bintang Interaktif Postingan di Blog Anda

Mengapa Sistem Vote Bintang Penting?

Alat yang Kita Gunakan

Struktur Dasar HTML Postingan Blog

Ini adalah elemen yang ada di blog saya

CSS

Fungsionalitas Interaktif dengan JavaScript

JavaScript

Integrasi ke Template Blogger Anda

Font bintang

Kode bintang

Kode Pesan

Kustomisasi dan Pengembangan Lebih Lanjut

Kesimpulan

Posting Komentar untuk "Cara Membuat Sistem Vote Bintang Interaktif Postingan di Blog Anda"

Posting Komentar

Jago Desain