Cara Mudah Membuat Widget Recent Comment pada Blog

Widget Recent Comment adalah salah satu fitur yang sangat berguna untuk blog Anda. Dengan widget ini, Anda dapat menampilkan komentar terbaru yang diterima di blog Anda, sehingga pembaca dapat melihat interaksi terbaru dan terlibat lebih aktif. Widget ini juga membantu meningkatkan keterlibatan pembaca dan membuat blog Anda terlihat lebih dinamis. Dalam artikel ini, kita akan membahas langkah-langkah mudah untuk membuat widget Recent Comment pada blog menggunakan platform Blogspot.

membuat recent comment blogger

I. Mengapa Menggunakan Widget Recent Comment?

1. Meningkatkan Keterlibatan Pembaca

Dengan menampilkan komentar terbaru, Anda dapat mendorong pembaca untuk lebih aktif berpartisipasi dalam diskusi. Pembaca akan merasa lebih dihargai ketika komentar mereka ditampilkan di halaman utama blog.

2. Menunjukkan Aktivitas Blog

Widget Recent Comment menunjukkan bahwa blog Anda aktif dan memiliki pembaca yang terlibat. Ini dapat menarik lebih banyak pengunjung dan membuat mereka lebih tertarik untuk berinteraksi dengan konten Anda.

3. Memudahkan Navigasi

Dengan menampilkan komentar terbaru, pembaca dapat dengan mudah menemukan diskusi yang sedang berlangsung dan bergabung dalam percakapan. Ini juga membantu mereka menemukan postingan yang mungkin belum mereka baca.

 

II. Langkah-langkah Membuat Widget Recent Comment

1. Masuk ke Dashboard Blogspot

Langkah pertama adalah masuk ke akun Blogspot Anda. Jika Anda belum memiliki akun, Anda dapat membuatnya dengan mengikuti langkah-langkah pendaftaran di blogger.com.

2. Buka Menu Tata Letak

Setelah masuk ke dashboard Blogspot, buka menu “Tata Letak” (Layout). Di sini, Anda dapat mengatur tata letak blog Anda dan menambahkan widget baru.

3. Tambahkan Gadget HTML/JavaScript

Untuk menambahkan widget Recent Comment, Anda perlu menambahkan gadget HTML/JavaScript. Berikut adalah langkah-langkahnya:

1. Klik “Tambahkan Gadget” (Add Gadget) di area tata letak yang Anda inginkan.
2. Pilih “HTML/JavaScript” dari daftar gadget yang tersedia.
3. Masukkan judul untuk widget Anda, misalnya “Komentar Terbaru”.

4. Salin dan Tempel Kode Widget

Berikut adalah kode HTML/JavaScript yang dapat Anda gunakan untuk membuat widget Recent Comment:

<script type="text/javascript">

var jumlahKomentar = 5; // Jumlah komentar yang ingin ditampilkan

var panjangKomentar = 100; // Panjang maksimal komentar yang ditampilkan

var urlBlog = "https://namablog.blogspot.com"; // Ganti dengan URL blog Anda

 

function tampilkanKomentar(json) {

    for (var i = 0; i < jumlahKomentar; i++) {

        var komentar = json.feed.entry[i];

        var penulis = komentar.author[0].name.$t;

        var isiKomentar = komentar.content.$t;

        var linkKomentar = komentar.link[2].href;

        if (isiKomentar.length > panjangKomentar) {

            isiKomentar = isiKomentar.substring(0, panjangKomentar) + "...";

        }

        document.write('<div class="recent-comment"><a href="' + linkKomentar + '">' + penulis + ':</a> ' + isiKomentar + '</div>');

    }

}

 

document.write('<script src="' + urlBlog + '/feeds/comments/default?alt=json-in-script&callback=tampilkanKomentar"><\/script>');

</script>

5. Simpan dan Lihat Hasilnya

Setelah menempelkan kode di atas, klik “Simpan” untuk menyimpan gadget. Kembali ke halaman utama blog Anda dan lihat hasilnya. Widget Recent Comment Anda sekarang sudah aktif dan menampilkan komentar terbaru.

 

III. Kustomisasi Widget Recent Comment

Anda dapat menyesuaikan widget Recent Comment sesuai dengan kebutuhan dan preferensi Anda. Berikut adalah beberapa cara untuk mengkustomisasi widget:

