Skip to main content

Cara Membuat Dan Menampilkan Forum Diskusi Di Blogger

CaraNgeblog.Com - Forum diskusi didalam Blogger dapat menjadi fitur yang sangat berharga untuk meningkatkan interaksi dan keterlibatan pembaca di blog Anda. Di Blogger, Anda dapat menambahkan widget forum diskusi dengan cara yang relatif sederhana, dan dalam artikel ini, kami akan memandu Anda melalui langkah-langkah untuk membuat dan menampilkan forum diskusi menggunakan widget. Kami juga akan membahas cara mengintegrasikan forum diskusi online dalam blog Anda.


Widget Forum Diskusi Online Di Blogger/Blogspot
Cara Membuat Widget Forum Diskusi di Blogger

 Berikut adalah cara membuat forum diskusi online didalam Blogspot mirip blog CaraNgeblog.com

1.1 Memahami Konsep Widget Forum Diskusi

Widget forum diskusi adalah elemen yang dapat Anda tambahkan ke sidebar atau bagian lain dari blog Anda untuk memungkinkan pembaca berkomentar atau berdiskusi. Widget ini umumnya menampilkan komentar dari pembaca atau menyediakan form untuk menambahkan komentar baru.

1.2 Membuat Halaman Statistik Forum Diskusi Blogger 

Setelah kamu memahami tentang konsep forum diskusi didalam Blogger/blogspot. Langkah berikutnya agar forum diskusi bisa berfungsi didalam Blogger kamu. Maka kamu harus membuat halaman Statistik terlebih dahulu di blogspot kamu.

Halaman Statistik ini berfungsi untuk tempat, wadah diskusi yang dilakukan oleh pengunjung blogger/blogspot kamu.

1.2.1 Cara Membuat Halaman Statistik Forum Diskusi Di Blogger 

Cara membuat halaman Statistik Forum diskusi  untuk blogger sangat mudah. Kamu hanya cukup membuat postingan halaman baru di blogspot kamu.
  • Masuk ke page ( halaman ).
  • Buat postingan halaman baru.
  • Kamu bebas berkreasi kata" apa yang harus ditampilkan di postingan statistik halaman diskusi blogger kamu .
Contoh :
Forum Diskusi Di Blogger


1.3 Menambahkan Widget Forum Diskusi Di Blogspot Menggunakan Kode Kustom

Jika Anda ingin membuat widget forum diskusi khusus, Anda bisa melakukannya dengan menambahkan kode HTML dan JavaScript ke blog Anda. Berikut adalah langkah-langkah untuk membuat dan menampilkan widget forum diskusi:

  • Buka Dashboard Blogger Anda: Masuk ke akun Blogger Anda dan pilih blog yang ingin Anda modifikasi.
  • Akses Tata Letak: Klik pada menu "Tata Letak" di sidebar kiri. Ini akan menampilkan struktur tata letak blog Anda.
  • Tambahkan Gadget Baru: Klik pada tombol "Tambah Gadget" di area di mana Anda ingin menampilkan forum diskusi. Pilih opsi "HTML/JavaScript" dari daftar gadget yang tersedia.
  • Masukkan Kode Widget: Salin dan tempel kode berikut ke dalam kotak "Konten" pada gadget HTML/JavaScript. Kode ini akan menampilkan forum diskusi di blog Anda:

     <h1>Forum Diskusi Blogger</h1>

     <style>

         #comments-sidebar {

             font-family: Arial, sans-serif;

             margin: 0;

             padding: 0;

         }

         .comments-list {

             list-style: none;

             padding: 0;

             margin: 0;

         }

         .comment-item {

             padding: 10px;

             border-radius: 10px;

             background-color: #86a7b7; /* Background warna box komentar */

             margin-bottom: 10px;

             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

             width: 90%;

             margin-left: 5%;

             max-width: 600px;

         }

         .comment-content {

             max-width: 100%;

             margin-left: 5%;

             width: 95%;

         }

         .comment-author {

             font-weight: bold;

             color: #fff; /* Warna teks nama pengguna */

             margin-bottom: 5px;

             display: block;

         }

         .comment-text {

             margin: 5px 0;

             font-size: 14px;

             color: #fff; /* Warna teks komentar */

         }

         .comment-date {

             font-size: 12px;

             color: #d9d9d9; /* Warna teks tanggal komentar */

         }

     </style>


     <!-- Kontainer untuk menampilkan komentar -->

     <div id="comments-sidebar">

         Loading comments...

     </div>


     <a class="button-keren" href="https://www.carangeblog.com/p/forum-diskusi-blogger-carangeblog.html">Diskusi Disini</a>


     <script>

         // Ganti postID dengan ID postingan yang diberikan

         var postID = "8988689094275844279"; 

         var feedUrl = `https://www.carangeblog.com/feeds/${postID}/comments/default?alt=atom`; 

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


         function loadComments() {

             fetch(feedUrl)

             .then(response => {

                 if (!response.ok) {

                     throw new Error('Network response was not ok: ' + response.statusText);

                 }

                 return response.text();

             })

             .then(str => {

                 const data = (new window.DOMParser()).parseFromString(str, "text/xml");

                 var items = data.querySelectorAll("entry");

                 var container = document.getElementById("comments-sidebar");

                 var html = "<ul class='comments-list'>";

                 var count = 0;

                 items.forEach(entry => {

                     if (count < numComments) {

                         var author = entry.querySelector("author name").textContent;

                         var updated = new Date(entry.querySelector("updated").textContent).toLocaleDateString();

                         var content = entry.querySelector("content").textContent; // Menampilkan seluruh teks komentar


                         // Tampilkan format komentar

                         html += `

                         <li class='comment-item'>

                             <div class='comment-content'>

                                 <strong class='comment-author'>${author}</strong>

                                 <p class='comment-text'>${content}</p>

                                 <span class='comment-date'>${updated}</span>

                             </div>

                         </li>`;

                         count++;

                     }

                 });

                 html += "</ul>";

                 container.innerHTML = html;


                 // Jika tidak ada komentar ditampilkan

                 if (count === 0) {

                     container.innerHTML = "No comments available.";

                 }

             })

             .catch(error => {

                 console.error('Error fetching the feed:', error);

                 document.getElementById("comments-sidebar").innerHTML = "Error loading comments.";

             });

         }


         document.addEventListener("DOMContentLoaded", function() {

             loadComments();

         });

     </script>

    


  • Simpan Perubahan: Klik tombol "Simpan" untuk menyimpan gadget dan kode yang baru ditambahkan.


