Skip to main content

Cara Membuat Dan Menampilkan Forum Diskusi Di Blogger

 Cara Membuat Dan Menampilkan Widget Forum Diskusi Online 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
1. 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.

1. Masuk ke page ( halaman ).
2. Buat postingan halaman baru.
3. 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:


1. Buka Dashboard Blogger Anda:

Masuk ke akun Blogger Anda dan pilih blog yang ingin Anda modifikasi.


2. Akses Tata Letak:

Klik pada menu "Tata Letak" di sidebar kiri. Ini akan menampilkan struktur tata letak blog Anda.


3. 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.


4. 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>

    


5. Simpan Perubahan:

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


2. 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:


2.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.


2.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`.


3. Membuat Widget Forum Diskusi Online di Blogger/Blogspot

3.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:


1. Daftar untuk Layanan Forum:

 Pilih layanan forum diskusi yang sesuai dengan kebutuhan Anda dan daftar untuk mendapatkan kode widget.


2. Salin Kode Widget:

 Layanan forum akan menyediakan kode HTML atau JavaScript untuk widget. Salin kode tersebut.


3. 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.


4. Simpan Perubahan:

 Klik "Simpan" untuk menambahkan widget forum diskusi online ke blog Anda.

 

3.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

Alasan Kode Adsense Menurunkan Performa Blog Dan Cara Mengatasinya

  Kenapa Performa Blogger Otomatis Menurun Jika Di Pasangkan Kode Script Google Adsense. Padahal Sebelum Kode Script Adsense Dipasang Performa Blogger Ijo Dengan Nilai 97, sedangkan Setelah akode Adsense Dipasang Performa Blogger Otomatis menurun Menjadi Kuning Dengan Nilai 62. Pada Kesempatan Kali Ini Saya Akan Membahas Alasan Kode Script Google Adsense Bisa Menurunkan Performa Blogger Dan Cara Mengatasinya. Alasan Kode Script AdSense Menurunkan Performa Blogger , Monetisasi blog menggunakan Google AdSense adalah salah satu cara paling populer untuk mendapatkan penghasilan dari konten yang kita buat. Banyak pemilik blog yang memilih Google AdSense karena mudah diintegrasikan dan memiliki jangkauan iklan yang luas. Namun, ada masalah yang sering muncul setelah memasang kode AdSense pada blog, yaitu penurunan performa blog. Artikel ini akan membahas secara mendalam. alasan kode AdSense menurunkan performa blog, serta bagaimana cara mengatasinya. Berikut adalah alasan Kode Script Goo...
Post a Comment
Read more

Membuat Permalink Custom Di Blogger Yang Benar

 Cara membuat custom pemalink di blogger / blogspot yang benar untuk optimasi seo artikel agar lebih berkualitas dan seo friendly. Cara Membuat Permalink Custom Blogger yang Benar: Panduan Lengkap Menulis Artikel Blog  Permalink adalah elemen penting dalam SEO yang sering diabaikan oleh para blogger pemula. Di Blogger, permalink adalah URL yang ditetapkan untuk setiap postingan. Sebagian besar pengguna Blogger cenderung membiarkan permalink diatur secara otomatis, padahal membuat permalink kustom dapat meningkatkan optimasi mesin pencari (SEO) dan memudahkan pembaca menemukan artikel Anda. Artikel ini akan membahas **cara membuat permalink custom di Blogger yang benar**, serta bagaimana cara memanfaatkannya untuk meningkatkan ranking di Google. Ketahui Apa Itu Permalink Di Blogger? Sebelum kita masuk ke dalam panduan teknis, penting untuk memahami apa itu permalink. Permalink adalah URL tetap yang digunakan untuk menampilkan postingan atau halaman tertentu di situs web Anda. ...
Post a Comment
Read more

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 kunc...
Post a Comment
Read more