Membuat tombol bookmark dipostingan

Sebelum memulai, pastikan untuk memasang script di artikel berikut. Baca juga: Manipulasi Data menggunakan localStorage dan sessionStorage Pertama tamb…

Sebelum memulai, pastikan untuk memasang script di artikel berikut.

Pertama tambahkan tombol button agar berfungsi untuk menambahkan item kedalam bookmark.

<button class='addBookmark' data-id='1' data-title='Demonic Emperor' data-label='Fantasy, Cultivation'>Bookmark</button>

Bagian yang ditandai wajib ada. Berikut penjelasannya.

  • class untuk menandakan bahwa ini tombol bookmark.
  • data-id, data-title, data-label ini merupakan data yang akan di simpan ke dalam bookmark.

Kedua tambahkan HTML untuk menampilkan daftar bookmark yang tersimpan. Bookmark yang tersimpan akan di tampilkan didalam tag berikut.

<ul id='hasil'></ul>

Ketiga pasang script berikut diatas tag </body>

<script type="text/javascript">/*<![CDATA[*/
  !function(){let e=document.querySelectorAll(".addBookmark"),t=document.getElementById("hasil"),a=new StorageManipulation("book");function i(){let e=a.get(),i="";e.length>0&&e.forEach(e=>{i+="<li><p>"+e.title+"</p>",i+="<p>"+e.label+"</p></li>"}),t&&(t.innerHTML=i)}e.length>0&&e.forEach(e=>{let t=e.dataset.title,l=e.dataset.id,d=e.dataset.label;a.find("id",l).item&&(e.innerText="Bookmarked",e.classList.add("active")),i(),e.addEventListener("click",()=>{e.classList.contains("active")?(a.delete("id",l),e.innerText="Bookmark",e.classList.remove("active")):(a.add({id:l,title:t,label:d}),e.innerText="Bookmarked",e.classList.add("active")),i()})})}();
/*]]>*/</script>

Bagi yang ingin memahami kode diatas silahkan bertanya dikomentar. Maaf aku gk ahli dalam menjelaskan script secara langsung dalam postingan.

Berikut script yang tidak di minify.

(function () {
  let buttonBookmark = document.querySelectorAll('.addBookmark'),
    hasil = document.getElementById('hasil'),
    book = new StorageManipulation('book');

  function generateBookmark() {
    let items = book.get(),
      html = '';

    items.length > 0 && items.forEach(data => {
      html += '<li><p>' + data.title + '</p>';
      html += '<p>' + data.label + '</p></li>';
    });

    hasil && (hasil.innerHTML = html);
  };


  buttonBookmark.length > 0 && buttonBookmark.forEach(button => {
    let title = button.dataset.title,
      id = button.dataset.id,
      label = button.dataset.label,
      checkItem = book.find('id', id);

    if (checkItem.item) {
      button.innerText = 'Bookmarked';
      button.classList.add('active');
    };

    generateBookmark();

    button.addEventListener('click', () => {
      let checkClass = button.classList.contains('active');

      if (checkClass) {
        book.delete('id', id);
        button.innerText = 'Bookmark';
        button.classList.remove('active');
      } else {
        book.add({
          'id': id,
          'title': title,
          'label': label
        });
        button.innerText = 'Bookmarked';
        button.classList.add('active');
      }

      generateBookmark();
    });
  });
})();
12
Membuat tombol bookmark dipostingan
Membuat tombol bookmark dipostingan
Sebelum memulai, pastikan untuk memasang script di artikel berikut. Baca juga: Manipulasi Data menggunakan localStorage dan sessionStorage Pertama tamb…
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