Menampilkan Widget Forum Diskusi di Blogger

Setelah Anda berhasil menambahkan widget forum diskusi ke blog Anda, berikut adalah beberapa tips untuk memastikan bahwa widget tersebut berfungsi dengan baik:

1.1 Pastikan Kode Berfungsi

Uji Widget: Setelah menambahkan kode ke widget, pastikan untuk memeriksa blog Anda dan melihat apakah widget forum diskusi muncul seperti yang diharapkan. Jika tidak muncul, periksa kembali kode yang Anda tambahkan dan pastikan tidak ada kesalahan pengetikan.

Periksa Console Browser: Jika widget tidak berfungsi, buka alat pengembang di browser (biasanya dapat diakses dengan menekan F12) dan periksa tab "Console" untuk melihat apakah ada pesan kesalahan.

1.2 Menyesuaikan Tampilan

Edit CSS: Anda dapat menyesuaikan tampilan widget forum diskusi dengan mengedit CSS di kode. Misalnya, Anda bisa mengubah warna latar belakang, font, atau ukuran elemen sesuai dengan tema blog Anda.

Pengaturan Lebih Lanjut: Jika Anda ingin menampilkan lebih banyak komentar atau mengubah format tampilan, Anda dapat memodifikasi variabel `numComments` dan kode HTML dalam bagian `forEach`.

Membuat Widget Forum Diskusi Online di Blogger/Blogspot

1.1 Menggunakan Layanan Forum Diskusi Eksternal

Jika Anda mencari solusi yang lebih canggih atau fungsionalitas tambahan, Anda dapat menggunakan layanan forum diskusi eksternal seperti Disqus atau Facebook Comments. Berikut adalah cara menambahkan widget forum diskusi online:

  • Daftar untuk Layanan Forum: Pilih layanan forum diskusi yang sesuai dengan kebutuhan Anda dan daftar untuk mendapatkan kode widget.
  • Salin Kode Widget: Layanan forum akan menyediakan kode HTML atau JavaScript untuk widget. Salin kode tersebut.
  • Tambahkan Kode ke Blog: Kembali ke dashboard Blogger, dan tambahkan gadget "HTML/JavaScript" baru di lokasi yang diinginkan. Tempelkan kode widget yang Anda salin dari layanan forum.
  • Simpan Perubahan: Klik "Simpan" untuk menambahkan widget forum diskusi online ke blog Anda

1.2 Memanfaatkan Fitur Bawaan Blogger

Blogger juga memiliki fitur komentar bawaan yang dapat digunakan sebagai forum diskusi. Anda bisa mengonfigurasi pengaturan komentar di dashboard Blogger untuk mengaktifkan dan mengelola diskusi di blog Anda.

