Cara Membuat Blog dengan HTML CSS dan JavaScript

4 Mar, 2024

Cara Membuat Blog dengan HTML CSS dan JavaScript - Pada kesempatan ini, saya akan memberikan panduan membuat blog sederhana HTML dan CSS, serta menyimpan data secara lokal lewat LocalStorage. Jadi blog yang akan dibuat ini bisa menampilkan, menambahkan, update, dan hapus.

LocalStorage adalah fitur pada browser web yang bisa menyimpan data dalam bentuk key-value pairs secara local di device user. Data yang disimpan dalam localStorage tetap tersedia bahkan setelah pengguna menutup browser atau close. Data tersebut akan tetap tersimpan sampai user mendelete atau melalui penghapusan cache browser.

Sebelum membuat, berikut alat yang harus disiapkan.

Komputer/Laptop/Android. jika tidak punya silahkan pinjam teman anda.
Aplikasi Text Editor. anda bisa menggunakan notepad, notepad++, VSC, sublime text, dll.
Browser. untuk membuka file websitenya nanti.
Niat yang Tulus. tanpa niat usahamu akan sia-sia.

Cara Membuat Blog dengan Html

Berikut panduan lengkap membuat blog sederhana tanpa database MySQL sebagai berikut.

1. Buat file index.html

Langkah pertama buka aplikasi text editor dan buat file dengan nama index.html sebagai halaman utama web, kemudian copy dan paste kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog - Halaman Utama</title>
<style>

/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: #f0f0f0;
}

header {
background: #333;
color: #fff;
padding: 20px;
}

