🔔 Aktifkan notifikasi disini Google News

Cara Pasang Widget Bookmark di Postingan dan Header Blogger

Cara Pasang Widget Bookmark di Postingan dan Header Blogger
Saifulah.id
 - Halo guys, kali ini saya akan menjelaskan cara membuat widget Bookmark di template Blogger. Tapi sebelum masuk ke tutorialnya, ada baiknya kita kenalan dulu dengan fitur yang akan kita buat nanti.


Apa itu Bookmark?

Bookmark adalah fitur untuk menyimpan link website yang sering kita kunjungi atau link yang ingin kita kunjungi nanti agar mudah diakses kembali saat dibutuhkan.

Dimana Posisi Bookmark?

Bookmark umumnya fitur yang disediakan oleh semua Browser seperti Chrome, Microsoft Edge, Mozilla FireFox, Opera, UC Browser, dll. Fitur ini selalu diletakkan di atas layar atau di dalam setelan browser.

Apa Nama Lain Bookmark?

Bookmarks biasa disebut juga dengan penanda halaman, penunjuk halaman buku, penanda buku, dan halaman favorite.

Bagaimana Logo Bookmark?

Logo bookmark seringkali seperti penanda buku tapi terkadang ada juga yang berlambang bintang seperti yang terdapat di Browser Chrome milik Google dan Edge milik Microsoft.

Fungsi Widget Bookmark Blogger

Widget Bookmark pada Blogger bertujuan untuk memfasilitasi pengunjung blog untuk menyimpan artikel yang mereka sukai agar bisa dibuka kapan saja tanpa perlu mencarinya kembali di kolom pencarian.

Cara Pasang Widget Bookmark

Pasang widget Bookmark sangat tergantung dari jenis template yang digunakan, karena setiap template menggunakan kode yang berbeda-beda. Berikut ini saya bagikan tutorial khusus Median UI 1.5 dan 1.6

Cara Pasang Widget Bookmark di Postingan dan Header Blogger

1. Bookmark untuk Median UI 1.5

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Pasang Widget Bookmark di Postingan dan Header Blogger

  5. Cari kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt;
  6. Letakkan kode berikut tepat di atas </head> atau &lt;!--</head>--&gt;&lt;/head&gt;
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
  7. Cari kode ]]></b:skin> atau </style>
  8. Letakkan kode berikut tepat di atas ]]></b:skin> atau </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:#3291d1}
    .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:10px;line-height:18px;padding:0 5px;border-radius:10px;background:#c32323;color:white;position:absolute;top:-10px;right:-5px;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}
  9. Cari kode <!--[ Search button ]-->
  10. Letakkan kode berikut tepat di atas <!--[ Search button ]-->
    <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'/></g></svg>
    <span class='show-bookmark'/>
    </div>
  11. Cari kode <b:tag class='postInfo' name='div'>
  12. Letakkan kode berikut di bawah <b:tag class='postInfo' name='div'>
    <b:if cond='!data:view.isSingleItem'>
    <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 30 30'><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'/><line transform='translate(-4.500000, -2.500000)' x1='12' x2='12' y1='6' y2='12'/><line transform='translate(-4.500000, -2.500000)' x1='15' x2='9' y1='9' y2='9'/></g></svg>
    </div>
    </b:if>
  13. Cari kode <div class='postComments'>
  14. Letakkan kode berikut di bawah <div class='postComments'>
    <!--[ Bookmark ]-->
    <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'/><line transform='translate(-4.500000, -2.500000)' x1='12' x2='12' y1='6' y2='12'/><line transform='translate(-4.500000, -2.500000)' x1='15' x2='9' y1='9' y2='9'/></g></svg>
    </div>
  15. Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
  16. Letakkan kode berikut di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
    <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.saifullah.id/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" href="#">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>
  17. Ganti www.saifullah.id dengan alamat blog kalian
  18. Simpan Tema

2. Bookmark untuk Median UI 1.6

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Pasang Widget Bookmark di Postingan dan Header Blogger

  5. Cari kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt;
  6. Letakkan kode berikut tepat di atas </head> atau &lt;!--</head>--&gt;&lt;/head&gt;
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
  7. Cari kode ]]></b:skin> atau </style>
  8. Letakkan kode berikut tepat di atas ]]></b:skin> atau </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}

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

  9. Cari kode <b:elseif cond='data:item == &quot;Dark&quot;'/>
  10. Letakkan kode berikut tepat di bawah <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>
  11. Cari kode <div class='pIc'>
  12. Letakkan kode berikut di bawah <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>
  13. Cari kode <b:tag class='pCntn' cond='data:view.isMultipleItems' name='div'>
  14. Maka akan ketemu 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'> 
  15. Ganti kode di atas 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'>
  16. Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
  17. Letakkan kode berikut di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
    <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.saifullah.id/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" href="#">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>
  18. Ganti www.saifullah.id dengan alamat blog kalian
  19. Simpan Tema
  20. Selesai
