ProjeXCode Forum: Fitur Bookmark Menggunakan LocalStorage

Title Role Staff

Title Role Senior Member

Title Role Member

Title Role Junior Member

Title Role New Member

Title Badge Moderator

Title Color Moderator

Title Badge Staff

Title Color Staff

Title Badge Member

Title Color Member

Status Info

Status Verified

ADS Title User

Your Time :

Server Time :

  • Fitur Bookmark Menggunakan LocalStorage
    March 09, 2022
    Share this Threads
    Close
    Request Dari Meghan Kamui

    Demo Fitur Bookmark Click Disini.

    Kalian Buat Button Bookmarknya sendiri ya :D.
    Jika Sudah Tambahkan Class ini pada Button Bookmark Kalian.

    bookmark


    setelah itu tambahkan pula Expression data id pada btn kalian.

    expr:data-id='data:post.id'


    contoh hasilnya :

    <div class='bookmark' expr:data-id='data:post.id'>Bookmark</div>


    perlu diketahuan hal yang mengenai Expression wajib kalian letakkan dalam markup yang mengandung value data:posts.

    jadi jika kalian tempatkan diluar markup yang tidak ada value data post tadi maka Expression nya bakal null/tidak ada.

    Letakkan Script Bookmark.js diatas tag </body>

    Script Bookmark.js :

    <b:if cond='data:view.isPost'>
    <script>//<![CDATA[
    var limitBookmark = 100;
    var bookmark = (function(){
    list = [];
    
    //Structure Push to Object New Item
    function Item(id,name,status,type,link,img){
    	this.id = id;
    	this.name = name;
        this.status = status;
    	this.type = type;
        this.link = link;
    	this.img = img;
    }
    
    //Event Saving to Local Storage
    function setBookmark(){
    	localStorage.setItem('bookmark', JSON.stringify(list));
    }
    
    function loadBookmark() {
        list = JSON.parse(localStorage.getItem('bookmark'));
    }
    
    if (localStorage.getItem("bookmark") != null) {
        loadBookmark();
    }
    
    obj = {};
    //Add New Item Object to Array
    obj.addItemTobookmark = function(id,name,status,type,link,img) {
        var item = new Item(id,name,status,type,link,img),
        itemList = list;
        if(itemList != null){
        same = itemList.find(item =>{return item.id == id;});
        if(list.length<limitBookmark){
         if(!same){
        	list.push(item);
        	setBookmark();
          }
         }
        }else{
        	list.push(item);
        	setBookmark();
        }
    }
    
    //Remove Bookmark    
    obj.removeThisItem = function(id) {
        for(var item in list) {
          if(list[item].id === id) {
            list.splice(item, 1);
            break;
          }
        }
        setBookmark();
      }
      
      return obj;
    })();
    
    $('.bookmark').each(function(event) {
    const getData = JSON.parse(localStorage.getItem('bookmark'));
    for(var i in getData){
    	if(getData[i].id == $(this).data('id')){
         $(this).html('Bookmarked')
         $(this).addClass('bookmarked')
        }
    }
      $(this).click(function(){
    const list = JSON.parse(localStorage.getItem('bookmark'));
      //Retrieve Data From Post
      	const id = $(this).data('id'),
      	name = $('article.oh.a2 header h1.mb-6').text().replace('\n',''),
        link = location.protocol + '//' + location.hostname +  location.pathname,
        img = $('div.grid div.a1 figure img').attr('src'),
        status = $('aside.s1 div.y6x11p:nth-child(1) span.dt a').text().replace('\n',''),
        type = $('aside.s1 div.y6x11p:nth-child(2) span.dt a').text().replace('\n','');
        
      //Set To Function Bookmark
    if(list == null){
      if(!$(this).hasClass('bookmarked')){
        	bookmark.addItemTobookmark(id,name,status,type,link,img);
      		$(this).addClass('bookmarked')
      		$(this).html('Bookmarked')
      }else{
      	bookmark.removeThisItem(id);
      	$(this).html('Bookmark <svg height="24" viewBox="0 0 24 24" width="24"><path d="M17,18L12,15.82L7,18V5H17M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z" fill="#fff"/></svg>')
      	$(this).removeClass('bookmarked')
      }
    }else{
      if(!$(this).hasClass('bookmarked')){
    if(list.length<limitBookmark){
        	bookmark.addItemTobookmark(id,name,status,type,link,img);
      		$(this).addClass('bookmarked')
      		$(this).html('Bookmarked')
    }
      }else{
      	bookmark.removeThisItem(id);
      	$(this).html('Bookmark <svg height="24" viewBox="0 0 24 24" width="24"><path d="M17,18L12,15.82L7,18V5H17M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z" fill="#fff"/></svg>')
      	$(this).removeClass('bookmarked')
      }
    }
      })
    });
         //]]></script>
         </b:if>


    Setting limitBookmark suka-suka kalian asal ga 1juta.localStorage hanya dibatasi sampai 5MB.Baca Selengkapnya dibawah:

    https://web.dev/storage-for-the-web/


    untuk Penargetan pada btn event di Bookmark.js kalian ubah sendiri ya karena setiap structure theme beda2,kecuali kalian komen dibawah nanti saya bantu.

    structure btn event yg dimaksud :

    const id = $(this).data('id'),
      	name = $('article.oh.a2 header h1.mb-6').text().replace('\n',''),
        link = location.protocol + '//' + location.hostname +  location.pathname,
        img = $('div.grid div.a1 figure img').attr('src'),
        status = $('aside.s1 div.y6x11p:nth-child(1) span.dt a').text().replace('\n',''),
        type = $('aside.s1 div.y6x11p:nth-child(2) span.dt a').text().replace('\n','');


    next.kalian buat halaman statis (apa sih halaman statis ?.yang itu loh urlnya blogmucom/p/....html)

    Structure InPage :

    <style>
      .clearAll{font-size: 12px;color: white;background: red;padding: 2px 12px;border-radius: 4px;cursor: pointer;}
      .btnRemove{padding: 4px 0;text-align: center;background: red;color: white;font-weight: 600;border-radius: 8px;cursor: pointer;}
      .notice{background: #860a0a;color: white;padding: 10px 18px;border-radius: 8px;text-align: center;margin-bottom:8px;}
      .showBookmark{display: grid;grid-template-columns: repeat(5,minmax(225px,250px));grid-gap:12px;}
      .showBookmark article {display: grid;grid-template-rows: 1fr auto;grid-gap:15px;}
      article div.limit{position: relative;border-radius: 8px;overflow:hidden;}
      .bsx:hover div.limit img{scale:1.2;}
      article div.limit .typez{position: absolute;top: 0;z-index: 1;right: 0;background: var(--primary-color);color: var(--hf1f);padding: 4px 12px;border-radius: 0 8px;}
      article div.limit div.bt{position: absolute;bottom: 0;z-index: 1;left: 0;background: #ff0054;color: white;padding: 4px 12px;border-radius: 0 8px;}
      article div.limit div.ply{position: absolute;left: 0;right: 0;z-index: 1;bottom: 0;top: 0;}
      article div.limit div.ply:before{content: '';position: absolute;top: 0;bottom: 0;right: 0;left: 0;background: #000000a6;z-index: -1;display: none;}
      .bsx:hover div.limit div.ply:before,.bsx:hover div.limit div.ply svg{display:block !important;}
      article div.limit div.ply svg{display: block;margin: 0 auto;fill: white;height: 100%;width: 90px;display: none;}
      article div.limit img{display: block;position: relative;z-index: 0;width: 230px;border-radius: inherit;height: 300px;}
      div.tt{text-align: center;font-weight: 600;}
      div.tt h2{display: none;}
    </style>
    <div class='notice'>Limit menyimpan daftar anime hanya 100 judul. Daftar anime disimpan di browser yang sedang kalian gunakan.Apabila anda membuka halaman ini dengan browser yang berbeda,maka daftar kalian yang sudah kalian simpan sebelumnya tidak akan tampil.</div>
    <div class='showBookmark'></div>
    
    <script>
    var bookmark = (function(){
    list = [];
    
    //Event Saving to Local Storage
    function setBookmark(){
    	localStorage.setItem('bookmark', JSON.stringify(list));
    }
    
    function loadBookmark() {
        list = JSON.parse(localStorage.getItem('bookmark'));
    }
    
    if (localStorage.getItem("bookmark") != null) {
        loadBookmark();
    }
    
    obj = {};
    //Clear Bookmark
    obj.clearALL = function() {
        list = [];
        setBookmark();
      }
      //Remove Bookmark    
    obj.removeThisItem = function(id) {
        for(var item in list) {
          if(list[item].id === id) {
            list.splice(item, 1);
            break;
          }
        }
        setBookmark();
      }
      return obj;
    })();
    
    function displayIt(){
    var getData = JSON.parse(localStorage.getItem('bookmark'));
      var structure = '';
      for(var i in getData){
       structure += '<article class="box" itemscope="itemscope" itemtype="http://schema.org/CreativeWork">'
    			 +	'<div id="'+getData[i].id+'" class="bsx">'
    			 +	'<a href="'+getData[i].link+'" itemprop="url" title="'+getData[i].name+'">'
    			 +	'<div class="limit"><div class="typez '+getData[i].type+'">'+getData[i].type+'</div>'
    			 +	'<div class="ply"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></div>'
    			 +	'<div class="bt"><span class="epx">'+getData[i].status+'</span></div>'
    			 +	'<img src="'+getData[i].img+'" loading="lazy" itemprop="image" title="'+getData[i].name+'" alt="'+getData[i].name+'"></div>'
    			 +	'<div class="tt">'+getData[i].name+'<h2 itemprop="headline">'+getData[i].name+'</h2></div></a></div>'
    			 +	'<div class="btnRemove" data-id="'+getData[i].id+'">Remove</div></article>';
      }
      $('.showBookmark').html(structure);
    }
    $('.clearAll').click(function(){
      bookmark.clearALL();
      displayIt();
    });
    $('.showBookmark').on("click", ".btnRemove", function(event) {
      bookmark.removeThisItem($(this).data('id'));
      displayIt();
    })
    displayIt();
    </script>


    disini gada yang perlu diganti kecuali style.

    nah untuk memunculkan btn Clear All seperti di demo.tambahkan ini di heading title halaman kalian :

    <b:if cond='data:view.url == data:blog.homepageUrl path &quot;/p/bookmark.html&quot;'>
                                    <div class='clearAll'>Clear All</div>
                                    </b:if>


    Keterangan :

    - Apabila hasilnya kosong misal type atau statusnya kosong. structurenya dideketin jangan sampai ada cela.
    contoh :

    Before
    <div>
    <data:label.name/>
    </div>


    After
    <div><data:label.name/></div>
    Last edited : March 09, 2022
    Wed Mar 09, 11:40:00 PM GMT+9
    Asli keren bgt, akan kupakai untuk update tema berikutnya.
    Pasti banyak pemula yg kesulitan di bagian memasang ID/Clear khususnya di bagian btn event. XD

    Saya juga bantuin deh kalau ada yg nanya2,
    biar kerjaan Kang pikachu jadi ringan.
    Thu Mar 10, 01:59:00 AM GMT+9
    makasih om, nasib banget, aku gak bisa javascript :"(
    Thu Mar 10, 02:05:00 AM GMT+9
    btw om @Wernayasa dirimu mau buat tema apaan?
    Thu Mar 10, 09:35:00 AM GMT+9
    oh ya lupa. Untuk tampilan Mobile kalian responsive in sendiri ya pada bagian In Page (halaman statis) :D.

    jika gada yg tau gimana responsive innya pakai media screen.
    contoh :
    @media screen and (max-width:720px){

    Element selector css

    }


    kemarin saya cuma bikin tampilan desktopnya.tinggal responsive in ukuran gambar + display gridnya aja
    Thu Mar 10, 03:19:00 PM GMT+9
    @Meghan Kamui
    Streaming
    Tue Mar 15, 06:29:00 PM GMT+9
    min bisa minta bantuin gak? soalnya gak paham sama sekali :)
    Tue Mar 15, 06:48:00 PM GMT+9
    bisa,emang hambatannya dimana ?
    Tue Mar 15, 06:55:00 PM GMT+9
    https://blogger.googleusercontent.com/img/a/AVvXsEjGkG_pWmbk8khgRjHUk1GiM-h--Z6COAg5viJDxic89KR__GBqDUJ2BuBxBGwaPzXndBPRKv_krsTYsCLlbtgmTTL1-flqhqwMKyRS0ss2Xu-YEnE5WBfrkqOcsNGZ8bXvCcoqmwMYLVtglmrjmgXJVVqS839CYl8xHmI2I6bWOUYdYKkwwp4L1cXL kayak gini min, sama gak paham penargetan pada btn event
    Tue Mar 15, 07:01:00 PM GMT+9
    spill link blognya.kalau privacy bisa pm ke sosmed di footer nanti ku cek
    Tue Mar 15, 07:07:00 PM GMT+9
    https://kenimeid.blogspot.com/
    Tue Mar 15, 07:17:00 PM GMT+9
    coba ini :
    const id = $(this).data('id'),
    name = $('h1.entry-judul').text().replace('\n',''),
    link = location.protocol + '//' + location.hostname + location.pathname,
    img = $('img.post-thumbnail').attr('src'),
    status = $('.aniInfo div.infonya:nth-child(1) span').text().replace('\n',''),
    type = $('.stinfo div.tinfo span span i').text().replace('\n','');
    Tue Mar 15, 07:22:00 PM GMT+9
    udh bisa tapi masih gak bisa di remove
    Tue Mar 15, 07:41:00 PM GMT+9
    coba hapus ini dibagian inPage.js nya :
    $('.clearAll').click(function(){
    bookmark.clearALL();
    displayIt();
    });
    Tue Mar 15, 09:00:00 PM GMT+9
    masih gak bisa min
    Tue Mar 15, 09:08:00 PM GMT+9
    cek structur di page staticmu itu aja yg muncul cuma ongoing ovanya gada, kemungkinan ada yg tabrakan scriptnya.

    coba hapus bookmark bawaannya
    Tue Mar 15, 09:17:00 PM GMT+9
    OVA nya ada min dipojok kanan atas
    Tue Mar 15, 09:36:00 PM GMT+9
    bukan di post tpi di page bookmark, hancur itu tampilannya ada yg bentrok. coba sama in ama yg di demo
    Tue Mar 15, 09:50:00 PM GMT+9
    oh ternyata itu cuma background ama colornya bermasalah makanya ga keliatan ovanya tpi ongoingnya kelembaran.

    coba kamu full copy ga usah di packed jsnya.
    Tue Mar 15, 10:05:00 PM GMT+9
    udh min masih belum bisa, kayaknya templatenya bermasalah soalnya kucoba ditemplate lain biasa aja
    Tue Mar 15, 10:47:00 PM GMT+9
    habis download ver 1.5 dan ku cek,
    memang bermasalah script simple buat munculin Alert aja ga aktif btn eventnya.pdahal ku cek jquery librarynya ada.

    <div id='hello'>Click This</div>
    <script>
    $('#hello').click(function(){
    alert('Hello');
    });
    </script>
    Wed Mar 16, 09:21:00 AM GMT+9
    ada cara buat ngefix nya gak min?
    Wed Mar 16, 10:54:00 AM GMT+9
    harusnya ada tapi butuh waktu buat kamu pahami structure yg dibuat kang nolep
    Wed Mar 16, 06:09:00 PM GMT+9
    min minta bantuan lagi min, ini udh bisa diremove tapi kenapa kadang gambar nya tidak ada, dan kadang tidak tampil bookmarknya / harus direfresh halamannya
    Wed Mar 16, 06:44:00 PM GMT+9
    baru sadar aku itu jQuery Librarynya dibikin async:

    <script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>


    hapus :

    async='async'

    bakal normal itu nanti
    Wed Mar 16, 06:50:00 PM GMT+9
    bisa min tapi gambarnya belum bisa masuk
    Wed Mar 16, 07:03:00 PM GMT+9
    oh itu gara2 pake lazyload jadi yg keambil base64nya.

    target elementnya kamu ubah jadi ini yg bagian img:
    img = $('img.post-thumbnail').data('src')
    Wed Mar 16, 07:09:00 PM GMT+9
    makasih banyak min dah bisa
    Wed Mar 16, 07:21:00 PM GMT+9
    yow sama2. sorry kalo tadi malam diriku lebih teliti buat ngeceknya bakal kelar dluan.

    permasalahan di theme itu ada di jquery yg dibikin async jadi librarynya ga keload dluan
    Thu Mar 17, 03:16:00 PM GMT+9
    min ada gak cara biar tombolnya removenya show hide?, tadi kucoba munculnya cuman 1 series doang
    Thu Mar 17, 04:09:00 PM GMT+9
    Step 1 :
    bikin class btnRemove jadi display:none.
    .btnRemove{padding: 4px 0;text-align: center;background: red;color: white;font-weight: 600;border-radius: 8px;cursor: pointer;display:none;}

    dan tambahkan class active.
    .active{display:block;}

    Step 2 :
    Pasang Markup ini disamping Clear All dan untuk style kamu buat sendiri.
    <div class='hapus'>Hapus</div>

    Step 3 :
    Untuk JS kamu pasang diantara InPage.js atau ga bikin tag script baru.
    $('.hapus').click(function(){
    if(!$('.btnRemove').hasClass('active')){
    $('.btnRemove').addClass('active');
    }else{
    $('.btnRemove').removeClass('active');
    }
    });
    Thu Mar 17, 04:27:00 PM GMT+9
    thanks min
    Thu Mar 17, 05:34:00 PM GMT+9
    min kok setiap diremove balik lagi jadi hilang tombolnya?
    Thu Mar 17, 06:10:00 PM GMT+9
    coba kamu pasang biar ku cek
    Thu Mar 17, 06:14:00 PM GMT+9
    udh ku pasang min
    Thu Mar 17, 06:24:00 PM GMT+9
    bntr ku buatkan JS yang baru
    Thu Mar 17, 06:46:00 PM GMT+9
    cari inPage.js.

    function displayit :
    function displayIt(){
    var getData = JSON.parse(localStorage.getItem('bookmark'));
    var structure = '';
    for(var i in getData){
    structure += '<article class="box" itemscope="itemscope" itemtype="http://schema.org/CreativeWork">'
    + '<div id="'+getData[i].id+'" class="bsx">'
    + '<a href="'+getData[i].link+'" itemprop="url" title="'+getData[i].name+'">'
    + '<div class="limit"><div class="typez '+getData[i].type+'">'+getData[i].type+'</div>'
    + '<div class="ply"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></div>'
    + '<div class="bt"><span class="epx">'+getData[i].status+'</span></div>'
    + '<img src="'+getData[i].img+'" loading="lazy" itemprop="image" title="'+getData[i].name+'" alt="'+getData[i].name+'"></div>'
    + '<div class="tt">'+getData[i].name+'<h2 itemprop="headline">'+getData[i].name+'</h2></div></a></div>'
    + '<div class="btnRemove" data-id="'+getData[i].id+'">Remove</div></article>';
    }
    $('.showBookmark').html(structure);
    }


    Ganti dengan ini :
    function displayIt(){
    var getData = JSON.parse(localStorage.getItem('bookmark'));
    var structure = '';
    for(var i in getData){
    structure += '<article class="box" itemscope="itemscope" itemtype="http://schema.org/CreativeWork" data-id="'+getData[i].id+'">'
    + '<div id="'+getData[i].id+'" class="bsx">'
    + '<a href="'+getData[i].link+'" itemprop="url" title="'+getData[i].name+'">'
    + '<div class="limit"><div class="typez '+getData[i].type+'">'+getData[i].type+'</div>'
    + '<div class="ply"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></div>'
    + '<div class="bt"><span class="epx">'+getData[i].status+'</span></div>'
    + '<img src="'+getData[i].img+'" loading="lazy" itemprop="image" title="'+getData[i].name+'" alt="'+getData[i].name+'"></div>'
    + '<div class="tt">'+getData[i].name+'<h2 itemprop="headline">'+getData[i].name+'</h2></div></a></div>'
    + '<div class="btnRemove" data-id="'+getData[i].id+'">Remove</div></article>';
    }
    $('.showBookmark').html(structure);
    }
    Thu Mar 17, 06:46:00 PM GMT+9
    cari event btn delete :
    $('.showBookmark').on("click", ".btnRemove", function(event) {
    bookmark.removeThisItem($(this).data('id'));
    displayIt();
    })


    ganti dengan ini :
    $('.showBookmark').on("click", ".btnRemove", function(event) {
    var id='article[data-id="'+$(this).data('id')+'"]';
    bookmark.removeThisItem($(this).data('id'));
    $(id).remove();
    })
    Thu Mar 17, 06:51:00 PM GMT+9
    makasih min sudah bisa, maaf ngerepotin🙏
    Thu Mar 17, 08:13:00 PM GMT+9
    yow sama2
    Fri Mar 18, 03:38:00 PM GMT+9
    Apa ada counter untuk menghitung jumlah yg dibookmark?
    Rencana mau kuletakkan di nav, biar orang tau berapa jumlah bookmark mereka.
    Slow aja updatenya, aku tau km sibuk.
    Fri Mar 18, 06:31:00 PM GMT+9
    tinggal tambahin increment aja.

    ubah function displayit :
    function displayIt(){
    var getData = JSON.parse(localStorage.getItem('bookmark'));
    var structure = '';
    for(var i in getData){
    structure += '<article class="box" itemscope="itemscope" itemtype="http://schema.org/CreativeWork">'
    + '<div id="'+getData[i].id+'" class="bsx">'
    + '<a href="'+getData[i].link+'" itemprop="url" title="'+getData[i].name+'">'
    + '<div class="limit"><div class="typez '+getData[i].type+'">'+getData[i].type+'</div>'
    + '<div class="ply"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></div>'
    + '<div class="bt"><span class="epx">'+getData[i].status+'</span></div>'
    + '<img src="'+getData[i].img+'" loading="lazy" itemprop="image" title="'+getData[i].name+'" alt="'+getData[i].name+'"></div>'
    + '<div class="tt">'+getData[i].name+'<h2 itemprop="headline">'+getData[i].name+'</h2></div></a></div>'
    + '<div class="btnRemove" data-id="'+getData[i].id+'">Remove</div></article>';
    }
    $('.showBookmark').html(structure);
    }


    menjadi :
    function displayIt(){
    var getData = JSON.parse(localStorage.getItem('bookmark'));
    var structure = '';
    let num = 0;
    for(var i in getData){
    num++
    structure += '<article class="box" itemscope="itemscope" itemtype="http://schema.org/CreativeWork">'
    + '<div id="'+getData[i].id+'" class="bsx">'
    + '<a href="'+getData[i].link+'" itemprop="url" title="'+getData[i].name+'">'
    + '<div class="limit"><div class="typez '+getData[i].type+'">'+getData[i].type+'</div>'
    + '<div class="ply"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></div>'
    + '<div class="bt"><span class="epx">'+getData[i].status+'</span></div>'
    + '<img src="'+getData[i].img+'" loading="lazy" itemprop="image" title="'+getData[i].name+'" alt="'+getData[i].name+'"></div>'
    + '<div class="tt">'+getData[i].name+'<h2 itemprop="headline">'+getData[i].name+'</h2></div></a></div>'
    + '<div class="btnRemove" data-id="'+getData[i].id+'">Remove</div></article>';
    }
    $('.showBookmark').html(structure);
    $('.numshow').html(num);
    }


    tambahkan markup result :
    <span class='numshow'></span>
    Fri Mar 18, 10:42:00 PM GMT+9
    oh buat di nav, besok ku kasih yg simple. kebiasaan kurang teliti klo multi tasking www

    itu yg comment atas buat di inPage staticnya
    Fri Mar 18, 10:52:00 PM GMT+9
    kalo misalnya gak ada bookmark dibuat tulisan YOU HAVE NO BOOKMARK, NOTHING TO SHOW
    gimana min?
    Fri Mar 18, 11:04:00 PM GMT+9
    Nice, thank you
    Sat Mar 19, 07:12:00 AM GMT+9
    Demo Bisa dicek di Link Demo Post.

    tambahkan script ini di atas script Bookmark.js :
    <script>//<![CDATA[
    function displayNum(){
    var dataLocal = JSON.parse(localStorage.getItem('bookmark'));
    let num = 0;
    for(var item in dataLocal){
    num++
    }
    $('.numshow').html(num);
    }
    displayNum();
    //]]></script>


    Habis itu di Script Bookmark.js kamu cari script yg mirip dibawah :
    $('.bookmark').each(function(event) {
    const getData = JSON.parse(localStorage.getItem('bookmark'));
    for(var i in getData){
    if(getData[i].id == $(this).data('id')){
    $(this).html('Bookmarked')
    $(this).addClass('bookmarked')
    }
    }
    $(this).click(function(){
    const list = JSON.parse(localStorage.getItem('bookmark'));
    //Retrieve Data From Post
    const id = $(this).data('id'),
    name = $('article.oh.a2 header h1.mb-6').text().replace('\n',''),
    link = location.protocol + '//' + location.hostname + location.pathname,
    img = $('div.grid div.a1 figure img').attr('src'),
    status = $('aside.s1 div.y6x11p:nth-child(1) span.dt a').text().replace('\n',''),
    type = $('aside.s1 div.y6x11p:nth-child(2) span.dt a').text().replace('\n','');

    //Set To Function Bookmark
    if(list == null){
    if(!$(this).hasClass('bookmarked')){
    bookmark.addItemTobookmark(id,name,status,type,link,img);
    $(this).addClass('bookmarked')
    $(this).html('Bookmarked')
    }else{
    bookmark.removeThisItem(id);
    $(this).html('Bookmark ')
    $(this).removeClass('bookmarked')
    }
    }else{
    if(!$(this).hasClass('bookmarked')){
    if(list.length')
    $(this).removeClass('bookmarked')
    }
    }
    })
    });


    Ganti Dengan :
    $('.bookmark').each(function(event) {
    const getData = JSON.parse(localStorage.getItem('bookmark'));
    for(var i in getData){
    if(getData[i].id == $(this).data('id')){
    $(this).html('Bookmarked')
    $(this).addClass('bookmarked')
    }
    }
    $(this).click(function(){
    const list = JSON.parse(localStorage.getItem('bookmark'));
    //Retrieve Data From Post
    const id = $(this).data('id'),
    name = $('article.oh.a2 header h1.mb-6').text().replace('\n',''),
    link = location.protocol + '//' + location.hostname + location.pathname,
    img = $('div.grid div.a1 figure img').attr('src'),
    status = $('aside.s1 div.y6x11p:nth-child(1) span.dt a').text().replace('\n',''),
    type = $('aside.s1 div.y6x11p:nth-child(2) span.dt a').text().replace('\n','');

    //Set To Function Bookmark
    if(list == null){
    if(!$(this).hasClass('bookmarked')){
    bookmark.addItemTobookmark(id,name,status,type,link,img);
    $(this).addClass('bookmarked')
    $(this).html('Bookmarked')
    }else{
    bookmark.removeThisItem(id);
    $(this).html('Bookmark ')
    $(this).removeClass('bookmarked')
    }
    }else{
    if(!$(this).hasClass('bookmarked')){
    if(list.length')
    $(this).removeClass('bookmarked')
    }
    }
    displayNum();
    })
    });


    ini bertujuan agar waktu Bookmarked/Unbookmark update secara realtime jumlahnya
    Sat Mar 19, 07:20:00 AM GMT+9
    Notice "No Bookmarked".demo bisa di check di link post

    Cari function displayit() ganti dengan ini :
    function displayIt(){
    var getData = JSON.parse(localStorage.getItem('bookmark'));
    var structure = '';
    for(var i in getData){
    structure += '<article class="box" itemscope="itemscope" itemtype="http://schema.org/CreativeWork">'
    + '<div id="'+getData[i].id+'" class="bsx">'
    + '<a href="'+getData[i].link+'" itemprop="url" title="'+getData[i].name+'">'
    + '<div class="limit"><div class="typez '+getData[i].type+'">'+getData[i].type+'</div>'
    + '<div class="ply"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></div>'
    + '<div class="bt"><span class="epx">'+getData[i].status+'</span></div>'
    + '<img src="'+getData[i].img+'" loading="lazy" itemprop="image" title="'+getData[i].name+'" alt="'+getData[i].name+'"></div>'
    + '<div class="tt">'+getData[i].name+'<h2 itemprop="headline">'+getData[i].name+'</h2></div></a></div>'
    + '<div class="btnRemove" data-id="'+getData[i].id+'">Remove</div></article>';
    }
    if(getData == null || getData == ''){
    $('.showBookmark').html('Maaf tidak ada item bookmark');
    }else{
    $('.showBookmark').html(structure);
    }
    }
    Sat Mar 19, 07:24:00 AM GMT+9
    untuk Comment ini Show Num
    Tambahkan Markup HTML :
    <span class='numshow'>0</span>

    Style :
    .numshow {
    background: #ffffff69;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 12px;
    }


    hampir aja lupa -_-
    Sat Mar 19, 04:16:00 PM GMT+9
    Min tadi kan aku mau masukin script ini ke template<script type='text/javascript'>
    //<![CDATA[
    function replaceText(){if(!document.getElementById){return;}
    bodyText = document.getElementById("outer-wrapper");
    theText = bodyText.innerHTML;
    theText = theText.replace(/s72-c/gi, "s400");
    bodyText.innerHTML = theText;
    }replaceText();
    //]]>
    </script>
    tapi habis dipasang script bookmarknya error mohon bantuannya min
    Sat Mar 19, 06:10:00 PM GMT+9
    kalo dari scriptnya gada masalah.dan ku cek console.log gada yg error.

    coba kamu taruh diatas script bookmarknya
    Sat Mar 19, 06:45:00 PM GMT+9
    masih error, btw itu script buat biar gambar yg ada di New Update gak burem
    Sat Mar 19, 07:14:00 PM GMT+9
    coba hapus displaynum atau ga kamu pasang tag untuk displaynum kemungkinan gara2 itu
    Sat Mar 19, 07:14:00 PM GMT+9
    tag yg kumaksud markup htmlnya
    Sat Mar 19, 11:47:00 PM GMT+9
    dah min gua nyerah aja
    Mon Mar 28, 10:09:00 PM GMT+9
    min bisa request? untuk data bookmark yang baru munculnya di awal bukan di akhir bisa gak min
    Tue Mar 29, 05:33:00 AM GMT+9
    Tinggal kamu tambahin reverse aja di Script inPage.

    Cari code ini di script inPage :
    var getData = JSON.parse(localStorage.getItem('bookmark'));

    Ubah jadi ini :
    var getData = JSON.parse(localStorage.getItem('bookmark')).reverse();
    Tue Mar 29, 10:28:00 AM GMT+9
    Kalau mau merubah type manga pake icon svg gimana caranya min?
    Tue Mar 29, 11:01:00 AM GMT+9
    ralat (lupa cantumin highlighter)
    ubah "type" pada Bookmark.js dengan ini :
    type = $('aside.s1 div.y6x11p:nth-child(2) span.dt a').html();
    Tue Mar 29, 11:02:00 AM GMT+9
    jika tempatnya beda. sesuaikan dengan selectornya
    Mon Apr 25, 01:02:00 AM GMT+9
    [ASK] Bang asking donk, kalau mau buat double bookmark bisa gak trus apa aja yang musti diganti?
    Mon Apr 25, 05:25:00 AM GMT+9
    bisa asal key untuk set/get-nya kamu bedain seperti script diatas menggunakan key "bookmark" jadi kamu harus bedain agar tidak sama. klo sama itu bakal ke tiban/replace
    Mon Apr 25, 10:37:00 PM GMT+9
    Klo gtu request donk bang ..
    Tolong pang buatin untuk mode episode bang. Klo ini kan system bookmark, wa request system episode bang
    Tue Apr 26, 03:30:00 PM GMT+9
    dan mohon bantuannya untuk
    var root = document.documentElement
    var button = document.querySelector('.fit-btn')
    button.addEventListener('click', () => {
    root.classList.toggle('fit')
    if (root.classList.contains('fit')) {
    localStorage.setItem('isFit', '1')
    } else {
    localStorage.removeItem('isFit')
    }

    })

    bagaimana cara localstorage nya aktif bang. ketika wa klik dia aktif namun ketika saya refresh dia kembali seperti semula
    Wed Apr 27, 12:02:00 AM GMT+9
    1. Untuk Pertanyaan Pertama.
    cek link dibawah :
    https://www.forum.projexcode.com/p/projexcode-discussion.html#c1518484711827410188

    2. Kamu harus manggil localstrogae sesuai keynya

    if (localStorage.getItem("isFit") != null || localStorage.getItem("isFit") != '') {
    apa yang kamu buat apabila data tersedia....
    }
    Wed Apr 27, 12:03:00 AM GMT+9
    letakkan script tersebut diluar Event object (event object kyak click,mouse on over dkk)
    Wed Apr 27, 12:43:00 AM GMT+9
    Untuk is-fit udah bang udah wa kasih action cuma ketika wa refresh dia kembali normal dan fungsi si storagenya ngga working bang. Help donk buatin script ini smpe bener2 work storagenya bebas action nya mau pke apapun
    Mon May 30, 03:33:00 PM GMT+9
    Fitur Bookmark Kayak KumaStream Bagus, Tapi Dibayar Kali Ya
    Mon May 30, 04:16:00 PM GMT+9
    FIG・RAIZEL said: Fitur Bookmark Kayak KumaStream Bagus, Tapi Dibayar Kali Ya
    KumaStream pakai paid scriptnya bg dagruel.

    kamu bisa aja bikin kyak gitu tinggal kamu ubah2 style nya doang jika menggunakan script di atas. dan itu udah di terapin sama member @Dani_Edtz_
    Mon May 30, 06:31:00 PM GMT+9
    김서정 said: KumaStream pakai paid scriptnya bg dagruel.

    kamu bisa aja bikin kyak gitu tinggal kamu ubah2 style nya doang jika menggunakan script di atas. dan itu udah di terapin sama member @Dani_Edtz_
    Iya Tapi Aku Nggak Tau, Nggak Pintar Aku Ubah²
    Tue May 31, 10:25:00 AM GMT+9
    FIG・RAIZEL said: Fitur Bookmark Kayak KumaStream Bagus, Tapi Dibayar Kali Ya
    Bookmarknya dari forum ini.
    Aku tau dari bookmark counternya.

    Setuju, desain bookmarknya bagus.
    Mungkin tidak bisa di beli, karna di bundle dalam satu paket tema.
    Wed Jun 01, 01:01:00 AM GMT+9
    Wernayasa said: Bookmarknya dari forum ini.
    Aku tau dari bookmark counternya.

    Setuju, desain bookmarknya bagus.
    Mungkin tidak bisa di beli, karna di bundle dalam satu paket tema.
    Sebenarnya Aku Mau Beli Sama Templatenya, Tapi Ada Lisensinya Nggak Bebas Aku Bikin Banyak Web Streaming, Tapi Ya Aku Juga Nggak Berhak Nyuruh Lepasin Lisensinya, Jadi Aku Nggak Jadi Beli Karena Ada Lisensi Templatenya, Jadi Aku Nyari² Fitur Bookmark Kayak KumaStream Sapatau Ada Yg Clone Ternyata Tdk Ada, Terpaksa Pake Fitur Bookmark Yg Ini

    Similar Threads