Catatan :

  • Ubah www.carangeblog.com dengan nama domain kamu.
  • Ubah kode 8988689094275844279 dengan id halaman postingan statistik yang kamu buat tadi.
  • Ubah Link https://www.carangeblog.com/p/forum-diskusi-blogger-carangeblog.html dengan url postingan halaman Statistik yang kamu buat barusan.

Membuat dan menampilkan forum diskusi di Blogger dapat dilakukan dengan beberapa cara, baik menggunakan kode kustom maupun layanan eksternal. Dengan menambahkan widget forum diskusi, Anda dapat meningkatkan interaksi pembaca dan menciptakan ruang bagi komunitas untuk berdiskusi. Baik menggunakan widget kustom atau layanan pihak ketiga, pastikan untuk menguji dan menyesuaikan tampilan sesuai dengan kebutuhan blog Anda.

Jika Anda memiliki pertanyaan atau memerlukan bantuan tambahan, jangan ragu untuk menghubungi dukungan teknis atau komunitas Blogger. Selamat mencoba dan semoga forum diskusi di blog Anda sukses!

Comments

Post a Comment

Popular posts from this blog

Membuat Widget CV Generator Di Blogger

Cara Membuat Widget CV Lamaran Kerja Secara Otomatis di Blogger: Solusi untuk Generasi Z Banyak anggota Generasi Z saat ini menghadapi tantangan dalam melamar pekerjaan, terutama ketika mereka tidak memiliki Curriculum Vitae (CV) yang memadai atau tidak tahu cara membuat CV yang baik dan benar. Ini menjadi peluang emas bagi para blogger untuk membantu audiens yang tengah mencari solusi praktis dalam menyusun CV dengan mudah. Dengan membuat widget yang memungkinkan pembuatan CV secara otomatis, para konten kreator dapat memberikan nilai tambah bagi pengunjung blog mereka. Apa Itu Curriculum Vitae (CV)? Curriculum Vitae, sering disingkat CV, adalah dokumen penting yang merangkum riwayat hidup, pendidikan, pengalaman kerja, keterampilan, dan prestasi individu. CV sering digunakan dalam proses pencarian kerja sebagai alat untuk memberikan gambaran menyeluruh kepada calon pemberi kerja mengenai latar belakang profesional dan akademis seseorang.  Berikut adalah beberapa elemen kunci yang...
Post a Comment
Read more

Memahami Title Link Enclosure Links Blogger

Panduan Lengkap Memahami dan Menggunakan Title Link serta Enclosure Links di Blogspot . Blogger atau Blogspot tetap menjadi salah satu platform blogging paling populer bagi pengguna di seluruh dunia. Meskipun platform ini menawarkan kemudahan penggunaan, banyak fitur tersembunyi yang jarang dimanfaatkan oleh para blogger. Dua fitur penting yang sering kali diabaikan adalah Title Link dan Enclosure Links . Keduanya memberikan fleksibilitas lebih dalam hal mengatur tampilan konten dan distribusi media di blog Anda. Dalam artikel ini, kita akan membahas secara mendetail tentang apa itu Title Link dan Enclosure Links , bagaimana cara menggunakannya, serta manfaat besar yang bisa didapatkan dari fitur-fitur ini di Blogspot. Anda juga akan belajar cara optimal menggunakannya untuk meningkatkan pengalaman pembaca dan SEO blog Anda. Apa Itu Title Link? Title Link adalah fitur di Blogspot yang memungkinkan Anda menghubungkan judul postingan blog dengan tautan eksternal atau internal. Biasanya,...
Post a Comment
Read more

Hide Postingan Artikel Di Homepage Blogger Tanpa Code

Cara Menyembunyikan Postingan di Homepage Blogger Tanpa Otak-Atik Code Template. Di artikel sebelumnya saya juga sudah membahas cara menyembunyikan postingan artikel berdasarkan label tertentu di homepage Blogger Menggunakan kode kusus .  Mengelola tampilan postingan di homepage Blogger sering menjadi tantangan bagi pemilik blog yang ingin menjaga tampilan homepage tetap rapi atau menampilkan artikel tertentu saja. Biasanya Mungkin ini dilakukan karena blog yang dibuat biasanya mengangkat satu tema saja. Contohnya blog carangeblog.com yang mengangkat tema pembahasan seputar kode Blogger saja, namun saya ingin menulis artikel diluar tema blog supaya meningkatkan jumlah trafik organik di mesin pencarian google. Selain itu tujuanya supaya blog terlihat lebih rapih berdasarkan tema yang di angkat. Namun terkadang pemilik blog melakukan menyembunyikan postingan artikel di homepage Blogger mereka karena ada beberapa artikel yang sifatnya tidak terlalu relevan untuk ditampilkan di halama...
Post a Comment
Read more