Mọi ý kiến đóng góp, xin liên hệ với tôi! Contact

Thêm tiện ích bookmark trên Blogger

Thêm tiện ích bookmark trên Blogger
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào Đi tới liên kết đến đích
Chúc mừng! Liên kết được tạo

Dấu trang thường được người đọc sử dụng để đánh dấu các trang web mà họ thích hoặc được ưu tiên đọc. Như chúng ta biết, dấu trang là các phương tiện tồn tại trong một trình duyệt như Google Chrome, Mozilla, Internet Explorer, Opera và các ứng dụng trình duyệt khác để lưu địa chỉ hoặc tên của một trang web và nhóm các địa chỉ url theo chủ đề hoặc chủ đề được chỉ định để người đọc không lâu hơn cần phải ghi nhớ vì url của trang web quá dài.

Tiện ích này đã sử dụng localStorage, có nghĩa là bài viết được đánh dấu sẽ không bị mất trừ khi khách truy cập xóa cookie của trình duyệt.

Thêm tiện ích bookmark trên Blogger
Thêm tiện ích bookmark trên Blogger

Thêm tiện ích bookmark Blogger

Chú ý
Trước khi bắt đầu, hãy đảm bảo rằng bạn đã sao lưu mẫu đề phòng có điều gì đó không mong muốn xảy ra.

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Hãy kiểm tra mẫu của bạn đã được cài đặt jQuery, nếu bạn chưa có bạn có thể sao chép mã bên dưới và đặt nó phía trên mã </head> hoặc &lt;!--</head>--&gt;&lt;/head&gt;

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

Bước 6: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

/* 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 dark mode adjust the class (.d) with the template so that it works */
.drK .pop-area.open .pop-html,.drK .pop-area .body-content,.drK .pop-area .table a{background-color:#1e1e1e;color:#fefefe}

Bước 7: Bạn có thể đặt biểu tượng mở và đóng dấu trang này ở nơi bạn muốn, ví dụ phía trên tiêu đề.

<div class='open-close'>
<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>

Bước 8: Thêm html của biểu tượng dấu trang này có chức năng thêm vào dấu trang hoặc thêm bài viết vào dấu trang, bạn có thể đặt mã này phía trên mã <data:post.body/>

<div class='giahuy-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ước 9: Và cuối cùng đặt tập lệnh bên dưới bên trên mã </body> hoặc &lt;!--</body>--&gt;&lt;/body&gt; và Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

<script>//<![CDATA[
// Source code: https://www.hartomy.com/2020/09/cara-membuat-tombol-bookmark-di-blogger.html
var massgEmpty='Danh sách bài viết yêu thích không có sẵn',articleLabel='Tất cả nội dung',link_articleLabel='/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 open-close">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},},'.open-close'),$(function(){var goGiahuyBookmark=function(t){};$('.giahuy-bookmark-btn').hartomyBookmark({bookmarkIcon:'open-close',affixBookmarkIcon:!0x0,clickOnAddToBookmark:function(a){goGiahuyBookmark(a)},afterAddOnBookmark:function(a){console.log('afterAddOnBookmark',a)},clickOnAddToBookmark:function(a){goGiahuyBookmark(a)},})});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>

Phần mình tô màu xanh https://www.giahuy.net/search bạn hãy thay đổi nó bằng url blog của bạn.

Đối với mẫu Median Ui 1.6

Bước 5: Hãy kiểm tra mẫu của bạn đã được cài đặt jQuery, nếu bạn chưa có bạn có thể sao chép mã bên dưới và đặt nó phía trên mã </head> hoặc &lt;!--</head>--&gt;&lt;/head&gt;

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

Bước 6: Sao chép css bên dưới và dán trên ]]></b:skin> hoặc trên mã </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}

/* Additional css for bookmark button appears on homepage on median ui 1.6 template */
.iFxd .giahuy-bookmark-btn:hover::before{content:'Đọc sau';right:15px;display:block}
.iFxd .giahuy-bookmark-btn:before{content:'';font-size:12px;color:#767676;width:65px;padding-left:12px;padding:5px 0 5px 12px;background-color:var(--bodyB);border-radius:5px;position:absolute;right:0;display:none}
.iFxd .giahuy-bookmark-btn{position:relative;transition:var(--trans-4)}

Bước 7: Biểu tượng mở và đóng dấu trang:

<!-- Tìm mã như thế này -->
<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>
                   
<!-- Thay đổi thành -->
<b:elseif cond='data:item == &quot;Dark&quot;'/>
<li class='open-close'>
  <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>

Bước 8: Ở đây mình đã thay đổi biểu tượng chia sẻ dưới tiêu đề thành biểu tượng thêm vào dấu trang.

<!-- Tìm mã như thế này -->
<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>

<!-- Thay đổi thành -->
<div class='pIc'>
  <label class='tIc giahuy-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>-->

Bước 9: Tiếp tục tìm kiếm để dễ dàng hơn vì nhiều mã giống nhau sử dụng Ctrl + F tìm mã <b:tag class='pCntn' cond='data:view.isMultipleItems' name='div'> giống như toàn bộ mã bên dưới, vui lòng xóa và thay thế nó theo hướng dẫn bên dưới.

<!-- Tìm mã như thế này -->
<!--[ 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'>
                    
<!-- Thay đổi thành -- >
<!--[ 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='giahuy-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'>

Bước 10: Và cuối cùng đặt tập lệnh bên dưới bên trên mã </body> hoặc &lt;!--</body>--&gt;&lt;/body&gt; và Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

<script>//<![CDATA[
// Source code: https://www.hartomy.com/2020/09/cara-membuat-tombol-bookmark-di-blogger.html
var massgEmpty='Danh sách bài viết yêu thích không có sẵn',articleLabel='Tất cả nội dung',link_articleLabel='/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 open-close">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},},'.open-close'),$(function(){var goGiahuyBookmark=function(t){};$('.giahuy-bookmark-btn').hartomyBookmark({bookmarkIcon:'open-close',affixBookmarkIcon:!0x0,clickOnAddToBookmark:function(a){goGiahuyBookmark(a)},afterAddOnBookmark:function(a){console.log('afterAddOnBookmark',a)},clickOnAddToBookmark:function(a){goGiahuyBookmark(a)},})});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>

Phần mình tô màu xanh https://www.giahuy.net/search bạn hãy thay đổi nó bằng url blog của bạn.

Trên đây là hướng dẫn thêm tiện ích bookmark trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Copyright © www.wendycode.com

Về tác giả

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web .

Đăng nhận xét

Vui lòng không chia sẻ bất kỳ chi tiết nhạy cảm hoặc cá nhân nào ở đây.
Cookie Consent
Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn.
Thêm chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu mà chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.