12 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Wernayasa
    Saturday, August 17, 2024
    Profile: https://www.blogger.com/profile/09171272848542294839
    Apa bisa ditambahkan data-img?
    Apakah data-img bakal menyimpan gambar ke localstorage atau ia hanya menyimpan string url aja?
    Khawatir aja localstorage bakal cepat teisi gambar.
    • Dayat
      Saturday, August 17, 2024
      Profil: https://www.blogger.com/profile/02480525259652322034
      bisa. Perhatikan script yang tidak di minify.

      1. Bagian variable tinggal tambahkan seperti ini.
      let title = button.dataset.title,
      id = button.dataset.id,
      label = button.dataset.label,
      img = button.datase.img,
      checkItem = book.find('id', id);


      2. Penambahan bookmark nya.
      book.add({
      'id': id,
      'title': title,
      'label': label,
      'img': img
      });


      3. Terakhir Untuk menampilkan bookmark nya.
      function generateBookmark() {
      let items = book.get(),
      html = '';

      items.length > 0 && items.forEach(data => {
      html += '<li><p>' + data.title + '</p>';
      html += '<p>' + data.label + '</p></li>';
      html += '<img src="' + img + '">';
      });

      hasil && (hasil.innerHTML = html);
      };


      Bagian yang ditandai adalah data-img yg baru ditambahkan. Klo mau yang lain bisa juga, cara nya sama.

      Hanya string url nya saja tersimpan. Gambar asli tidak tersimpan.
  • Sukunai
    Saturday, August 17, 2024
    Profile: https://www.blogger.com/profile/12426106944896095024
    but how to use data-label in blogger
    meaning how to get data-label='post labels here'?
    • Шош. Сом
      Saturday, August 17, 2024
      Profil: https://www.blogger.com/profile/11131198046075365419
      insert label manual.

      Alternative use BloggerScript like this.
      https://codepen.io/siwaluh/pen/XWLVLvz

      BloggerScript v3
      https://cdn.jsdelivr.net/gh/siwaluh/BloggerScript@main/main/BloggerScript.min.js
  • Anix Realm
    Monday, August 19, 2024
    Profile: https://www.blogger.com/profile/14755215946123883341
    hello min , i added the above according to the documentation above but it did not worked on my blog , i am using bloggerscript v2
    • Шош. Сом
      Monday, August 19, 2024
      Profil: https://www.blogger.com/profile/11131198046075365419
      v2 version.
      (function () {
      let buttonBookmark = document.querySelectorAll('.addBookmark'),
      hasil = document.getElementById('hasil'),
      book = new StorageManipulation('book');

      function generateBookmark() {
      let items = book.get(),
      html = '';

      items.length > 0 && items.forEach(data => {
      html += '<li><p>' + data.title + '</p>';
      html += '<p>' + data.link + '</p>';
      html += '<img src="' + data.image + '">';
      html += '<p>' + data.date + '</p>';
      html += '<p>' + data.label.join(', ') + '</p></li>';
      });

      hasil && (hasil.innerHTML = html);
      };


      buttonBookmark.length > 0 && buttonBookmark.forEach(button => {
      let id = button.dataset.id,
      checkItem = book.find('id', id);

      if (checkItem.item) {
      button.innerText = 'Bookmarked';
      button.classList.add('active');
      };

      generateBookmark();

      button.addEventListener('click', () => {
      let checkClass = button.classList.contains('active');

      if (checkClass) {
      book.delete('id', id);
      button.innerText = 'Bookmark';
      button.classList.remove('active');
      generateBookmark();
      } else {
      let bS = new BloggerScript({
      'sizeImage': 's240',
      });
      button.innerText = 'loading...';
      bS.xhr2('https://komikav-clone.blogspot.com/feeds/posts/summary/' + id + '?alt=json-in-script', (post) => {
      if (post.entry) {
      post = bS.getFeed({
      'feed': {
      'entry': [post.entry]
      }
      });
      book.add(post[0]);
      button.innerText = 'Bookmarked';
      button.classList.add('active');
      } else {
      button.innerText = 'error';
      setTimeout(() => {
      button.innerText = 'Bookmark';
      }, 2000);
      }
      generateBookmark();
      });

      }
      });
      });
      })();

      Demo on Codepen.
      https://codepen.io/siwaluh/pen/QWXQOyP
    • Anix Realm
      Saturday, August 24, 2024
      Profil: https://www.blogger.com/profile/14755215946123883341
      it is not working on my theme min 😭😭
    • Шош. Сом
      Saturday, August 24, 2024
      Profil: https://www.blogger.com/profile/11131198046075365419
      Try this.
      replace the marked code.
      button.innerText = 'loading...';
      fetch('/feeds/posts/summary/' + id + '?alt=json').then(e => {
      return e.json();
      }).then(post => {
      book.add({
      'title': post.entry.title.$t,
      'label': post.entry.category.map(i => i.term),
      'link': post.entry.link.find(i => i.rel == 'alternate').href
      });
      button.innerText = 'Bookmarked';
      button.classList.add('active');
      generateBookmark();
      }).catch(error => {
      button.innerText = 'error';
      setTimeout(() => {
      button.innerText = 'Bookmark';
      }, 2000);
      generateBookmark();
      });

      the script not use BloggerScript.
  • Anix Realm
    Monday, September 09, 2024
    Profile: https://www.blogger.com/profile/14755215946123883341
    hello min , i am developing moopa clone , i need help bro for adding a bookmark system for my theme . can you please help me ?
  • Rafiq8K
    Sunday, October 13, 2024
    Profile: https://www.blogger.com/profile/03219601279638876027
    kalau agar dia di store ke firebase bang? jadi orang yg login bisa cek hasil bookmarknya tanpa perlu pindahin cookie nya
  • Wernayasa
    Saturday, November 16, 2024
    Profile: https://www.blogger.com/profile/09171272848542294839
    @dayat
    Pantesan lama gk aktif.
    Apa laptopnya sudah diperbaiki?
  • Xenoicy
    Wednesday, December 04, 2024
    Profile: https://www.blogger.com/profile/07123898444593098130
    let title = button.dataset.title,
    id = button.dataset.id,
    label = button.dataset.label,
    img = button.datase.img,
    checkItem = book.find('id', id);