Cara Membuat Widget Bookmark di Blogger

Tutorial membuat widget b bookmark di blogger menggunakan jQuery script bookmark
Widget bookmark blogger

Widget Bookmark - Hi, dikesempatan kali ini saya akan membagikan tutorial cara membuat widget bookmark di blog dengan menggunakan script jquery.

Seperti yang kita ketahui fungsi bookmark sangat berguna bagi pembaca, terkadang untuk menyimpan artikel yang belum sempat dibaca bisa melalui fitur bookmark yang ada pada aplikasi bawaan browser namun kebanyakan fitur bawaan ini jarang digunakan karena ribet, maka dari itu dengan adanya widget bookmark blogger diblog dapat akan mempermudah pembaca ngeboomark salah satu artikel di blog anda secara mudah dan langsung bisa membacanya kembali.

Script pada widget ini sudah dilengkapi fitur localStorage yang artinya artikel yang di bookmark tidak akan menghilang, kecuali jika pengunjung menghapus riwayat cookie pada browser otomatis ikut hilang.

Lalu bagaimana memasang widget bookmark ini? Langsung saja simak langkah-langkahnya berikut ini.


Tutorial Memasang Widget Bookmark Blog

Sebelum memulai, pastikan anda telah membackup template blog terlebih dahulu untuk berjaga-jaga jika terjadi sesuatu yang tidak di inginkan bisa direcovery.

  1. Langkah awal memasang jQuery jika belum terpasang, salin kode script di bawah ini dan letakkan di atas kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt; untuk memudahkan pencarian tekan CTRL F namun jika sudah ada terpasang jquerynya skip langkah ini.

  2. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  3. Kedua temukan kode ]]></b:skin> atau </style> dan masukan kode css dibawah ini tepat diatas salah satu kode tersebut.

  4. /* widget bookmark by guntur */
    svg.line{width:22px;height:22px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round; stroke-width:1}
    .pop-area::-webkit-scrollbar{display:none}
    .pop-area{display:flex!important;width:100%;height:100%;position:fixed;top:0;left:0;background:rgb(0 0 0 / 51%);visibility:hidden;opacity:0;transition:all 0.25s ease-in-out;z-index:999999;overflow-y:scroll}
    .pop-area.open{opacity:1;visibility:visible}
    .pop-area .pop-html{background:#fff;padding-bottom:10px;display:block;margin:auto auto;width:calc(100% - 20px);max-width:500px;visibility:hidden;opacity:0;overflow:hidden;transition:all 0.5s ease-in-out;transform:scale(.5);border-radius:7px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}
    .pop-area.open .pop-html{opacity:1;transform:scale(1);visibility:visible}
    .pop-area .head-pop:after{content:'Bookmark';color:#fefefe;font-weight:bold}
    .pop-area .head-pop{width:-webkit-fill-available;padding:12px 30px;overflow:hidden;background:#f89000}
    .pop-area .close-btn{float:right;cursor:pointer;fill:#7e7e7e;color:#fefefe;font-weight:bold}
    .pop-area .body-content{padding:10px}
    .pop-area .text-center{display:grid;text-align:center;grid-gap:15px}
    .pop-area .text-center svg{margin:0 auto}
    .pop-area .btn.btn-outline-info{width:fit-content;margin:0 auto;text-decoration:none}
    .pop-area .table:hover{border-color:#f89000}
    .pop-area .table{transition:all .3s;width:100%;border:1px solid rgba(155,155,155,0.15);border-radius:7px;margin:5px 0;padding:5px}
    .pop-area .table img{border-radius:4px;width:auto}
    .pop-area .table a:hover,.drK .pop-area .table a:hover{color:#f89000}
    .pop-area .table a{text-decoration:none;color:#08102b}
    .pop-area .img-left{width:150px}
    .pop-area .item-left{padding-right:10px}
    .pop-area .btn-remove{cursor:pointer}
    .show-bookmark{font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:var(--bodyC);position:absolute;top:-5px;right:0;z-index:2}
    .pop-area .counterStat{color:white;font-size:16px}
    
    /* darkmode */
    .drK .pop-area.open .pop-html,.drK .pop-area .body-content,.drK .pop-area .table a{background-color:#1e1e1e;color:#fefefe}

    Ganti nama class darkmode .drK dengan nama class darkmode sesuai template masing-masing agar dapat berfungsi.

  5. Selanjutnya memasang tag id class html berikut berupa icon buka tutup bookmark ini bisa diletakkan di atas header atau bisa juga bagian lain yang kalian inginkan.

  6. /* icon bookmark by guntur */
    <div class='buka-tutup'>
    <svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'></path></g></svg>
    <span class='show-bookmark'></span>
    </div>
  7. Tambahkan juga html icon bookmark ini yang berfungsi untuk add to bookmark atau lebih tepatnya menambahkan artikel ke bookmark, letakkan kode ini tepat di atas kode <data:post.body/> biasanya kode ini tidak satu jadi letakkan pada kode yang pertama ditemukan.

  8. /* icon add bookmark by guntur */
    <div class='hartomy-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.featuredImage, 400, &quot;16:9&quot;)' expr:data-id='data:post.id' expr:data-link='data:post.url' expr:data-title='data:post.title'><svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'></path><line transform='translate(-4.500000, -2.500000)' x1='12' x2='12' y1='6' y2='12'></line><line transform='translate(-4.500000, -2.500000)' x1='15' x2='9' y1='9' y2='9'></line></g></svg>
    </div>
  9. Langkah terakhir letakkan javascript di bawah ini tepat di atas kode </body> jika tidak ada temukan kode body yang sudah diparse seperti ini &lt;!--</body>--&gt;&lt;/body&gt;

<script>//<![CDATA[
// javascript bookmark by guntur
var massgEmpty='Daftar Artikel Favorit Belum Ada',articleLabel='Semua konten',link_articleLabel='https://www.balahatun.com/search';!function($){'use strict';var OptionManager=(objToReturn={},defaultOptions={bookmarkIcon:'bookmarkIcon',bookmarkBadge:'show-bookmark',articleQuantity:'article-quantity',affixBookmarkIcon:!0,showBookmarkModal:!0,clickOnAddToBookmark:function(t){},clickOnbookmarkIcon:function(t,e){}},objToReturn.getOptions=function(t){var e=$.extend({},defaultOptions);return'object'==typeof t&&$.extend(e,t),e},objToReturn),objToReturn,defaultOptions,articleManager=function(){var t={};localStorage.konten=localStorage.konten?localStorage.konten:'';var e=function(t){localStorage.konten=JSON.stringify(t)},a=function(){try{return JSON.parse(localStorage.konten)}catch(t){return[]}},o=function(t,o){var n=function(t){var e=-1,o=a();return $.each(o,function(a,o){o.id!=t||(e=a)}),e}(t);if(n<0)return!1;var r=a();return r[n].quantity=void 0===o?r[n].quantity:o,e(r),!0};return t.getAllkonten=a,t.updatePoduct=o,t.setarticle=function(t,n,r,i,c,l){return void 0===t?(console.error('id required'),!1):void 0===n?(console.error('title required'),!1):void 0===r?(console.error('link required'),!1):void 0===l?(console.error('borkimage required'),!1):(i=void 0===i?'':i,void(o(t)||function(t,o,n,r,i,c){var l=a();l.push({id:t,title:o,link:n,summary:r,quantity:i,borkimage:c}),e(l)}(t,n,r,i,c,l)))},t.cleararticle=function(){e([])},t.removearticle=function(t){var o=a();o=$.grep(o,function(e,a){return e.id!=t}),e(o)},t.getTotalQuantity=function(){var t=0,e=a();return $.each(e,function(e,a){t+=a.quantity}),t},t}(),loadBookmarkEvent=function(t){var e=OptionManager.getOptions(t),a=$('.'+e.bookmarkIcon),o=$('.'+e.bookmarkBadge),n=e.articleQuantity;o.text(articleManager.getTotalQuantity()),$('#cart-modal').length||$('body').append('<div class='pop-area' id='cart-modal'><div class='pop-html'><div class='head-pop'><a class='close-btn buka-tutup'>X</a></div><div class='body-content'><span class='table-responsive' id='cart-table'></span></div></div></div>');var r=function(){var t=$('#cart-table');t.empty();var e=articleManager.getAllkonten();$.each(e,function(){t.append('<table class='table'><tbody><tr title=''+this.summary+'' data-id=''+this.id+''><td class='item-left img-left'><img width='60px' height='60px' src=''+this.borkimage+''/></td><td class='item-left'><a href=''+this.link+''>'+this.title+'</a></td><td class='item-left' title='Remove favorit' class='text-center' style='width: 30px;'><a class='btn-remove'><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M15.3891429,7.55409524 C15.3891429,15.5731429 16.5434286,19.1979048 8.77961905,19.1979048 C1.01485714,19.1979048 2.19295238,15.5731429 2.19295238,7.55409524'></path><line x1='16.8651429' y1='4.47980952' x2='0.714666667' y2='4.47980952'></line><path d='M12.2148571,4.47980952 C12.2148571,4.47980952 12.7434286,0.714095238 8.78914286,0.714095238 C4.83580952,0.714095238 5.36438095,4.47980952 5.36438095,4.47980952'></path></g></svg></a></td></tr></tbody></table>')}),t.append(e.length?'':'<div role='alert' id='cart-empty-message'><div class='text-center'><svg width='80' height='80' viewBox='0 0 24 24'><path d='M19,2L14,6.5V17.5L19,13V2M6.5,5C4.55,5 2.45,5.4 1,6.5V21.16C1,21.41 1.25,21.66 1.5,21.66C1.6,21.66 1.65,21.59 1.75,21.59C3.1,20.94 5.05,20.5 6.5,20.5C8.45,20.5 10.55,20.9 12,22C13.35,21.15 15.8,20.5 17.5,20.5C19.15,20.5 20.85,20.81 22.25,21.56C22.35,21.61 22.4,21.59 22.5,21.59C22.75,21.59 23,21.34 23,21.09V6.5C22.4,6.05 21.75,5.75 21,5.5V7.5L21,13V19C19.9,18.65 18.7,18.5 17.5,18.5C15.8,18.5 13.35,19.15 12,20V13L12,8.5V6.5C10.55,5.4 8.45,5 6.5,5V5Z' fill='#f89000'/></svg><center>'+massgEmpty+'</center><a class='btn btn-outline-info m-2' href=''+link_articleLabel+''>'+articleLabel+'</a></div></div>')};if(e.affixBookmarkIcon){var i=1*a.offset().top+1*a.css('height').match(/\d+/);$(window).scroll(function(){$(window).scrollTop()>=i?a.addClass('bookmarkIcon-affix'):a.removeClass('bookmarkIcon-affix')})}a.click(function(){e.showBookmarkModal?r():e.clickOnbookmarkIcon(a,articleManager.getAllkonten())}),$(document).on('keypress','.'+n,function(t){38!=t.keyCode&&40!=t.keyCode&&t.preventDefault()}),$(document).on({click:function(){var t=$(this).closest('tr'),e=t.data('id');t.hide(500,function(){articleManager.removearticle(e),r(),o.text(articleManager.getTotalQuantity())})}},'.btn-remove')};$(document).on({click:function(){return $('.pop-area').toggleClass('open'),!1}},'.buka-tutup'),$(function(){var goTohartomyBookmark=function(t){};eval(function(t,e,a,o,n,r){if(n=function(t){return(t<58?'':n(parseInt(t/58)))+((t%=58)>35?String.fromCharCode(t+29):t.toString(36))},!''.replace(/^/,String)){for(;a--;)r[n(a)]=o[a]||n(a);o=[function(t){return r[t]}],n=function(){return'\\w+'},a=1}for(;a--;)o[a]&&(t=t.replace(new RegExp('\\b'+n(a)+'\\b','g'),o[a]));return t}('q h=['\\B\\e\\M','\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f','\\x\\y\\f\\g\\C\\k\\y\\k\\y\\F','\\N\\z\\g\\i\\k\\e\\j\\G\\C\\x\\e\\e\\f\\j\\g\\i\\f\\C\\x\\k\\m','\\H\\z\\A\\r\\k','\\F\\y\\H\\z','\\s\\t\\s','\\s\\t\\O','\\s\\t\\P','\\z\\g\\i\\k\\e\\j\\G\\n\\e\\e\\f\\j\\g\\i\\f','\\s\\t\\Q'];q D=[h[0],h[1],h[2],h[3]];(o(b,c){q d=o(a){R(--a){b[h[5]](b[h[4]]())}};d(++c)}(D,S));q u=o(a,b){a=a-I;q c=D[a];T c};$(u(h[U]))[h[9]]({\'\\x\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':u(h[6]),\'\\g\\r\\r\\A\\t\\n\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':!I,\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)},\'\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){V[u(h[8])](u(h[7]),a)},\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)}})',0,58,'||||||||||||||x6F|x6B|x61|_0x6a0a|x72|x6D|x74|x64|x6E|x42|function|x63|var|x66|x30|x78|_0x3889|x41|x4F|x62|x75|x68|x69|x6C|x2D|_0x4117|x65|x70|x79|x73|0x0|x49|x54|goTohartomyBookmark|x67|x2E|x33|x32|x31|while|0xd6|return|10|console'.split('|'),0,{}))});var MyBookmark=function(t,e){var a=$(t),o=OptionManager.getOptions(e),n=$('.'+o.bookmarkBadge);a.click(function(){o.clickOnAddToBookmark(a);var t=a.data('id'),e=a.data('title'),r=a.data('link'),i=a.data('summary'),c=a.data('quantity'),l=a.data('borkimage');articleManager.setarticle(t,e,r,i,c,l),n.text(articleManager.getTotalQuantity())})};$.fn.hartomyBookmark=function(t){return loadBookmarkEvent(t),$.each(this,function(){new MyBookmark(this,t)})}}(jQuery);
//]]></script>

Ganti bagian yang saya tandai https://www.balahatun.com/search dengan url blog kalian masing-masing.

Khusus Pengguna Median UI v1.6

Tutorial untuk pemasangan widget bookmark pada template median ui ini dikhususkan karena memerlukan pengetahuan coding dasar, karena setiap template memiliki source kode yang berbeda tentu harus ada penyesuaian agar widget bookmark ini berfungsi dengan sempurna.

Blog ini menggunakan template median ui oleh karena itu saya bagikan tutorial khusus untuk pengguna template median ui karena banyak yang tidak memahami coding, simak berikut cara pemasangannya.


Sebelum memulai, pastikan anda telah membackup template blog terlebih dahulu untuk berjaga-jaga jika terjadi sesuatu yang tidak di inginkan bisa direcovery.

  1. Pastikan source script jQuery sudah terpasang terlebih dahulu, kalau belum ada bisa pasang dengan menyalin kode dibawah ini dan letakkan tepat di atas kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt;

  2. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  3. Lalu salin kode css di bawah ini dan letakkan tepat di atas kode ]]></b:skin> atau kode </style> tepat di atasnya.

  4. /* widget bookmark by guntur */
    .pop-area::-webkit-scrollbar{display:none}
    .pop-area{display:flex!important;width:100%;height:100%;position:fixed;top:0;left:0;background:rgb(0 0 0 / 51%);visibility:hidden;opacity:0;transition:all 0.25s ease-in-out;z-index:999999;overflow-y:scroll}
    .pop-area.open{opacity:1;visibility:visible}
    .pop-area .pop-html{background:#fff;padding-bottom:10px;display:block;margin:auto auto;width:calc(100% - 20px);max-width:500px;visibility:hidden;opacity:0;overflow:hidden;transition:all 0.5s ease-in-out;transform:scale(.5);border-radius:7px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}
    .pop-area.open .pop-html{opacity:1;transform:scale(1);visibility:visible}
    .pop-area .head-pop:after{content:'Bookmark';color:#fefefe;font-weight:bold}
    .pop-area .head-pop{width:-webkit-fill-available;padding:12px 30px;overflow:hidden;background:#f89000}
    .pop-area .close-btn{float:right;cursor:pointer;fill:#7e7e7e;color:#fefefe;font-weight:bold}
    .pop-area .body-content{padding:10px}
    .pop-area .text-center{display:grid;text-align:center;grid-gap:15px}
    .pop-area .text-center svg{margin:0 auto}
    .pop-area .btn.btn-outline-info{width:fit-content;margin:0 auto;text-decoration:none}
    .pop-area .table:hover{border-color:#f89000}
    .pop-area .table{transition:all .3s;width:100%;border:1px solid rgba(155,155,155,0.15);border-radius:7px;margin:5px 0;padding:5px}
    .pop-area .table img{border-radius:4px;width:auto}
    .pop-area .table a:hover,.drK .pop-area .table a:hover{color:#f89000}
    .pop-area .table a{text-decoration:none;color:#08102b}
    .pop-area .img-left{width:150px}
    .pop-area .item-left{padding-right:10px}
    .pop-area .btn-remove{cursor:pointer}
    .show-bookmark{font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:var(--bodyC);position:absolute;top:-5px;right:0;z-index:2}
    .pop-area .counterStat{color:white;font-size:16px}
    .drK .pop-area.open .pop-html,.drK .pop-area .body-content,.drK .pop-area .table a{background-color:#1e1e1e;color:#fefefe}
  5. Selanjutnya menambahkan kode HTML icon buka tutup bookmark, temukan kode seperti dibawah ini.

  6. <!-- cari kode seperti ini -->
    <b:elseif cond='data:item == &quot;Dark&quot;'/>
            <li>
               <b:class cond='data:item == &quot;Dark&quot;' name='isDrk'/>
                  <!--[ Dark mode button ]-->
                      <span class='tDark tIc tDL bIc' expr:aria-label='data:item' onclick='darkMode()' role='button'><b:include name='moon-sun-icon'/></span>
                       </li>

    Lalu ganti semua kode diatas dengan kode dibawah ini

    <b:elseif cond='data:item == &quot;Dark&quot;'/>
    <li class='buka-tutup'>
         <b:class cond='data:item == &quot;Bookmark&quot;' name='isBxm'/>
             <!--[ Bookmark ]-->
                 <a class='tIc bIc' expr:aria-label='data:item' href='javascript:;'><b:include name='bookmark-icon'/></a>
                   <span class='show-bookmark'/>
             </li>
                                  
            <li>
               <b:class cond='data:item == &quot;Dark&quot;' name='isDrk'/>
  7. Untuk icon add bookmark saya mengantikan icon share yang berada tepat di bawah judul artikel menjadi icon add bookmark, selanjutnya temukan kode seperti dibawah ini.

  8. <!-- cari kode seperti ini -->
    
    <div class='pIc'>
         <b:include cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments' name='postCommentsLabel'/>
         <b:if cond='data:post.shareUrl and data:widgets.Blog.first.allBylineItems.share'>
           <label class='sh tIc' for='forShare'><b:include name='share-icon'/></label>

    Jika sudah ketemu kode diatas ganti semuanya dengan kode yang baru dibawah ini.

    <div class='pIc'>
    <label class='tIc hartomy-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.featuredImage, 400, &quot;16:9&quot;)' expr:data-id='data:post.id' expr:data-link='data:post.url' expr:data-title='data:post.title'><svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'></path><line transform='translate(-4.500000, -2.500000)' x1='12' x2='12' y1='6' y2='12'></line><line transform='translate(-4.500000, -2.500000)' x1='15' x2='9' y1='9' y2='9'></line></g></svg>
    </label>
         <b:include cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments' name='postCommentsLabel'/>
           <b:if cond='data:post.shareUrl and data:widgets.Blog.first.allBylineItems.share'>
           <!--<label class='sh tIc' for='forShare'><b:include name='share-icon'/></label>-->
  9. Terakhir letakkan kode javscript di bawah ini tepat di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

  10. <script>//<![CDATA[
    // javascript bookmark by guntur
    var massgEmpty='Daftar Artikel Favorit Belum Ada',articleLabel='Semua konten',link_articleLabel='https://www.balahatun.com/search';!function($){'use strict';var OptionManager=(objToReturn={},defaultOptions={bookmarkIcon:'bookmarkIcon',bookmarkBadge:'show-bookmark',articleQuantity:'article-quantity',affixBookmarkIcon:!0,showBookmarkModal:!0,clickOnAddToBookmark:function(t){},clickOnbookmarkIcon:function(t,e){}},objToReturn.getOptions=function(t){var e=$.extend({},defaultOptions);return'object'==typeof t&&$.extend(e,t),e},objToReturn),objToReturn,defaultOptions,articleManager=function(){var t={};localStorage.konten=localStorage.konten?localStorage.konten:'';var e=function(t){localStorage.konten=JSON.stringify(t)},a=function(){try{return JSON.parse(localStorage.konten)}catch(t){return[]}},o=function(t,o){var n=function(t){var e=-1,o=a();return $.each(o,function(a,o){o.id!=t||(e=a)}),e}(t);if(n<0)return!1;var r=a();return r[n].quantity=void 0===o?r[n].quantity:o,e(r),!0};return t.getAllkonten=a,t.updatePoduct=o,t.setarticle=function(t,n,r,i,c,l){return void 0===t?(console.error('id required'),!1):void 0===n?(console.error('title required'),!1):void 0===r?(console.error('link required'),!1):void 0===l?(console.error('borkimage required'),!1):(i=void 0===i?'':i,void(o(t)||function(t,o,n,r,i,c){var l=a();l.push({id:t,title:o,link:n,summary:r,quantity:i,borkimage:c}),e(l)}(t,n,r,i,c,l)))},t.cleararticle=function(){e([])},t.removearticle=function(t){var o=a();o=$.grep(o,function(e,a){return e.id!=t}),e(o)},t.getTotalQuantity=function(){var t=0,e=a();return $.each(e,function(e,a){t+=a.quantity}),t},t}(),loadBookmarkEvent=function(t){var e=OptionManager.getOptions(t),a=$('.'+e.bookmarkIcon),o=$('.'+e.bookmarkBadge),n=e.articleQuantity;o.text(articleManager.getTotalQuantity()),$('#cart-modal').length||$('body').append('<div class='pop-area' id='cart-modal'><div class='pop-html'><div class='head-pop'><a class='close-btn buka-tutup'>X</a></div><div class='body-content'><span class='table-responsive' id='cart-table'></span></div></div></div>');var r=function(){var t=$('#cart-table');t.empty();var e=articleManager.getAllkonten();$.each(e,function(){t.append('<table class='table'><tbody><tr title=''+this.summary+'' data-id=''+this.id+''><td class='item-left img-left'><img width='60px' height='60px' src=''+this.borkimage+''/></td><td class='item-left'><a href=''+this.link+''>'+this.title+'</a></td><td class='item-left' title='Remove favorit' class='text-center' style='width: 30px;'><a class='btn-remove'><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M15.3891429,7.55409524 C15.3891429,15.5731429 16.5434286,19.1979048 8.77961905,19.1979048 C1.01485714,19.1979048 2.19295238,15.5731429 2.19295238,7.55409524'></path><line x1='16.8651429' y1='4.47980952' x2='0.714666667' y2='4.47980952'></line><path d='M12.2148571,4.47980952 C12.2148571,4.47980952 12.7434286,0.714095238 8.78914286,0.714095238 C4.83580952,0.714095238 5.36438095,4.47980952 5.36438095,4.47980952'></path></g></svg></a></td></tr></tbody></table>')}),t.append(e.length?'':'<div role='alert' id='cart-empty-message'><div class='text-center'><svg width='80' height='80' viewBox='0 0 24 24'><path d='M19,2L14,6.5V17.5L19,13V2M6.5,5C4.55,5 2.45,5.4 1,6.5V21.16C1,21.41 1.25,21.66 1.5,21.66C1.6,21.66 1.65,21.59 1.75,21.59C3.1,20.94 5.05,20.5 6.5,20.5C8.45,20.5 10.55,20.9 12,22C13.35,21.15 15.8,20.5 17.5,20.5C19.15,20.5 20.85,20.81 22.25,21.56C22.35,21.61 22.4,21.59 22.5,21.59C22.75,21.59 23,21.34 23,21.09V6.5C22.4,6.05 21.75,5.75 21,5.5V7.5L21,13V19C19.9,18.65 18.7,18.5 17.5,18.5C15.8,18.5 13.35,19.15 12,20V13L12,8.5V6.5C10.55,5.4 8.45,5 6.5,5V5Z' fill='#f89000'/></svg><center>'+massgEmpty+'</center><a class='btn btn-outline-info m-2' href=''+link_articleLabel+''>'+articleLabel+'</a></div></div>')};if(e.affixBookmarkIcon){var i=1*a.offset().top+1*a.css('height').match(/\d+/);$(window).scroll(function(){$(window).scrollTop()>=i?a.addClass('bookmarkIcon-affix'):a.removeClass('bookmarkIcon-affix')})}a.click(function(){e.showBookmarkModal?r():e.clickOnbookmarkIcon(a,articleManager.getAllkonten())}),$(document).on('keypress','.'+n,function(t){38!=t.keyCode&&40!=t.keyCode&&t.preventDefault()}),$(document).on({click:function(){var t=$(this).closest('tr'),e=t.data('id');t.hide(500,function(){articleManager.removearticle(e),r(),o.text(articleManager.getTotalQuantity())})}},'.btn-remove')};$(document).on({click:function(){return $('.pop-area').toggleClass('open'),!1}},'.buka-tutup'),$(function(){var goTohartomyBookmark=function(t){};eval(function(t,e,a,o,n,r){if(n=function(t){return(t<58?'':n(parseInt(t/58)))+((t%=58)>35?String.fromCharCode(t+29):t.toString(36))},!''.replace(/^/,String)){for(;a--;)r[n(a)]=o[a]||n(a);o=[function(t){return r[t]}],n=function(){return'\\w+'},a=1}for(;a--;)o[a]&&(t=t.replace(new RegExp('\\b'+n(a)+'\\b','g'),o[a]));return t}('q h=['\\B\\e\\M','\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f','\\x\\y\\f\\g\\C\\k\\y\\k\\y\\F','\\N\\z\\g\\i\\k\\e\\j\\G\\C\\x\\e\\e\\f\\j\\g\\i\\f\\C\\x\\k\\m','\\H\\z\\A\\r\\k','\\F\\y\\H\\z','\\s\\t\\s','\\s\\t\\O','\\s\\t\\P','\\z\\g\\i\\k\\e\\j\\G\\n\\e\\e\\f\\j\\g\\i\\f','\\s\\t\\Q'];q D=[h[0],h[1],h[2],h[3]];(o(b,c){q d=o(a){R(--a){b[h[5]](b[h[4]]())}};d(++c)}(D,S));q u=o(a,b){a=a-I;q c=D[a];T c};$(u(h[U]))[h[9]]({\'\\x\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':u(h[6]),\'\\g\\r\\r\\A\\t\\n\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':!I,\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)},\'\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){V[u(h[8])](u(h[7]),a)},\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)}})',0,58,'||||||||||||||x6F|x6B|x61|_0x6a0a|x72|x6D|x74|x64|x6E|x42|function|x63|var|x66|x30|x78|_0x3889|x41|x4F|x62|x75|x68|x69|x6C|x2D|_0x4117|x65|x70|x79|x73|0x0|x49|x54|goTohartomyBookmark|x67|x2E|x33|x32|x31|while|0xd6|return|10|console'.split('|'),0,{}))});var MyBookmark=function(t,e){var a=$(t),o=OptionManager.getOptions(e),n=$('.'+o.bookmarkBadge);a.click(function(){o.clickOnAddToBookmark(a);var t=a.data('id'),e=a.data('title'),r=a.data('link'),i=a.data('summary'),c=a.data('quantity'),l=a.data('borkimage');articleManager.setarticle(t,e,r,i,c,l),n.text(articleManager.getTotalQuantity())})};$.fn.hartomyBookmark=function(t){return loadBookmarkEvent(t),$.each(this,function(){new MyBookmark(this,t)})}}(jQuery);
    //]]></script>

    Ganti url https://www.balahatun.com/search yang ditandai warna biru dengan url blog kalian.

  11. Terakhir klik icon Simpan/Save sampai disini tahap pemasangan kode sudah selesai dan cek hasilnya.

Demikianlah artikel cara membuat widget bookmark di blogger yang bisa saya bagikan semoga bermanfaat, jika ada yang ingin ditanyakan silahkan berkomentar terimakasih.

Referensiku: wendycode.com

Rate this article

Getting Info...
Hey there! My name is Guntur aka Dev, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator. I love to Code and create interesting things while playing with it.

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details