header h1 {
margin: 0;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

.hero {
text-align: center;
padding: 100px 20px;
background: #f4f4f4;
}

.hero h2 {
margin-bottom: 20px;
font-size: 2.5em;
}

.hero p {
font-size: 1.2em;
color: #666;
}

.btn {
display: inline-block;
padding: 12px 24px;
background: #333;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s ease;
}

.btn:hover {
background: #555;
}

.articles {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 50px;
}

.article {
flex-basis: calc(33.33% - 40px);
padding: 20px;
background: #fff;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}

.article:hover {
transform: translateY(-5px);
}

.article h3 {
margin-bottom: 10px;
font-size: 1.5em;
}

.article p {
margin-bottom: 15px;
color: #555;
}

.footer {
background: #333;
color: #fff;
margin-top: 80px;
text-align: center;
padding: 20px;
width: 100%;
}

a.link{
color:white;
}

</style>

</head>
<body>
<header>
<h1>Blog Saya</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>

<section class="hero">
<h2>Selamat datang di Blog Saya</h2>
<p>Temukan berbagai artikel menarik tentang topik yang Anda minati.</p>


<a href="#" class="btn">Lihat Artikel</a>
</section>

<footer>
<p class="footer">Hak Cipta © 2024 <a class="link" href="https://www.ansoriweb.com/">AnsoriWeb.com</a></p>
</footer>
</body>
</html>

2. Buat file blog.html

Kemudian buat file dengan nama blog.html, file ini digunakan untuk menampilkan daftar artikel yang dibuat nantinya, untuk codenya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artikel | Ansori Web</title>
<style>

/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: #f0f0f0;
}

header {
background: #333;
color: #fff;
padding: 20px;
}

header h1 {
margin: 0;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 20px;
}

.hero {
text-align: center;
padding: 100px 20px;
background: #f4f4f4;
}

.hero h2 {
margin-bottom: 20px;
font-size: 2.5em;
}

.hero p {
font-size: 1.2em;
color: #666;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

.btn {
display: inline-block;
padding: 12px 24px;
background: #333;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s ease;
}

.btn:hover {
background: #555;
}

.articles {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 50px;
}

.article {
flex-basis: calc(33.33% - 40px);
padding: 20px;
background: #fff;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}

.article:hover {
transform: translateY(-5px);
}

.article h3 {
margin-bottom: 10px;
font-size: 1.5em;
}

.article p {
margin-bottom: 15px;
color: #555;
}

.footer {
background: #333;
color: #fff;
margin-top: 80px;
text-align: center;
padding: 20px;
width: 100%;
}

a.link{
color:white;
}

</style>

</head>
<body>
<header>
<h1>Blog Saya</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>

<section class="hero">
<h2>Daftar Artikel</h2>
<p>Temukan berbagai artikel menarik tentang topik yang Anda minati.</p>


<a href="#" class="btn">Tambahkan Artikel</a>
</section>

<section class="articles" id="articles-container">

</section>

<footer>
<p class="footer">Hak Cipta © 2024 <a class="link" href="https://www.ansoriweb.com/">AnsoriWeb.com</a></p>
</footer>

<script>
// Ketika halaman dimuat
document.addEventListener('DOMContentLoaded', function () {
const articlesContainer = document.getElementById('articles-container');

// Ambil artikel dari localStorage
let articles = [];
if (localStorage.getItem('articles')) {
articles = JSON.parse(localStorage.getItem('articles'));
}

// Tampilkan artikel di halaman
articles.forEach(function (article) {
displayArticle(article);
});

// Fungsi untuk menampilkan artikel
function displayArticle(article) {
const articleElement = document.createElement('article');
articleElement.classList.add('article');
articleElement.innerHTML = `
<h3>${article.title}</h3>
<p>${article.content}</p>
<a href="https://www.ansoriweb.com/" class="btn">Baca Artikel</a>
`;
articlesContainer.appendChild(articleElement);
}
});
</script>

</body>
</html>

3. Buat file tambah-artikel.html

Kemudian buat file baru dengan nama tambah-artikel.html, file ini digunakan untuk fungsi menambahkan artikel, melihat artikel pada tabel, dan menghapus artikel. Untuk fitur update bisa di kreasikan sendiri. Untuk codenya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tambahkan Artikel | Ansori Web</title>
<style>
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: #f0f0f0;
}

header {
background: #333;
color: #fff;
padding: 20px;
}

header h1 {
margin: 0;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

.hero {
text-align: center;
padding: 100px 20px;
background: #f4f4f4;
}

.hero h2 {
margin-bottom: 20px;
font-size: 2.5em;
}

.hero p {
font-size: 1.2em;
color: #666;
}

.btn {
display: inline-block;
padding: 12px 24px;
background: #333;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s ease;
}

.btn:hover {
background: #555;
}

.add-article {
text-align: center;
margin-top: 50px;
}

.add-article h2 {
margin-bottom: 20px;
}

.add-article form {
display: flex;
flex-direction: column;
align-items: center;
}

.add-article form div {
margin-bottom: 20px;
}

.add-article form label {
display: block;
margin-bottom: 5px;
}

.add-article form input[type="text"],
.add-article form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

.footer {
background: #333;
color: #fff;
text-align: center;
padding: 20px;
width: 100%;
margin-top: 50px;
}

.footer a {
color: white;
}

.articles {
margin-top: 30px;
text-align: center;
padding: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}

.delete-btn {
background-color: #f44336;
color: white;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}

.delete-btn:hover {
background-color: #d32f2f;
}

table {
width: 80%;
border-collapse: collapse;
margin-top: 20px;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #333;
color: #fff;
}

</style>
</head>
<body>
<header>
<h1>Blog Saya</h1>
<nav>
<ul>
<li><a href="/index.html">Beranda</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>

<section class="add-article">
<h2>Tambah Artikel Baru</h2>
<form id="article-form">
<div>
<label for="title">Judul:</label>
<input type="text" id="title" name="title" required>
</div>
<div>
<label for="content">Konten:</label>
<textarea id="content" name="content" rows="4" required></textarea>
</div>
<button type="submit" class="btn">Tambah Artikel</button>
</form>
</section>

<section class="articles">
<table>
<thead>
<tr>
<th>Judul</th>
<th>Konten</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="article-list">

</tbody>
</table>
</section>

<footer>
<p class="footer">Hak Cipta © 2024 <a class="link" href="https://www.ansoriweb.com/">AnsoriWeb.com</a></p>
</footer>

<script>
document.addEventListener('DOMContentLoaded', function () {
const articleForm = document.getElementById('article-form');
const articlesSection = document.querySelector('.articles');

// Menangani submit form untuk menambahkan artikel baru
articleForm.addEventListener('submit', function (e) {
e.preventDefault();

// Mengambil data dari form
const title = document.getElementById('title').value;
const content = document.getElementById('content').value;

// Membuat objek artikel
const article = {
title: title,
content: content
};
// Menampilkan alert
showAlert();

// Mengosongkan form
articleForm.reset();

// Menyimpan artikel ke localStorage
saveArticle(article);

displayArticles();
});

// Fungsi untuk menyimpan artikel ke localStorage
function saveArticle(article) {
let articles = [];
if (localStorage.getItem('articles')) {
articles = JSON.parse(localStorage.getItem('articles'));
}
articles.push(article);
localStorage.setItem('articles', JSON.stringify(articles));
}

// Fungsi untuk menampilkan alert
function showAlert() {
alert('Artikel berhasil ditambahkan!');
}
});

document.addEventListener('DOMContentLoaded', function () {
// Your existing JavaScript code here

// Function to display articles in the table
function displayArticles() {
const articleList = document.getElementById('article-list');
articleList.innerHTML = ''; // Clear existing content

// Retrieve articles from localStorage
let articles = JSON.parse(localStorage.getItem('articles')) || [];

// Iterate through articles and append rows to the table
articles.forEach(function (article, index) {
const row = document.createElement('tr');
row.innerHTML = `
<td>${article.title}</td>
<td>${article.content}</td>
<td><button class="delete-btn" data-index="${index}">Delete</button></td>
`;
articleList.appendChild(row);
});
}

// Initial display of articles
displayArticles();

// Event listener to handle article deletion
document.getElementById('article-list').addEventListener('click', function (event) {
if (event.target.classList.contains('delete-btn')) {
const index = event.target.dataset.index;
deleteArticle(index);
}
});

// Function to delete article from localStorage and update table
function deleteArticle(index) {
let articles = JSON.parse(localStorage.getItem('articles')) || [];
articles.splice(index, 1);
localStorage.setItem('articles', JSON.stringify(articles));
displayArticles(); // Refresh table
}

});




</script>
</body>
</html>

4. Jalankan kode

Setelah berhasil dibuat, saatnya buka ketiga file diatas menggunakan browser. Untuk preview tampilan blognya sebagai berikut dan bisa dikembangkan lagi dengan kreativitas masing-masing.

Kesimpulan

Demikian panduan membuat blog dengan html dan css tanpa database menggunakan LocalStorage JavaScript, semoga tutorial webiste ini bermanfaat bagi kita semua yang sedang mencari referensi yang diberikan oleh guru anda. Jika ada pertanyaan atau kurang jelas, script error, atau segala pertanyaan tentang artikel ini bisa ditanyakan melalui kolom komentar dibawah ini. Terima Kasih.

Cara Membuat Blog dengan Html

1. Buat file index.html

2. Buat file blog.html

3. Buat file tambah-artikel.html

4. Jalankan kode

Kesimpulan

Artikel Terbaru

Cara Membuat Website Toko Online dengan HTML dan CSS

Pengertian Object Diagram : Fungsi, Komponen, dan Contohnya

5 Daftar Situs Proxy Tercepat Gratis dan Berbayar yang Bisa Kamu Coba

10 Simple Javascript Game Codes Free Copy and Paste

Cara Membuat Web Portofolio dengan HTML dan CSS