1. Mengubah Jumlah Komentar yang Ditampilkan

Anda dapat mengubah jumlah komentar yang ditampilkan dengan mengubah nilai variabel jumlahKomentar dalam kode. Misalnya, jika Anda ingin menampilkan 10 komentar terbaru, ubah nilai jumlahKomentar menjadi 10.

2. Mengubah Panjang Komentar

Anda dapat mengatur panjang maksimal komentar yang ditampilkan dengan mengubah nilai variabel panjangKomentar. Misalnya, jika Anda ingin menampilkan 200 karakter pertama dari setiap komentar, ubah nilai panjangKomentar menjadi 200.

3. Mengubah Tampilan Widget

Anda dapat mengubah tampilan widget dengan menambahkan CSS kustom. Berikut adalah contoh CSS yang dapat Anda gunakan untuk mengubah tampilan widget:

.recent-comment {

    margin-bottom: 10px;

    padding: 10px;

    border-bottom: 1px solid #ddd;

}

 

.recent-comment a {

    font-weight: bold;

    color: #333;

    text-decoration: none;

}

 

.recent-comment a:hover {

    text-decoration: underline;

}

Tambahkan kode CSS di atas ke dalam template blog Anda untuk mengubah tampilan widget Recent Comment.

 

IV. Mengatasi Masalah Umum

1. Widget Tidak Menampilkan Komentar

Jika widget tidak menampilkan komentar, pastikan bahwa URL blog yang Anda masukkan dalam kode sudah benar. Periksa juga apakah blog Anda memiliki komentar yang cukup untuk ditampilkan.

2. Komentar Tidak Terpotong dengan Benar

Jika komentar tidak terpotong dengan benar, pastikan bahwa nilai panjangKomentar sudah diatur dengan benar. Anda juga dapat menyesuaikan kode JavaScript untuk mengatur cara pemotongan komentar.

3. Tampilan Widget Tidak Sesuai

Jika tampilan widget tidak sesuai dengan yang Anda inginkan, Anda dapat menyesuaikan CSS kustom sesuai dengan kebutuhan Anda. Pastikan untuk memeriksa kode CSS dan HTML untuk memastikan tidak ada kesalahan.

 

V. Mengoptimalkan Widget Recent Comment

Setelah Anda berhasil menambahkan widget Recent Comment ke blog Anda, langkah berikutnya adalah mengoptimalkannya agar lebih efektif dan menarik bagi pembaca. Berikut adalah beberapa tips untuk mengoptimalkan widget Recent Comment:

1. Menambahkan Avatar Penulis Komentar

Menambahkan avatar penulis komentar dapat membuat widget Recent Comment lebih menarik dan personal. Berikut adalah cara menambahkan avatar penulis komentar:

1. Tambahkan Kode untuk Menampilkan Avatar: Modifikasi kode JavaScript untuk menampilkan avatar penulis komentar. Berikut adalah contoh kode yang telah dimodifikasi:

<script type="text/javascript">

var jumlahKomentar = 5; // Jumlah komentar yang ingin ditampilkan

var panjangKomentar = 100; // Panjang maksimal komentar yang ditampilkan

var urlBlog = "https://namablog.blogspot.com"; // Ganti dengan URL blog Anda

 

function tampilkanKomentar(json) {

    for (var i = 0; i < jumlahKomentar; i++) {

        var komentar = json.feed.entry[i];

        var penulis = komentar.author[0].name.$t;

        var avatar = komentar.author[0].gd$image.src;

        var isiKomentar = komentar.content.$t;

        var linkKomentar = komentar.link[2].href;

        if (isiKomentar.length > panjangKomentar) {

            isiKomentar = isiKomentar.substring(0, panjangKomentar) + "...";

        }

        document.write('<div class="recent-comment"><img src="' + avatar + '" alt="' + penulis + '" class="avatar"><a href="' + linkKomentar + '">' + penulis + ':</a> ' + isiKomentar + '</div>');

    }

}

 

document.write('<script src="' + urlBlog + '/feeds/comments/default?alt=json-in-script&callback=tampilkanKomentar"><\/script>');

</script>

2. Tambahkan CSS untuk Avatar: Tambahkan CSS untuk mengatur tampilan avatar. Berikut adalah contoh CSS yang dapat Anda gunakan:

