widget bookmark blogger

cara membuat add to bookmark di blogger menggunakan localStorage

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat widget bookmark di blogger dengan jquery seperti di blog ini.

kebiasaan saya saat mencari artikel di internet dan belum sempat membacanya saya akan menyalin link artikel tersebut dan menyimpannya agar ketika saya ingin membacanya tidak susah mencarinya lagi.

dengan adanya widget bookmark ini mungkin akan berguna untuk pengunjung blog kita, apa lagi jika artikel di blog kita sudah lumayan banyak.

jadi ketika pengunjung tertarik dengan salah satu artikel kita dan belum sempat membacanya maka pengunjung bisa membookmark artikel tersebut agar nantinya tidak susah di cari lagi.

widget ini sudah menggunakan localStorage yang artinya artikel yang di bookmark tidak akan hilang kecuali pengunjung menghapus cookie browser.

untuk demonya kalian bisa mencoba klik icon bookmark yang berada pada salah satu artikel di blog ini tepatnya di bawah judul dan bersampingan dengan profil penulis, ok buat kalian yang ingin mencobanya mari simak caranya.

Widget Bookmark Blogger

sebelum memulai pastikan kalian telah membackup template untuk berjaga jaga jika terjadi sesuatu yang tidak di inginkan

pastikan template kalian sudah terpasang jQuery jika belum ada, bisa salin kode di bawah ini dan letakkan di atas kode </head> atau </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* bookmark */
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}

/* css darkmode sesuaikan class (.drK) dengan templatemu agar dapat berfungsi */
.drK .pop-area.open .pop-html,.drK .pop-area .body-content,.drK .pop-area .table a{background-color:#1e1e1e;color:#fefefe}

icon buka tutup bookmark ini bisa kalian letakkan di mana yang kalian inginkan contohnya saja di atas header.

<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>

dan html icon bookmark ini berfungsi untuk add to bookmark atau menambahkan artikel ke bookmark, ini bisa kalian letakkan di atas kode <data:post.body/>

<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>

dan terakhir letakkan script di bawah ini di atas kode </body> atau </body>, jika sudah jangan lupa untuk klik simpan.

bagian yang saya tandai https://www.wendycode.com/search silakan ubah denga url blog mu.

<script>//<![CDATA[
// source code : https://www.hartomy.com/2020/09/cara-membuat-tombol-bookmark-di-blogger.html
var massgEmpty="Daftar Artikel Favorit Belum Ada",articleLabel="Semua konten",link_articleLabel="https://www.wendycode.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>

Khusus Pengguna Median Ui 1.6

di karenakan untuk memasang widget ini di butuhkan pengetahuan coding dasar, karena setiap template tentu saja memiliki kode yang berbeda tentu harus ada penyesuaian agar widget ini terpasang dengan sempurna.

dan karena saya menggunakan template median ui maka saya akan membuatkan panduan khusus median ui untuk kalian yang tidak memahami coding agar widget ini terpasang secara sempurna dan sesuai demo di blog ini.

sebelum memulai pastikan kalian telah membackup template untuk berjaga jaga jika terjadi sesuatu yang tidak di inginkan

pastikan template kalian sudah terpasang jQuery jika belum ada, bisa salin kode di bawah ini dan letakkan di atas kode </head> atau </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* bookmark */
.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}

icon buka tutup bookmark

<!-- 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>
                   
<!-- ubah menjadi -->

