Begini Cara Membuat Tombol Sharing Untuk Blog / Web Bagi Pemula

Deskripsi di sini

Berbagi postingan dari website atau blog kamu ke media sosial bisa meningkatkan jumlah pengunjung. Di artikel ini, kita akan membuat tombol berbagi postingan yang dilengkapi dengan counter untuk menunjukkan berapa kali postingan tersebut telah dibagikan. Yuk, ikuti langkah-langkah berikut!

Langkah 1: Siapkan HTML Dasar

Mulai dengan membuat struktur HTML dasar. Tambahkan tombol berbagi untuk beberapa media sosial.

<div class="share-buttons">

    <a href="#" class="share-button" id="facebook-share">Bagikan di Facebook</a>

    <a href="#" class="share-button" id="twitter-share">Bagikan di Twitter</a>

</div>

<div class="counter">Total dibagikan: <span id="share-count">0</span> kali</div>

Langkah 2: Tambahkan CSS untuk Tampilan

Tambahkan beberapa CSS untuk membuat tombol berbagi terlihat menarik.

<style>

.share-buttons {

    display: flex;

    gap: 10px;

}

.share-button {

    padding: 10px;

    background-color: #007bff;

    color: white;

    text-decoration: none;

    border-radius: 5px;

}

.counter {

    margin-top: 10px;

}

</style>

Langkah 3: Tambahkan Fungsi JavaScript untuk Menghitung Berapa Kali Dibagikan

Tambahkan JavaScript untuk menghitung jumlah klik pada tombol berbagi dan memperbarui counter.

<script>

document.addEventListener('DOMContentLoaded', (event) => {

    let shareCount = 0;

    document.getElementById('facebook-share').addEventListener('click', function(event) {

        event.preventDefault();

        shareCount++;

        document.getElementById('share-count').textContent = shareCount;

        alert('Dibagikan di Facebook');

    });

    document.getElementById('twitter-share').addEventListener('click', function(event) {

        event.preventDefault();

        shareCount++;

        document.getElementById('share-count').textContent = shareCount;

        alert('Dibagikan di Twitter');

    });

});

</script>

Langkah 4: Uji Hasilnya

Simpan dan buka file HTML kamu di browser. Klik tombol berbagi dan perhatikan bagaimana counter bertambah setiap kali tombol diklik.

Selamat! Kamu telah berhasil membuat tombol berbagi postingan yang dilengkapi counter. Semoga bermanfaat untuk meningkatkan interaksi di website atau blog kamu!

Masukkan-list-keyword-disini,