Referensi:
https://www.hartomy.com/2020/09/cara-membuat-tombol-bookmark-di-blogger.html

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
PT Saifullah Digital Advantec

23 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. Terimakasih ya min udh dibuatin tutorianya, josss emang nih saifullah.id 👍
    1. Sama-sama kak 😇
  2. punyaku kenapa badge indikator counternya berada di sebelahnya min bukan di atsnya
    1. Coba atur bagian margin atau padding nya kak
  3. Terima kasih untuk tutorialnya, info setelah di coba, saya test OK ketika di halaman post dan homepage namun ketika pada postingan setelah loadmore (infinity scroll) icon bookmark di klik tapi counter angka tidak nambah / tidak menyimpan bookmark. mudah2an ada updatenya. bisa di coba di load more halaman homapge blog ini juga tidak work.
    1. Oh, iya mas. Saya cek memang sesuai dengan yang mas bilang. Nanti saya carikan solusinya ya. Tapi sebenarnya tidak begitu masalah kok mas di hompage itu. Soalnya Bookmark biasanya paling banyak diklik saat baca artikel. Kan ada tu icon bookmark di bawah judul dalam postingan.
    2. SIap. betul juga kadang pengunjung hanya bookmark di halaman artikel. oia kalau lihat di web orang india, fitur bookmarknya ketika di klik icon bookmark berubah dan bisa di delete via ikon terbaru. sama ada notif ketika bookmark di klik. mungkin bisa juga kalau nemu referensi di buat tutorialnya.
    3. Alamat blog orang india itu apa mas. Kalau saya lihat contohnya langsung biasanya bisa saya tiru bentuk fiturnya.
    4. https://www.abhishekhub.com/ , pada homepage infinity scrollnya jg work. sama bisa add remove dari ikon bookmarknya lngsung + notif
      kalau sudah bs ditiru tlng update ya. thanks
    5. sama kalau badge nya value 0 ga muncul , tapi kalau kita bookmark baru muncul angka 1 dst. mantap pokonya.
    6. Saya udah cek. Templatenya memang bagus. Gabungan dari Fletro dan Median UI. Makasih infonya mas. Saya tertarik juga bikin kayak gitu.
    7. Update : saya coba otak atik scriptnya dan solusi untuk notif dan badge countnya sudah ketemu. Jadi ketika 0 tidak muncul badge yg ada angkanya, tapi kalau ada bookmark baru muncul 1 dan sterusnya. plus ketika add bookmark bisa ada notif.
    8. Saya dapat dari templatenya, namanya Plus UI 2.6.2 dan memang betul fiturnya dari Median UI + template yang lainnya dengan tambahan fitur2 bagus.
    9. Wah mantap, makasih banyak infonya kak. Ada bahan buat bikin tutorial modifikasi template lagi ni. Hehe...
    10. Sippp, semoga bermanfaat dan bisa dikembangkan buat postingan tutorial.
    11. Mantaap .... Plus UI nya langsung dipakai disini. Lebih nyaman dari Median UI karena banyak fitur tambahan.
    12. Betul kak. Tinggal modifikasi dikit lagi aja ini biar makin mantap. Suka banget sama templatenya. Makasih banget lo, kalau bukan karna kakak yang ngasih tau, saya gak tau tentang template ini. :)
  4. Bang gak tau kenapa setelah pasang widget bookmark malah google transletnya malah gak muncul.mohon solusinya bang.
    1. Alamat blognya apa bang? Saya cek dulu
    2. https://zvx-34.blogspot.com
      ini alamat blog saya bang mohon solusinya
  5. Kak balikin blog saya. saya udah bayar kok akun saya dijadiin penulis bukan admin.. please .
    1. Sebelum pesan barang / jasa, baca syarat & ketentuan di deskripsi produk dulu kak. Itu sengaja di jadikan penuli sementara supaya tidak mengganggu proses editing template yang menyebabkan pengerjaan jadi lebih lama dari biasanya.
  6. Halo ka, saya udah coba dan berhasil.

    Tapi kenapa saat bookmark hanya bisa maksimal 7 ya? tidak bisa lebih dari 7 bookmark?
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.