√ Cara Membuat Tombol Bookmark Blog Menggunakan LocalStorage Browser di Blogspot (Blogger.com)
Selamat datang di Web TulisanIB. Di artikel kali ini penulis akan membagikan sebuah tutorial bagaimana caranya membuat tombol bookmark blog menggunakan LocalStorage Browser di blog atau website yang menggunakan platform Blogspot atau Blogger.com.
Tombol bookmark ini sering kita temui di berbagai jenis aplikasi browser, contohnya seperti Browser Opera, Google Chrome, Microsoft Edge, Mozilla Firefox, UC Browser, dan lain-lain.
Fungsinya yaitu digunakan untuk menyimpan link atau konten artikel agar bisa dibaca lain kali atau dilain waktu.
Bookmark ini bisa juga disebut sebagai Read Later, Save Later, Save Link, atau sebagainya.
Lalu apakah blog atau website yang menggunakan platform Blogspot atau Blogger.com bisa memasang tombol bookmark? Tentu saja bisa.
Kita akan memanfaatkan LocalStorage dari browser sebagai database untuk menyimpan data. Karena tersimpan di penyimpanan lokal browser, data bookmark tidak akan hilang meskipun pengunjung berpindah halaman atau menutup blog atau website kita.
Bookmark hanya akan hilang jika pengguna melakukan uninstall browser atau menghapus data browser (hal ini jarang sekali dilakukan).
Tutorial ini pertama kali penulis temukan di Blog Igniel, lalu penulis sedikit modifikasi kode dan langkah-langkahnya agar lebih mudah untuk dilakukan.
Cara Membuat Tombol Bookmark Blog Menggunakan LocalStorage Browser di Blogspot (Blogger.com)
Yang perlu diperhatikan pertama kali adalah kalian harus paham bahwa mungkin tampilan yang dihasilkan akan ada sedikit perbedaan hasilnya dengan TulisanIB.Ini karena kode setiap template Blogspot atau Blogger.com berbeda-beda.
Kalau langsung mirip ya syukur. Tetapi kalau tidak, kalian harus menyesuaikan kode CSS dan HTML-nya untuk mendapatkan hasil yang kalian inginkan.
Ingat ya, kemungkinan yang berbeda hanya tampilannya saja. Jadi yang perlu dimodifikasi cukup CSS dan HTML-nya saja.
Kode CSS diubah untuk menyesuaikan dengan tampilan template, dan kode HTML diubah letak tempat menaruhnya pada posisi yang sesuai dengan tampilan template.
Untuk kode JavaScriptnya tidak perlu diubah (kecuali untuk bagian link halaman bookmark apabila ada ketidaksesuaian dengan blog atau website kalian).
1. Menentukan Halaman Bookmark
Pertama kita akan menentukan halaman bookmark.Halaman bookmark ini fungsinya untuk menampung semua daftar bookmark dari pengunjung ketika daftar bookmark pengunjung melebihi batas atau terlalu banyak.
Perhatikan! Di sini kita karena menggunakan platform Blogspot atau Blogger.com, kita bisa memanfaatkan halaman label yang tidak digunakan atau tidak ada artikelnya pada label tersebut di blog atau website kita untuk digunakan sebagai halaman bookmark.
Perhatikan! Pada tutorial ini TulisanIB menggunakan label "Bookmarks".
Linknya berikut ini:
https://www.tulisanib.eu.org/search/label/Bookmarks
Perhatikan! Jadi apabila kalian label "Bookmarks" tersebut ada artikelnya silahkan ganti dengan label lain.
Awalan harus menggunakan huruf besar karena nantinya akan tampil juga di bagian judul pada tab browser, dan harus satu kata agar linknya valid HTML5, tidak boleh dua kata ataupun lebih kecuali kalau diberi tanda strip (-).
Kalau kalian ingin menggantinya, contoh lainnya bisa saja: Like, Favorit, Disukai, Disimpan, dan lain-lain. Tentukan sesuai keinginan kalian.
Kalau sudah menentukan halaman label yang akan digunakan. Simpan link halaman labelnya, lalu lanjut ke langkah nomor 2 berikut.
2. Membuat Halaman Bookmark
Sekarang kita akan membuat halaman bookmark pada halaman label yang sudah kita tentukan pada langkah nomor 1 sebelumnya.- Pertama, kalian masuk ke dashboard blog atau website kalian yang ingin dipasangi tombol bookmark di Blogger.com.
- Lalu masuk ke menu "Tema".
- Klik anak panah disebelah kanannya tulisan "Sesuaikan" pada tombol berwarna orange.
- Kalau kalian mau mencadangkan atau membackup template kalian, silahkan kalian klik pada "Cadangkan", untuk berjaga-jaga apabila ada kesalahan nanti bisa dikembalikan lagi. Tidak membackup pun tidak apa-apa.
- Lalu klik "Edit HTML".
- Lalu kalian cari kode induk atau yang paling atas atau luar dari kumpulan artikel ketika menjadi satu di halaman label.
Tekan tombol Ctrl + F pada keyboard untuk memunculkan kotak pencarian.
Pada tahap ini kalian harus teliti.
Untuk web TulisanIB kode induk atau yang paling atas atau luar dari kumpulan artikel ketika menjadi satu di halaman label adalah kode berikut:<div class='blog-posts hfeed'> - Lalu copy dan paste kode di bawah ini tepat di atasnya kode induk atau yang paling atas atau luar dari kumpulan artikel ketika menjadi satu di halaman label.
Beri satu spasi atau satu line kosong agar rapi.
Lihat pada gambar untuk lebih jelasnya.
Apabila link halaman labelnya berbeda, silahkan ganti link halaman labelnya yang saya tandai warna kuning di kodenya.<b:if cond='data:view.url == data:blog.homepageUrl path "/search/label/Bookmarks"'> <div class='ignielBookmarks'></div> </b:if>
- Selesai, halaman Edit HTML-nya jangan dikeluarkan dulu karena masih ada lagi yang harus dilakukan, sekarang kita lanjut ke langkah nomor 3.
3. Memasang Kode CSS
Sekarang kita akan memasang kode CSS-nya, baiklah langsung saja berikut caranya.- Tekan tombol Ctrl + F pada keyboard untuk memunculkan kotak pencarian.
- Lalu kalian cari kode berikut:
]]></b:skin> - Jika sudah ketemu, copy kode CSS berikut lalu paste tepat di atasnya kode pada tahap nomor 2.
.ignielBookmark,.ignielBookmarks,.ignielBookmarkPost{--bm-bg:#fff;--bm-post-bg:#fff;--bm-icon:#333;--bm-icon-active:#6495ed;--bm-icon-del:#777}#ignielBookmark,.ignielBookmarkPost input{display:none}.ignielBookmark{position:relative;text-align:center}.ignielBookmark i{background-color:var(--bm-bg);border-radius:7px;font-size:.75rem;font-style:normal;line-height:normal;padding:.1rem;right:52%;top:3px}.ignielBookmark svg{height:1.5rem;width:1.5rem}.ignielBookmark path,.ignielBookmarkPost path{stroke:var(--bm-icon);clip-rule:evenodd;fill:#fff;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1.5px}.bookmark-wrapper{border:1px solid #dfdfdf;border-radius:7px;max-height:80vh;min-width:320px;max-width:480px;opacity:0;overflow:auto;right:0;top:2rem;transform:translateY(1rem);-webkit-transform:translateY(1rem);visibility:hidden;width:max-content}.bookmark-title{border-bottom:1px solid #ededed;font-weight:800;position:sticky;position:-webkit-sticky;top:0}.bm-title{line-height:3em}.bm-title a{color:black!important}.bm-title a:hover{text-decoration:none}.bm-thumb{display:none}.bm-delete{margin-left:auto;white-space:nowrap}.bm-delete svg{height:1.25rem;width:1.25rem}.bm-delete path{fill:none;stroke:var(--bm-icon-del)}.bm-delete:hover path{fill:var(--bm-icon-del)}.bookmark-inner ul{list-style:disc;padding-left:25px;text-align:left;flex-direction:column}.bookmark-wrapper,.bookmark-title{background-color:var(--bm-bg)}.bookmark-inner,.bookmark-title{padding:15px;list-style:none}.ignielBookmarks ul{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);margin:0;padding:0}.ignielBookmarks li{border:1px solid #dfdfdf;border-radius:7px;padding:.75rem;background:#f0ffff}.ignielBookmarkPost,.ignielBookmarkPost label{text-align:center}.ignielBookmarkPost svg{height:1.25rem;width:1.25rem}.ignielBookmark label,.ignielBookmarkPost label,.bm-delete{cursor:pointer}.ignielBookmark i,.bookmark-wrapper{position:absolute}.ignielBookmark path,.bookmark-wrapper{transition:all .2s ease}.ignielBookmark label:hover path,.ignielBookmarkPost label:hover path{stroke:var(--bm-icon-active)}#ignielBookmark:checked ~ label path,.ignielBookmarkPost input:checked ~ label path{fill:var(--bm-icon-active);stroke:var(--bm-icon-active)}.ignielBookmarkPost input:checked ~ label path:last-child{fill:none;stroke:#fff}#ignielBookmark:checked ~ .bookmark-wrapper{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);visibility:visible}.bookmark-loading{padding:.5rem;text-align:center}.bookmark-loading svg{animation:ignielSpin .75s linear infinite normal;-webkit-animation:ignielSpin .75s linear infinite normal}@media screen and (max-width:568px){.ignielBookmarks ul{gap:1rem;grid-template-columns:repeat(1,1fr)}}.bm-more a{color:#000!important}.ignielBookmarks{padding:15px}.bm-more{padding-bottom:15px} - Selesai, halaman Edit HTML-nya jangan dikeluarkan dulu karena masih ada lagi yang harus dilakukan, sekarang kita lanjut ke langkah nomor 4.
4. Membuat Tombol Menambahkan Bookmark Pada Artikel
Sekarang kita akan membuat tombol yang digunakan untuk menambahkan artikel yang sedang kita buka saat ini ke dalam daftar bookmark.Pada langkah ini, kalian bebas mau menaruh Tombol Menambahkan Bookmark ini di bagian mana dari template blog atau website kalian.
Tapi saya sarankan untuk menaruhnya di sekitar atas artikel dekat dengan judul agar pengunjung menyadari atau tahu tombol tersebut digunakan untuk menambahkan artikel yang sedang dibuka ke dalam daftar bookmark.
Di langkah ini, TulisanIB menaruh Tombol Menambahkan Bookmark ini di tengah-tengah antara navigasi Breadcrumb dan judul artikel.
Bagi kalian yang sama ingin menaruhnya seperti TulisanIB, kalian harus mengetahui kode dari navigasi Breadcrumb atau kode dari judul artikel ketika dibuka di halaman artikel bukan halaman beranda dan yang sejenisnya (label, archive, dan lain-lain).
Untuk TulisanIB kode dari judul artikel ketika dibuka di halaman artikel adalah berikut, kalau template kalian sama dengan TulisanIB syukurlah:
<h1 class='post-title entry-title'>Baiklah berikut caranya.
- Tekan tombol Ctrl + F pada keyboard untuk memunculkan kotak pencarian.
- Lalu kalian cari kode berikut:
<h1 class='post-title entry-title'> - Copy lalu paste kode Tombol Menambahkan Bookmark berikut tepat di atasnya kode dari judul artikel ketika dibuka di halaman artikel.
Lihat pada gambar di bawah untuk lebih jelasnya.<b:if cond='data:view.isSingleItem'> <div class="ignielBookmarkPost"> <input id='bm-<data:post.id/>' type="checkbox"> <label aria-label="Bookmark" expr:data-img='data:post.featuredImage ? resizeImage(data:post.featuredImage, 100, "3:2") : resizeImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=", 100, "3:2")' expr:data-title='data:post.title' expr:data-url='data:post.url' expr:for='"bm-" + data:post.id'> <svg viewBox="0 0 24 24"> <path d="M16.8199 2H7.17995C5.04995 2 3.31995 3.74 3.31995 5.86V19.95C3.31995 21.75 4.60995 22.51 6.18995 21.64L11.0699 18.93C11.5899 18.64 12.4299 18.64 12.9399 18.93L17.8199 21.64C19.3999 22.52 20.6899 21.76 20.6899 19.95V5.86C20.6799 3.74 18.9499 2 16.8199 2Z"/> <path d="M12 8.20996V13.21"/> <path d="M14.5 10.6499H9.5"/> </svg> </label> </div> </b:if>
- Selesai, halaman Edit HTML-nya jangan dikeluarkan dulu karena masih ada lagi yang harus dilakukan, sekarang kita lanjut ke langkah nomor 5.
5. Membuat Tombol Menampilkan Artikel Bookmark
Sekarang kita akan membuat tombol yang digunakan untuk menampilkan artikel yang telah kita bookmark sebelumnya.Pada langkah ini, kalian bebas mau menaruh Tombol Menampilkan Artikel Bookmark ini di bagian mana dari template blog atau website kalian.
Saran saya untuk menaruhnya di dekat header, agar pengunjung tahu kalau tombol tersebut adalah tombol untuk menampilkan artikel bookmark.
Kalau saya memilih untuk memasang kode Tombol Menampilkan Artikel Bookmark ini di atas navigasi halaman statis pada Web TulisanIB.
Berikut adalah kode Tombol Menampilkan Artikel Bookmark:
<div class="ignielBookmark">
<input id="ignielBookmark" type="checkbox">
<label aria-label="View Bookmark" for="ignielBookmark">
<i>0</i>
<svg viewBox="0 0 24 24">
<path d="M16.8199 2H7.17995C5.04995 2 3.31995 3.74 3.31995 5.86V19.95C3.31995 21.75 4.60995 22.51 6.18995 21.64L11.0699 18.93C11.5899 18.64 12.4299 18.64 12.9399 18.93L17.8199 21.64C19.3999 22.52 20.6899 21.76 20.6899 19.95V5.86C20.6799 3.74 18.9499 2 16.8199 2Z"/>
</svg>
</label>
<div class="bookmark-wrapper">
<div class="bookmark-title">Bookmark</div>
<div class="bookmark-inner">
<div class="bookmark-loading">
<svg viewBox="0 0 24 24">
<path d="M2.45001 14.97C3.52001 18.41 6.40002 21.06 9.98002 21.79"/>
<path d="M2.04999 10.98C2.55999 5.93 6.81998 2 12 2C17.18 2 21.44 5.94 21.95 10.98"/>
<path d="M14.01 21.8C17.58 21.07 20.45 18.45 21.54 15.02"/>
</svg>
</div>
</div>
</div>
</div>Kalau kalian ingin menaruhnya sama seperti Web TulisanIB, berikut tipsnya.
- Pertama kalian harus mengetahui dan mencari kode induk dari navigasi halaman statis di template kalian. Tekan Ctrl + F pada keyboard untuk memunculkan form pencarian.
- Lalu kalau sudah ketemu, silahkan kalian copy lalu paste kode Tombol Menampilkan Artikel Bookmark tadi tepat di atas kode induk dari navigasi halaman statis di template kalian.
- Selesai, halaman Edit HTML-nya jangan dikeluarkan dulu karena masih ada lagi yang harus dilakukan, sekarang kita lanjut ke langkah nomor 6.
6. Memasang Kode JavaScript
Sekarang kita akan memasang kode JavaScript-nya.- Tekan tombol Ctrl + F pada keyboard untuk memunculkan kotak pencarian.
- Lalu kalian cari kode berikut:
</body> - Jika sudah ketemu, copy kode JavaScript berikut lalu paste tepat di atasnya kode pada tahap nomor 2.
Jangan ubah kodenya selain yang saya sebutkan untuk menghindari error.
Apabila link halaman labelnya berbeda, silahkan ganti link halaman labelnya yang saya tandai warna kuning di kode berikut.
Kalian juga boleh mengubah kalimat "No bookmarks", "See more", dan "You are viewing the bookmarks page" dengan kalimat yang kalian inginkan, tetapi jika dirubah tidak apa-apa.<script>//<![CDATA[ const bookmarks = { maxWidget: 4, maxAll: 1000, emptyText: 'No bookmarks', moreText: 'See more', currentText: 'You are viewing the bookmarks page', morePage: '/search/label/Bookmarks', deleteText: '<svg viewBox="0 0 24 24"><path d="M18.8892 9.5542C18.8892 17.5732 20.0435 21.198 12.2797 21.198C4.5149 21.198 5.693 17.5732 5.693 9.5542"/><path d="M20.3651 6.47985H4.2146"/><path d="M15.7148 6.47983C15.7148 6.47983 16.2434 2.71411 12.2891 2.71411C8.33578 2.71411 8.86435 6.47983 8.86435 6.47983"/></svg>' }; !function(d){let ignielbookmark = JSON.parse(localStorage.getItem("ignielBookmark")) || []; d.querySelector(".ignielBookmark").querySelector("i").innerHTML = ignielbookmark.length; const bmCek = () => {if (ignielbookmark.length > 0){ignielbookmark.forEach((e) => {if (d.getElementById("bm-" + e.id)) {d.getElementById("bm-" + e.id).checked = true;}});}}; const bmRender = () => {localStorage.setItem("ignielBookmark", JSON.stringify(ignielbookmark)); d.querySelector(".ignielBookmark").querySelector("i").innerHTML = ignielbookmark.length; let bmContainer = d.querySelector(".bookmark-inner"), bmContainerAll = d.querySelector(".ignielBookmarks"), bmBuild = ""; if (ignielbookmark.length > 0) {let max = bookmarks.maxWidget, more = false; if (d.location.pathname == bookmarks.morePage) {max = bookmarks.maxAll;} else {max = bookmarks.maxWidget; if (ignielbookmark.length > max) {more = true;}} ignielbookmark.slice(0, max).forEach((e) => {bmBuild += '<li data-id="' + e.id + '"><div class="bm-thumb"><a href="' + e.url + '" title="' + e.title + '"><img alt="' + e.title + '" src="' + e.img + '" title="' + e.title + '"></a></div><div class="bm-title"><a href="' + e.url + '" title="' + e.title + '">' + e.title + '</a></div><div class="bm-delete" role="button">' + bookmarks.deleteText + "</div>";}); bmContainer.innerHTML += "</ul>"; if (d.location.pathname == bookmarks.morePage) {bmContainer.innerHTML = bookmarks.currentText; if (bmContainerAll) bmContainerAll.innerHTML = "<ul>" + bmBuild + "</ul>";} else {bmContainer.innerHTML = "<ul>" + bmBuild; if (more) {bmContainer.innerHTML += '<li class="bm-more"><a href="' + bookmarks.morePage + '" title="' + bookmarks.moreText + '">' + bookmarks.moreText + " (+" + (ignielbookmark.length - max) + ")</a></li>";}}} else {bmContainer && (bmContainer.innerHTML = bookmarks.emptyText); bmContainerAll && (bmContainerAll.innerHTML = bookmarks.emptyText);} bmDel();}; const bmAdd = (a) => {ignielbookmark.push(a); bmRender();}; const bmRem = (id) => {ignielbookmark = ignielbookmark.filter((obj) => obj.id !== id); bmRender(); if (d.getElementById("bm-" + id)) {d.getElementById("bm-" + id).checked = false;}}; const bmDel = () => {const a = d.querySelectorAll(".bm-delete"); if (a.length > 0) {a.forEach((e) => {const dId = e.parentNode.getAttribute("data-id"); e.addEventListener("click", () => {bmRem(dId);});});}}; const ignielBookmark = () => {const a = d.querySelectorAll(".ignielBookmarkPost input"); if (a.length > 0) {a.forEach((e) => {e.addEventListener("change", () => {const bmId = e.id.split("-")[1], bmParent = e.parentNode, bookmarkItem = {id: bmId, img: bmParent.querySelector("label").getAttribute("data-img"), title: bmParent .querySelector("label") .getAttribute("data-title"), url: bmParent.querySelector("label").getAttribute("data-url"),}; if (ignielbookmark) {const findId = ignielbookmark.find((obj) => obj.id === bmId); if (findId) {bmRem(bmId);} else {bmAdd(bookmarkItem);}} else {bmAdd(bookmarkItem);}});});}}; d.location.pathname == bookmarks.morePage && bmRender(); d.querySelector(".ignielBookmark").addEventListener("click", () => {bmRender();}); d.addEventListener("scroll", () => {bmCek; ignielBookmark}); ignielBookmark(); bmCek();}(document); //]]></script> - Selesai, sekarang kalian save dengan cara mengeklik icon bergambar disket atau kartu memori di kanan atas. Sekarang kalian sudah boleh keluar dari halaman Edit HTML.
Eits, masih belum selesai, sekarang lanjut ke langkah nomor 7.
7. Penyesuaian
Sekarang lihat dan coba lakukan testing terlebih dulu di blog atau website kalian.Apabila ada yang kurang sesuai, bisa diubah kode CSS-nya apabila desainnya tidak cocok, atau ubah letak penempatan kode tombolnya apabila dirasa tombolnya tidak berada di tempat yang kalian ingin.
Apabila sudah sesuai dan sudah cocok dengan apa yang kalian ingin, syukurlah.
Selesai.
Kesimpulan
Bagaimana? Mudah atau sulit? Insya Allah kalian bisa, buktinya saya bisa melakukannya bukan.Kalau dilihat memang agak rumit dan ribet. Tapi sebenarnya kita itu cuma copy paste kodenya saja, yang membuat sedikit ribet adalah karena kode setiap template berbeda-beda jadinya harus disesuaikan terlebih dulu agar tidak berantakan.
Sekian apa yang bisa penulis sampaikan pada artikel "Cara Membuat Tombol Bookmark Blog Menggunakan LocalStorage Browser di Blogspot (Blogger.com)" ini, semoga artikel ini bisa bermanfaat untuk semua orang dan terutama bagi yang sedang membutuhkannya.
Daftar Pustaka
- https://www.igniel.com/2022/12/widget-bookmark-blog.html