Pernah menemukan artikel yang sangat bermanfaat tetapi belum sempat membacanya sampai selesai? Fitur bookmark atau simpan artikel dapat menjadi solusi praktis agar pengunjung bisa menyimpan artikel favorit dan membacanya kembali di lain waktu.
Secara umum, pengunjung dapat menggunakan fitur bookmark bawaan browser. Namun, Anda juga dapat membuat sistem bookmark artikel langsung di dalam blog Blogger menggunakan HTML, CSS, dan JavaScript.
Pada tutorial ini, kita akan membuat fitur simpan artikel menggunakan LocalStorage browser. Pengunjung dapat menekan tombol simpan pada artikel, kemudian artikel tersebut akan masuk ke daftar bacaan. Daftar tersebut dapat ditampilkan pada area sidebar atau bagian lain yang Anda tentukan.
Apa Itu Bookmark dengan LocalStorage?
LocalStorage adalah fitur penyimpanan yang tersedia pada browser untuk menyimpan data secara lokal pada perangkat pengguna. Data tersebut dapat digunakan kembali ketika halaman web dibuka selama data browser belum dihapus dan masih tersedia untuk origin website tersebut.
Dalam sistem bookmark ini, LocalStorage digunakan untuk menyimpan dua informasi utama, yaitu judul artikel dan URL artikel.
Alur kerjanya cukup sederhana:
Pengunjung membuka artikel
↓
Menekan tombol "Simpan Artikel"
↓
JavaScript mengambil URL dan judul artikel
↓
Data disimpan ke LocalStorage
↓
Artikel muncul di daftar bacaan
↓
Pengunjung dapat membuka atau menghapusnyaKarena penyimpanannya dilakukan di browser, sistem ini tidak membutuhkan database khusus untuk menyimpan daftar artikel tersebut.
Manfaat Fitur Simpan Artikel di Blogger
Fitur bookmark internal dapat memberikan pengalaman tambahan bagi pengunjung, khususnya pada blog yang memiliki banyak artikel atau konten yang ingin dibaca kembali.
- Memudahkan pengunjung menyimpan artikel favorit.
- Membuat daftar bacaan pribadi langsung di dalam blog.
- Tidak membutuhkan database eksternal untuk contoh sistem ini.
- Mudah diterapkan pada Blogger menggunakan HTML, CSS, dan JavaScript.
- Pengunjung dapat menghapus artikel dari daftar simpanan.
- Cocok untuk blog dengan banyak artikel yang ingin dibaca kembali.
Perlu diperhatikan bahwa data LocalStorage tersimpan secara lokal pada browser dan perangkat tertentu. Data tersebut tidak otomatis tersinkronisasi ke perangkat lain.
Contoh Penggunaan Bookmark Artikel
Misalnya Anda mengelola blog yang berisi banyak tutorial. Seorang pengunjung menemukan lima artikel yang ingin dipelajari, tetapi tidak memiliki waktu untuk membaca semuanya sekaligus.
Dengan fitur bookmark ini, pengunjung cukup menekan tombol Simpan Artikel Ini pada setiap artikel yang ingin dibaca nanti. Artikel tersebut kemudian muncul pada Daftar Bacaan Saya.
Ketika kembali membuka blog menggunakan browser dan perangkat yang sama, daftar artikel yang sebelumnya disimpan masih dapat ditampilkan selama data LocalStorage belum dihapus.
Komponen yang Dibutuhkan
Untuk membuat sistem bookmark sederhana ini, kita membutuhkan tiga komponen utama:
- CSS untuk mengatur tampilan tombol dan daftar bacaan.
- HTML sebagai struktur tombol simpan dan wadah daftar artikel.
- JavaScript untuk menyimpan, membaca, dan menghapus data dari LocalStorage.
Kode CSS Tombol dan Daftar Bookmark
Langkah pertama adalah membuat tampilan tombol simpan dan daftar bacaan. Gunakan kode CSS berikut:
<style>
.tombol-simpan-artikel {
background-color: #3b82f6;
color: #ffffff;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
border: none;
font-weight: bold;
font-size: 15px;
transition: background-color 0.3s ease;
display: inline-block;
margin: 15px 0;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.tombol-simpan-artikel:hover {
background-color: #2563eb;
}
.wadah-daftar-bacaan {
border: 1px solid #e2e8f0;
padding: 20px;
border-radius: 8px;
background-color: #f8fafc;
font-family: inherit;
margin-bottom: 20px;
}
.judul-wadah-bacaan {
font-size: 18px;
color: #1e293b;
margin-top: 0;
margin-bottom: 15px;
border-bottom: 2px solid #cbd5e1;
padding-bottom: 10px;
}
.item-bacaan {
padding: 10px 0;
border-bottom: 1px dashed #cbd5e1;
display: flex;
justify-content: space-between;
align-items: center;
}
.item-bacaan a {
color: #0f172a;
text-decoration: none;
font-weight: 600;
font-size: 14px;
flex: 1;
margin-right: 15px;
}
.item-bacaan a:hover {
color: #3b82f6;
text-decoration: underline;
}
.tombol-hapus-bacaan {
background-color: #ef4444;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
.tombol-hapus-bacaan:hover {
background-color: #dc2626;
}
</style>Kode HTML Tombol Simpan Artikel
Setelah CSS tersedia, buat tombol yang akan digunakan pengunjung untuk menyimpan artikel.
Letakkan kode berikut pada bagian artikel yang Anda inginkan:
<button id="tombolSimpanBlog" class="tombol-simpan-artikel">
Simpan Artikel Ini
</button>Posisi tombol dapat ditempatkan setelah paragraf pembuka, di tengah artikel, atau menjelang akhir artikel sebelum bagian komentar.
Kode HTML Daftar Bacaan
Selanjutnya, buat area untuk menampilkan seluruh artikel yang telah disimpan pengunjung.
<div class="wadah-daftar-bacaan">
<h3 class="judul-wadah-bacaan">Daftar Bacaan Saya</h3>
<div id="areaDaftarSimpanan">
Belum ada artikel yang Anda simpan saat ini.
</div>
</div>Wadah ini dapat ditempatkan pada sidebar melalui gadget HTML/JavaScript atau pada bagian lain sesuai struktur template Blogger.
Kode JavaScript Bookmark LocalStorage
Bagian berikut merupakan inti dari sistem bookmark. JavaScript akan mengambil URL dan judul halaman, menyimpannya ke LocalStorage, menampilkan daftar artikel, serta menyediakan fungsi untuk menghapus artikel.
<script>
document.addEventListener("DOMContentLoaded", function() {
var tombolAksiSimpan = document.getElementById("tombolSimpanBlog");
var ruangTampilDaftar = document.getElementById("areaDaftarSimpanan");
var namaMemori = "arsipBacaanBlog";
function muatDaftarBacaan() {
if (!ruangTampilDaftar) return;
var kumpulanData =
JSON.parse(localStorage.getItem(namaMemori)) || [];
if (kumpulanData.length === 0) {
ruangTampilDaftar.innerHTML =
"Belum ada artikel yang Anda simpan saat ini.";
return;
}
var susunanHtml = "";
kumpulanData.forEach(function(item, urutan) {
susunanHtml += "<div class='item-bacaan'>";
susunanHtml +=
"<a href='" + item.tautan + "'>" +
item.judul +
"</a>";
susunanHtml +=
"<button class='tombol-hapus-bacaan' " +
"onclick='hapusItemBacaan(" + urutan + ")'>" +
"Hapus</button>";
susunanHtml += "</div>";
});
ruangTampilDaftar.innerHTML = susunanHtml;
}
window.hapusItemBacaan = function(urutan) {
var kumpulanData =
JSON.parse(localStorage.getItem(namaMemori)) || [];
kumpulanData.splice(urutan, 1);
localStorage.setItem(
namaMemori,
JSON.stringify(kumpulanData)
);
muatDaftarBacaan();
};
if (tombolAksiSimpan) {
tombolAksiSimpan.addEventListener("click", function() {
var tautanSaatIni = window.location.href;
var judulSaatIni = document.title;
var kumpulanData =
JSON.parse(localStorage.getItem(namaMemori)) || [];
var apakahSudahAda =
kumpulanData.some(function(item) {
return item.tautan === tautanSaatIni;
});
if (!apakahSudahAda) {
kumpulanData.push({
tautan: tautanSaatIni,
judul: judulSaatIni
});
localStorage.setItem(
namaMemori,
JSON.stringify(kumpulanData)
);
tombolAksiSimpan.innerText =
"Berhasil Disimpan!";
tombolAksiSimpan.style.backgroundColor =
"#10b981";
setTimeout(function() {
tombolAksiSimpan.innerText =
"Simpan Artikel Ini";
tombolAksiSimpan.style.backgroundColor =
"#3b82f6";
}, 3000);
muatDaftarBacaan();
} else {
tombolAksiSimpan.innerText =
"Sudah Tersimpan!";
setTimeout(function() {
tombolAksiSimpan.innerText =
"Simpan Artikel Ini";
}, 3000);
}
});
}
muatDaftarBacaan();
});
</script>Bagaimana Cara Kerja Script Bookmark?
Ketika tombol simpan ditekan, JavaScript mengambil alamat halaman menggunakan window.location.href dan judul halaman menggunakan document.title.
Kedua informasi tersebut kemudian dimasukkan ke dalam sebuah array dan disimpan menggunakan:
localStorage.setItem()Data disimpan dalam format JSON sehingga beberapa artikel dapat disimpan sekaligus.
Saat halaman dibuka kembali, JavaScript menjalankan:
localStorage.getItem()Data yang tersimpan kemudian dibaca dan ditampilkan sebagai daftar tautan.
Cara Memasang Bookmark di Blogger
Pemasangan sistem bookmark ini terdiri dari dua bagian, yaitu daftar bacaan dan tombol simpan artikel.
Langkah 1: Buka Menu Tata Letak
Masuk ke dashboard Blogger, kemudian pilih menu Tata Letak.
Langkah 2: Tambahkan Gadget HTML/JavaScript
Pilih area sidebar atau lokasi lain yang ingin digunakan untuk menampilkan daftar bacaan. Klik Tambahkan Gadget, kemudian pilih HTML/JavaScript.
Langkah 3: Masukkan CSS dan Daftar Bacaan
Masukkan kode CSS dan HTML daftar bacaan ke dalam gadget tersebut. Kode tersebut akan menjadi tempat artikel yang telah disimpan ditampilkan.
Langkah 4: Tambahkan JavaScript
Masukkan kode JavaScript yang telah disediakan untuk mengaktifkan fungsi penyimpanan dan penghapusan artikel.
Langkah 5: Tambahkan Tombol pada Artikel
Buka artikel yang ingin diberi fitur bookmark. Pilih mode HTML, kemudian letakkan kode tombol berikut pada posisi yang diinginkan:
<button id="tombolSimpanBlog" class="tombol-simpan-artikel">
Simpan Artikel Ini
</button>Simpan atau publikasikan artikel, kemudian buka halaman tersebut untuk melakukan pengujian.
Cara Menguji Fitur Bookmark
Setelah semua kode terpasang, lakukan pengujian untuk memastikan sistem bekerja dengan baik.
- Buka salah satu artikel yang sudah memiliki tombol simpan.
- Klik tombol Simpan Artikel Ini.
- Pastikan teks tombol berubah menjadi Berhasil Disimpan!.
- Periksa bagian Daftar Bacaan Saya.
- Pastikan judul artikel muncul di dalam daftar.
- Klik judul artikel untuk memastikan tautannya bekerja.
- Klik tombol Hapus untuk menguji fungsi penghapusan.
Jika artikel berhasil muncul dan dapat dihapus dari daftar, berarti sistem bookmark sudah berjalan dengan baik.
Hal Penting Tentang LocalStorage
Salah satu hal yang perlu dipahami adalah LocalStorage bersifat lokal. Data yang disimpan tidak otomatis tersimpan pada server website.
Misalnya, pengunjung menyimpan beberapa artikel menggunakan Chrome pada smartphone. Ketika mereka membuka blog menggunakan browser lain atau perangkat komputer, daftar tersebut belum tentu tersedia karena penyimpanan browser dapat berbeda.
Data juga dapat hilang jika pengguna menghapus data situs atau melakukan tindakan lain yang menghapus penyimpanan lokal browser.
Cara Mengubah Nama Daftar Bookmark
Judul daftar bacaan dapat diubah melalui kode HTML:
<h3 class="judul-wadah-bacaan">
Daftar Bacaan Saya
</h3>Misalnya Anda ingin menggunakan nama "Artikel Favorit":
<h3 class="judul-wadah-bacaan">
Artikel Favorit
</h3>Cara Mengubah Warna Tombol Simpan
Warna tombol ditentukan melalui properti background-color.
.tombol-simpan-artikel {
background-color: #3b82f6;
}Anda dapat mengganti nilai warna tersebut dengan warna yang sesuai dengan template Blogger yang digunakan.
Cara Mengubah Teks Tombol
Teks tombol dapat diubah melalui kode HTML.
<button id="tombolSimpanBlog" class="tombol-simpan-artikel">
Simpan Artikel Ini
</button>Misalnya:
<button id="tombolSimpanBlog" class="tombol-simpan-artikel">
Simpan untuk Dibaca
</button>Jika teks tersebut diubah, sebaiknya sesuaikan juga teks yang digunakan JavaScript ketika tombol kembali ke kondisi awal.
Kesalahan yang Sering Terjadi
1. Tombol Tidak Merespons
Pastikan ID tombol tetap menggunakan:
tombolSimpanBlogJavaScript menggunakan ID tersebut untuk menemukan tombol.
2. Daftar Artikel Tidak Muncul
Periksa apakah elemen daftar menggunakan ID:
areaDaftarSimpananKesalahan satu karakter saja dapat membuat JavaScript tidak menemukan elemen yang diperlukan.
3. Data Bookmark Hilang
Perlu diingat bahwa data disimpan pada LocalStorage browser. Jika data situs dihapus atau penyimpanan lokal dibersihkan, daftar bookmark juga dapat ikut terhapus.
4. Bookmark Tidak Muncul di Perangkat Lain
Hal ini merupakan karakteristik LocalStorage. Data tersimpan pada browser dan perangkat tempat bookmark dibuat sehingga tidak berfungsi seperti sistem bookmark berbasis akun yang tersinkronisasi melalui server.
Tips Agar Fitur Bookmark Tetap Nyaman Digunakan
- Letakkan tombol simpan pada posisi yang mudah ditemukan.
- Gunakan teks tombol yang jelas.
- Buat daftar bacaan tetap sederhana.
- Pastikan daftar tidak mengganggu konten utama.
- Uji tampilan pada perangkat mobile dan desktop.
- Jangan menyimpan data pengguna yang sensitif menggunakan sistem sederhana seperti ini.
Apakah Bookmark LocalStorage Meningkatkan SEO?
Fitur bookmark tidak secara langsung meningkatkan peringkat SEO sebuah blog. Fungsi utamanya adalah memberikan fitur tambahan untuk membantu pengunjung menyimpan dan menemukan kembali artikel yang ingin dibaca.
Namun, fitur yang memberikan pengalaman pengguna yang baik dapat menjadi bagian dari pengembangan website secara keseluruhan. Untuk SEO, tetap prioritaskan konten berkualitas, struktur halaman yang baik, performa website, internal linking, optimasi gambar, dan pengalaman pengguna.
Apakah Bookmark LocalStorage Membutuhkan Database?
Untuk sistem sederhana pada tutorial ini, database tidak diperlukan. Data bookmark disimpan langsung pada LocalStorage browser.
Jika Anda ingin membuat sistem bookmark yang dapat tersinkronisasi antarperangkat atau terhubung dengan akun pengguna, diperlukan pendekatan yang berbeda dan biasanya membutuhkan penyimpanan berbasis server.
FAQ Bookmark Artikel Blogger
Apakah fitur bookmark ini bisa digunakan di Blogger?
Ya. Sistem bookmark dapat dibuat menggunakan HTML, CSS, dan JavaScript selama kode dapat ditempatkan pada struktur halaman atau template Blogger yang digunakan.
Apakah bookmark menggunakan database?
Tidak. Contoh ini menggunakan LocalStorage sehingga data disimpan secara lokal pada browser pengunjung.
Apakah artikel yang disimpan bisa dibuka kembali?
Ya. Daftar bookmark berisi tautan artikel sehingga pengunjung dapat mengeklik judul untuk membuka kembali artikel yang telah disimpan.
Apakah bookmark dapat digunakan di perangkat berbeda?
Data LocalStorage tidak otomatis tersinkronisasi antarperangkat. Bookmark yang dibuat pada satu perangkat dan browser tertentu tidak secara otomatis muncul pada perangkat lain.
Apakah artikel yang sudah disimpan bisa dihapus?
Ya. Sistem menyediakan tombol Hapus yang dapat digunakan untuk menghapus artikel tertentu dari daftar bookmark.
Apakah jumlah artikel yang bisa disimpan tidak terbatas?
Tidak. LocalStorage memiliki batas penyimpanan yang ditentukan oleh browser. Untuk penggunaan normal dengan data berupa judul dan URL, sistem sederhana ini dapat menyimpan sejumlah artikel, tetapi tetap tidak sebaik sistem penyimpanan berbasis database untuk data dalam jumlah besar.
Kesimpulan
Cara membuat bookmark artikel di Blogger menggunakan LocalStorage dapat dilakukan dengan menggabungkan HTML, CSS, dan JavaScript. Tombol simpan digunakan untuk mengambil judul serta URL artikel, kemudian JavaScript menyimpannya ke LocalStorage browser.
Artikel yang telah disimpan kemudian dapat ditampilkan dalam Daftar Bacaan Saya. Pengunjung juga dapat membuka kembali artikel tersebut atau menghapusnya dari daftar sesuai kebutuhan.
Kelebihan utama metode ini adalah implementasinya sederhana dan tidak membutuhkan database untuk menyimpan data bookmark. Namun, karena menggunakan LocalStorage, data bersifat lokal dan tidak otomatis tersinkronisasi antarperangkat.
Jika Anda memiliki blog Blogger dengan banyak tutorial, resep, artikel edukasi, atau konten lainnya, fitur simpan artikel seperti ini dapat menjadi tambahan yang menarik untuk membantu pengunjung mengatur daftar bacaan mereka sendiri.