 |
| Pelajari cara membuat forum diskusi online di Blogger menggunakan fitur komentar halaman. Tutorial lengkap dengan kode HTML, CSS, dan JavaScript agar blog kamu memiliki fitur grup chat interaktif tanpa database!" |
Artikel - Cara Membuat Tampilan Grub Diskusi Di Blogger Ini Adalah Yang Saya Cari-cari Sejak Dahulu. Ya sejak saya menggunakan blogger gimana sih cara membuat grup chat diskusi Menggunakan blogspot. Mengingat blogspot hanya mendukung html javascript saja.
Saya pun mencoba mengotak Ngatik agar bisa membuat forum diskusi di blog saya yang saya buat menggunakan blogger ini.
Saya mengakali widget forum diskusi di blog ini menggunakan komentar dari halaman Statistik yang saya buat.
Halaman Statistik ?. Ya kamu gak salah dengan , jadi grub forum diskusi yang saya buat ini memanfaatkan fitur komentar blogspot.
Mengingat blogger tidak bisa membuat database untuk fitur diskusi yang saya inginkan. Jadi saya memanfaatkan fitur komentar blogger sebagai tempat orang mengirim pesan diskusi.
Ilustrasi Forum Diskusi Di Blogger
Jadi jika anda bingung bagaimana ilustrasi forum grub diskusi di blogger yang saya maksud ?
1. Kode yang akan saya bagikan nanti berfungsi untuk menampilkan Sebuah Komentar Dari Halaman Statistik Diskusi Yang Sudah saya Buat.
2. Selain kode nya bisa menampilkan komentar dari halaman Statistik untuk diskusi yang sudah saya buat.
Kode saya di lengkapi dengan tombol button yang mana saat di klik mengarahkan pengunjung ke halaman Statistik Diskusi di blogger saya untuk memberikan komentar diskusi mereka.
Jadi sudah faham ya ilustrasi Kode Forum Diskusi Grub Di Blogger yang sudah saya buatkan untuk anda ?.
Cara Membuat Widget Forum Diskusi Di Blogspot
Jika anda sudah faham dengan ilustrasi cara kerja forum diskusi yang saya buat dan anda ingin membuatnya juga. Anda dapat mengikuti langkah-langkah yang saya berikan.
1. Masuk ke halaman blogger kamu di blogger.com
2. Buatlah postingan halaman baru dengan judul diskusi online atau buat judul halaman sesuai yang anda inginkan.
Jika anda anda sudah membuat halaman dan mempublikasikannya maka anda harus mendapatkan id post halaman statistik blogger yang sudah anda buat barusan.
3. Langkah berikutnya masuk ke tata letak blogger anda, kemudian tambahkan widget html javascript dan pasangkan kode berikut ini.
<style>
#comments-sidebar {
padding: 20px;
border: 1px solid #ddd;
background-color: #f9f9f9;
border-radius: 8px;
position: relative;
}
.comments-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.comment-item {
border-bottom: 1px solid #ddd;
padding: 15px;
margin-bottom: 10px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.comment-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 15px;
}
.comment-content {
display: flex;
align-items: center;
}
.comment-author {
font-weight: bold;
color: #333;
font-size: 16px;
}
.comment-text {
margin-top: 8px;
font-size: 14px;
color: #555;
}
.comment-date {
margin-top: 10px;
font-size: 12px;
color: #888;
}
.chat-button {
width: 50%;
position: relative;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
.chat-button:hover {
background-color: #45a049;
}
.chat-button svg {
width: 20px;
height: 20px;
margin-right: 10px;
}
.chat-button span {
font-size: 14px;
font-weight: bold;
}
</style>
<div id="comments-sidebar">
<ul class="comments-list" id="comments-list">
<!-- Komentar akan ditampilkan di sini -->
</ul>
<a href="https://www.blogcepot.com/p/forum-diskusi-blogcepot.html?sc=1745363227366&m=1#c274834949114211564" target="_blank">
<button class="chat-button">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 2H3a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h14l4 4V4a2 2 0 0 0-2-2z"></path>
</svg>
<span> DISKUSI</span>
</button>
</a>
</div>
<script>
var postID = "5876958564584187376";
var feedUrl = `https://www.blogcepot.com/feeds/${postID}/comments/default?alt=atom`;
var numComments = 20;
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-list");
var html = "";
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;
var avatar = entry.querySelector("author icon") ? entry.querySelector("author icon").textContent : '';
html += `
<li class='comment-item'>
<div class='comment-content'>
${avatar ? `<img src="${avatar}" alt="${author}'s avatar" class="comment-avatar" />` : ''}
<div class="comment-details">
<strong class='comment-author'>${author}</strong>
<p class='comment-text'>${content}</p>
<span class='comment-date'>${updated}</span>
</div>
</div>
</li>`;
count++;
}
});
container.innerHTML = html;
if (count === 0) {
container.innerHTML = "Belum ada komentar.";
}
})
.catch(error => {
console.error('Error fetching the feed:', error);
document.getElementById("comments-list").innerHTML = "Error loading comments.";
});
}
document.addEventListener("DOMContentLoaded", function() {
loadComments();
});
</script>
Sedikit catatan : pada kode
var postID = "5876958564584187376";
var feedUrl = `https://www.blogcepot.com/feeds/${postID}/comments/default?alt=atom`;
var numComments = 20;Pada kode 58769585645841873761. ubah dengan id post halaman statistik yang sudah kamu buat.
Dan pada kode https://www.blogcepot.com/feeds/${postID}/comments/default?alt=atom pada bagian blogcepot.com ubah dengan domain blog anda.
Dan pada kode <a href="https://www.blogcepot.com/p/forum-diskusi-blogcepot.html?sc=1745363227366&m=1#c274834949114211564" target="_blank">
ubah dengan url halaman statistik yang sudah anda buat.
Penjelasan Kode :
1. Pada kode ini 58769585645841873761 adalah kode id halaman Statistik Blogger kamu yang digunakan sebagai database localtorage forum diskusi yang menggunakan halaman statis blogger kamu.
2. Pada url ini https://www.blogcepot.com/p/forum-diskusi-blogcepot.html?sc=1745363227366&m=1#c274834949114211564 berfungsi sebagai tombol button yang mengarahkan pengunjung untuk bergabung dalam diskusi dengan cara memberikan komentar mereka pada halaman statis diskusi blog yang sudah kamu buat.
3. Sedangkan var numComments = 20; pada kode nilai 20 berfungsi sebagai jumlah komentar diskusi yang di tampilkan pada kode yang akan di pasang pada tata letak blog kamu.
Apakah kamu sudah memahami artikel yang saya berikan ?. Jika sudah coba komentar apakah kamu sudah berhasil membuat tampilan forum diskusi di blogger kamu.
Demikian TUTORIAL MEMBUAT FORUM DISKUSI ONLINE DI BLOG BLOGGER. Jika anda menyukai artikel saya jangan lupa komentar dan share artikel saya ini.