.recent-comment {

    margin-bottom: 10px;

    padding: 10px;

    border-bottom: 1px solid #ddd;

    display: flex;

    align-items: center;

}

 

.recent-comment .avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-right: 10px;

}

 

.recent-comment a {

    font-weight: bold;

    color: #333;

    text-decoration: none;

}

 

.recent-comment a:hover {

    text-decoration: underline;

}

2. Menambahkan Tanggal Komentar

Menambahkan tanggal komentar dapat memberikan konteks tambahan bagi pembaca. Berikut adalah cara menambahkan tanggal komentar:

1. Modifikasi Kode untuk Menampilkan Tanggal: Modifikasi kode JavaScript untuk menampilkan tanggal komentar. Berikut adalah contoh kode yang telah dimodifikasi:

<script type="text/javascript">

var jumlahKomentar = 5; // Jumlah komentar yang ingin ditampilkan

var panjangKomentar = 100; // Panjang maksimal komentar yang ditampilkan

var urlBlog = "https://namablog.blogspot.com"; // Ganti dengan URL blog Anda

 

function tampilkanKomentar(json) {

    for (var i = 0; i < jumlahKomentar; i++) {

        var komentar = json.feed.entry[i];

        var penulis = komentar.author[0].name.$t;

        var avatar = komentar.author[0].gd$image.src;

        var isiKomentar = komentar.content.$t;

        var linkKomentar = komentar.link[2].href;

        var tanggalKomentar = new Date(komentar.published.$t).toLocaleDateString();

        if (isiKomentar.length > panjangKomentar) {

            isiKomentar = isiKomentar.substring(0, panjangKomentar) + "...";

        }

        document.write('<div class="recent-comment"><img src="' + avatar + '" alt="' + penulis + '" class="avatar"><a href="' + linkKomentar + '">' + penulis + ':</a> ' + isiKomentar + '<br><small>' + tanggalKomentar + '</small></div>');

    }

}

 

document.write('<script src="' + urlBlog + '/feeds/comments/default?alt=json-in-script&callback=tampilkanKomentar"><\/script>');

</script>

2. Tambahkan CSS untuk Tanggal: Tambahkan CSS untuk mengatur tampilan tanggal. Berikut adalah contoh CSS yang dapat Anda gunakan:

.recent-comment {

    margin-bottom: 10px;

    padding: 10px;

    border-bottom: 1px solid #ddd;

    display: flex;

    flex-direction: column;

}

 

.recent-comment .avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-right: 10px;

}

 

.recent-comment a {

    font-weight: bold;

    color: #333;

    text-decoration: none;

}

 

.recent-comment a:hover {

    text-decoration: underline;

}

 

.recent-comment small {

    color: #999;

    font-size: 0.9em;

}

3. Menambahkan Efek Hover

Menambahkan efek hover dapat membuat widget Recent Comment lebih interaktif dan menarik. Berikut adalah cara menambahkan efek hover:

1. Tambahkan CSS untuk Efek Hover: Tambahkan CSS untuk mengatur efek hover. Berikut adalah contoh CSS yang dapat Anda gunakan:

.recent-comment {

    margin-bottom: 10px;

    padding: 10px;

    border-bottom: 1px solid #ddd;

    display: flex;

    align-items: center;

    transition: background-color 0.3s;

}

 

.recent-comment:hover {

    background-color: #f9f9f9;

}

 

.recent-comment .avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-right: 10px;

}

 

.recent-comment a {

    font-weight: bold;

    color: #333;

    text-decoration: none;

}

 

.recent-comment a:hover {

    text-decoration: underline;

}

 

.recent-comment small {

    color: #999;

    font-size: 0.9em;

}

Dengan menambahkan efek hover, widget Recent Comment akan memberikan pengalaman pengguna yang lebih baik dan membuat blog Anda terlihat lebih profesional.

VI. Kesimpulan

Membuat widget Recent Comment pada blog menggunakan Blogspot adalah cara yang efektif untuk meningkatkan keterlibatan pembaca dan menunjukkan aktivitas blog Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan widget Recent Comment ke blog Anda dan menyesuaikannya sesuai dengan kebutuhan Anda. Selain itu, dengan mengoptimalkan widget menggunakan avatar, tanggal komentar, dan efek hover, Anda dapat membuat widget Recent Comment lebih menarik dan interaktif.