<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'/>
              <!--[ 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>

di sini saya mengganti icon share yang berada di bawah judul menjadi icon add to bookmark

<!-- 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>

<!-- ubah menjadi -->

<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>-->

dan terakhir letakkan script di bawah ini di atas kode </body> atau </body>, jika sudah jangan lupa untuk klik simpan.

bagian yang saya tandai https://www.wendycode.com/search silakan ubah denga url blog mu.

<script>//<![CDATA[
// source code : https://www.hartomy.com/2020/09/cara-membuat-tombol-bookmark-di-blogger.html
var massgEmpty="Daftar Artikel Favorit Belum Ada",articleLabel="Semua konten",link_articleLabel="https://www.wendycode.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>

Update Tambahan

update khusus pengguna template median ui 1.6, agar tombol bookmark juga muncul di beranda seperti di blog ini.

/* css tambahan untuk tombol bookmark muncul di beranda pada template median ui 1.6 */
.iFxd .hartomy-bookmark-btn:hover::before{content:'add to bookmark';right:15px;display:block}
.iFxd .hartomy-bookmark-btn:before{content:'';font-size:12px;color:#767676;width:150px;padding-left:30px;padding:5px 0 5px 30px;background-color:var(--bodyB);border-radius:5px;position:absolute;right:0;display:none}
.iFxd .hartomy-bookmark-btn{position:relative;transition:var(--trans-4)}

agar memudahkan dalam pencarian karena banyak kode yang sama gunakan ctrl + f cari kode <b:tag class='pCntn' cond='data:view.isMultipleItems' name='div'> tampak keseluruhan seperti di bawah ini, silakan hapus dan ganti sesuai petunjuk di bawah.

<!-- cari kode seperti ini -->

<!--[ Comments count ]-->
                              <b:tag class='iFxd' cond='data:post.allowComments and data:post.numberOfComments &gt; 0 or data:post.labels any (label =&gt; label.name in [ &quot;Sponsored&quot; , &quot;Product&quot; ])' name='div'>
                                <b:if cond='data:post.labels any (label =&gt; label.name in [ &quot;Sponsored&quot; ])'>
                                  <b:include name='postSponsored'/>
                                  <b:elseif cond='data:post.labels any (label =&gt; label.name in [ &quot;Product&quot; ])'/>
                                  <b:include name='postProduct'/>
                                </b:if>
                                <b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:post.labels none (label =&gt; label.name in [ &quot;Product&quot; ])'>
                                  <b:include name='postCommentsLinks'/>
                                </b:if>
                              </b:tag>
                            </div>
                          </b:if>
                    
                          <b:tag class='pCntn' cond='data:view.isMultipleItems' name='div'>
                    
<!-- ubah menjadi -- >

<!--[ Comments count ]-->
                              <b:tag class='iFxd' name='div'>
                                <b:if cond='data:post.labels any (label =&gt; label.name in [ &quot;Sponsored&quot; ])'>
                                  <b:include name='postSponsored'/>
                                  <b:elseif cond='data:post.labels any (label =&gt; label.name in [ &quot;Product&quot; ])'/>
                                  <b:include name='postProduct'/>
                                </b:if>
                                <b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:post.labels none (label =&gt; label.name in [ &quot;Product&quot; ])'>
                                  <b:include name='postCommentsLinks'/>
                                </b:if>
                                <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>
                              </b:tag>
                            </div>
                          </b:if>
                    
                          <b:tag class='pCntn' cond='data:view.isMultipleItems' name='div'>

ok jadi sekian cara membuat widget bookmark di blogger yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

source code:
https://www.hartomy.com/2020/09/cara-membuat-tombol-bookmark-di-blogger.html

Baca juga :

tutorial blogger

35 komentar

iCenter 16 Februari, 2022 16 Februari, 2022

Thank you
iCenter 16 Februari, 2022 16 Februari, 2022

Can u show us how to create sitemap like your template?
Yadi Hidayat 23 Februari, 2022 23 Februari, 2022

Gan, tau gk caranya mengubah komentar di halaman tertentu? Begini https://median-ui.jagodesain.com/2020/10/komentar-facebook.html, tapi di postingan lain mereka menggunakan komentar blogger 😳
1. wendy 23 Februari, 2022 23 Februari, 2022
  
  bisa menggunakan tag conditional label tertentu
Rabbit Run 25 Februari, 2022 25 Februari, 2022

Agar serupa kayak kamu kang gmna caranya? Icon bookmark muncul juga di gambar postingan
1. wendy 25 Februari, 2022 25 Februari, 2022
  
  sudah saya update semalam gan, coba baca bagian subheading ( update tambahan ) , itu khusus pengguna template median ui 1.6 jika bedah versi apa lagi bedah template maka tidak bisa, karena setiap template memiliki kode yang berbedah
Rabbit Run 26 Februari, 2022 26 Februari, 2022

U the best and thanks

Peluk mesra 😁
Yadi Hidayat 28 Februari, 2022 28 Februari, 2022

Mantap gan, done! Gan bisa buatin widget seperti di jagodesain.com, gak? nah di header ada menu dropdown bahasa, gua udah bikin tapi kagak muncul malah hilang semua menu ikon d header nya, ribet kalau harus di navbar, kan jadi jelek, gua lebih suka menggunakan itu daripada Google Translate sih, soalnya tampilan Google Translate kagak match dengan temanya. Tolong, gan 🙏, kayaknya lo ahli banget 😎
1. wendy 28 Februari, 2022 28 Februari, 2022
  
  gk ahli juga masih belajar, tapi kalau komentar menggunakan akun asli mungkin akan saya pertimbangkan
NexFII 28 Februari, 2022 28 Februari, 2022

Kak mau tanya kenapa ya semenjak saya add bookmark seperti tutorial di postingan kaka ini daftar ToC ga muncul kak

Coba cek ToC nya di blog saya www.w4fxploit.my.id

Ditunggu balasan nya kak terimakasih....
1. wendy 28 Februari, 2022 28 Februari, 2022
  
  gk pengaruh sama widget ini mas kalau toc tidak muncul
2. NexFII 28 Februari, 2022 28 Februari, 2022
  
  Cara Benerin nya kira² gimana ya
3. wendy 28 Februari, 2022 28 Februari, 2022
  
  instal ulang aja templatenya mas
4. NexFII 01 Maret, 2022 01 Maret, 2022
  
  Sip mas udah work mantep lah terimakasih
Rabbit Run 28 Februari, 2022 28 Februari, 2022

Padahal kalo pake cara backup kan enak... Klo diinstall ulang kadang sayang, karena sudah bnyk dipasang fitur baru.. push F aja dah
انطلا-ق 28 Februari, 2022 28 Februari, 2022

Is it possible to upload your template with all the blogger plugins in it?
Jawad Ahmed 03 Maret, 2022 03 Maret, 2022

Can you make a cart widget for blogger with checkout page?
1. wendy 03 Maret, 2022 03 Maret, 2022
  
  premium bro
Kyoko Senpai 14 Maret, 2022 14 Maret, 2022

Permisi bang, apakah untuk median ui 1.5 caranya sama dengan 1.6?
1. wendy 14 Maret, 2022 14 Maret, 2022
  
  berbedah, karena tiap versi kodenya selalu bedah, ikuti aja tutor yg atas yg lain bisa di sesuaikan sendiri
admin 29 April, 2022 29 April, 2022

kang, kalau misalkan untuk ngilangin Label di Posting Populer gimana caranya?
1. wendy 30 April, 2022 30 April, 2022
  
  tiap template bisa berbedah, bisa inspek dan beri css display:none aja
Rdosfly 17 Mei, 2022 17 Mei, 2022

Cara biar ditaruh di Navbar gimana yah mas. Median ui
faruq 05 Juni, 2022 05 Juni, 2022

saya coba di median versi amp, kok kurang rapih ya om? ada telegram kah?
1. wendy 06 Juni, 2022 06 Juni, 2022
  
  widget ini emang bukan di peruntukan untuk blog amp mas, bisa join ke grup tele melalui link di atas header blog ini
Daeng Abu 17 Oktober, 2022 17 Oktober, 2022

Bang di saya data-id dan imagenya gak muncul. itu masalahnya dimana yah? sya terapkan bukan di template median ui

https://i.ibb.co/MC5vzgk/Screenshot-6.png
1. wendy 20 Oktober, 2022 20 Oktober, 2022
  
  Saya cek blognya uda normal ya
2. Daeng Abu 20 Oktober, 2022 20 Oktober, 2022
  
  Udah normal mas. Makasih. Kalo boleh req update fiturnya dong biar setelah di bookmark ada tandanya. Misal tombol bookmark di klik ikon bookmarknya berubah atau dari tulisan simpan jadi tersimpan. Dan datanya tersimpan di cookies, atau script local storagenya. Sepertinya bisa kalo ngambil data dari ID postingan. Dan kalo boleh bookmarknya nampilin juga datetime, dibawah titlenya. Terimakasih mas.
Suara Dalam Kepalaku 20 Oktober, 2022 20 Oktober, 2022

Ka, ini bookmarknya ada bug saat infinity scroll, ketika di klik tidak bisa nambah. di halaman homepage ada load more post (infinity scroll)
1. wendy 20 Oktober, 2022 20 Oktober, 2022
  
  Bisa infokan url blognya soalnya saya gk ngerti apa yang di maksud
2. Suara Dalam Kepalaku 20 Oktober, 2022 20 Oktober, 2022
  
  di semua blog yang pakai bookmark ini, termasuk blog kaka. cek di homepage terus klik "muat halaman lainnya" - itu infinity scroll page. setelah muncul postingan lainnya terus klik icon bookmarknya ga ada respon apa2, jadi ga ke save ke bookmarknya. mungkin ini bug nya, saya coba konsul juga ke yang buatnya, kalau lihat lisence nya ka Hartomy.com
Wangy 12 Januari, 2023 12 Januari, 2023

Kenapa di di menu buka tutup saya gada gambarnya, cuman ada judulnya doang?
1. wendy 12 Januari, 2023 12 Januari, 2023
  
  
  <div class='hartomy-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.featuredImage, 400, "16:9")' 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>
  
  
  
  <div class='hartomy-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.thumbnailUrl, 400, "16:9")' 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>
2. Wangy 12 Januari, 2023 12 Januari, 2023
  
  Makasih banyak bang dah berhasil, dari kemaren saya utak atik gabisa, cari tutorial di orang lain tetep gabisa, komen malah gadibales, beda banget sama abang yang langsung ngerespont kalo ada yang komen.
PTC Reborn ✓ 17 Juni, 2023 17 Juni, 2023

bro is this compatible with 1.6?

Wendy Code

widget bookmark blogger

Widget Bookmark Blogger

Khusus Pengguna Median Ui 1.6

Update Tambahan

input nomor telepon internasional dengan api

formulir order menuju whatsapp di blogger

membuat fitur login username + password di blogger

membuat safelink di blog utama dengan random post + generator

widget stars rating blogger