Cách tạo nút đánh dấu bài viết yêu thích để xem sau trên blogger

ướng dẫn tạo nút đánh dấu bài viết yêu thích để xem sau trên blogger. Như chúng ta đã biết, để sử dụng tiện ích đánh dấu nhanh chóng trên trình duyệt, thường nhấn Ctr + D để thêm url trang web vào danh sách ưa thích vào trong thanh dấu trang. Bản thân tôi trong bao năm qua cũng đã tạo cho mình vô số những thư mục để đánh dấu các bài viết, trang web hữu ích. Tuy vậy, nó chưa làm tôi thỏa mãn. Tôi thích duyệt những trang web có tích hợp sẵn nút đánh dấu bài viết, nó rất tiện dụng, vì tôi sẽ chỉ tập trung duyệt web, sau đó tích chọn những bài cần xem, sau đó chọn lọc lại danh mục đã lưu để ưu tiên xem các bài viết quan trọng hơn cả. Chính thói quen đó đã giúp tôi tiết kiệm được rất nhiều thời gian khi duyệt web.

Chính vì những lợi ích đó, tôi đã mày mò, tìm hiểu rất nhiều cách để tích hợp nó vào Blogger, nhưng phần lớn các hướng dẫn đều khó hiểu và khó thực hiện. Tôi không biết là tôi gà mờ hay người viết code hướng dẫn cố tình "làm khó" các newbie như tôi. Nói thật, tôi không thích như vậy. Chính vì thế mà tôi luôn chọn các modul/Widget/tiện ích dễ thêm, đơn giản và gần như ai cũng có thể thực hiện được ở trang blog này.

Lý do là vì tôi không phải là dân IT thực thụ, không biết về code lại càng không có thời gian để học viết code. Thứ duy nhất những người như tôi có được và tồn tại với blog dài lâu là bởi nhìn hoài thì quen, va chạm nhiều thì nhớ và có chút xíu kinh nghiệm trong việc xử lý các vấn đề phát sinh, còn phần lớn là phải tìm và học cách sửa chữa. Vì lẽ đó mà có ngày thành thục hơn.

Thôi không lòng vòng nữa, ta đi vào vấn đề chính. Để cài đặt tiện ích này, bạn làm theo các hướng dẫn sau:

XEM DEMO

(hoặc Trực tiếp trên trang này. Bạn có thể thấy nút Lưu xem sau và mở trên menu góc phải nút hiển thị số bài đã lưu.)

Bước 1: Vào Chủ đề > Chỉnh sửa HTML > Ctrl-F và tìm đến mã </head> hoặc </body> . Thêm trên/Trước nó đoạn code này:

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

*Lưu ý: Nếu template/mẫu của bạn có thư viện rồi thì bỏ qua bước này.

Bước 2: Tìm đến đoạn mã ]]> </ b: skin> hoặc </style> và thêm trước/trên nó

.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba;position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem;width:100%}.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-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}
.head-pop{width:-webkit-fill-available;padding:12px 30px;overflow:hidden;background:#d3f6f3}
.close-btn{float:right;cursor:pointer;fill:#7e7e7e}
.body-content{padding:10px}
.text-center{display:grid;text-align:center;grid-gap:15px}
.text-center svg{margin:0 auto}
.show-bookmark{color:#fff;background-color:#007bff;position:relative;top:-20px;right:10px;font-size:50%;padding:.15em .3em;display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:50%;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.btn.btn-outline-info{width:fit-content;margin:0 auto;text-decoration:none}
.table{width:100%;border:1px solid #acdcd8;border-radius:7px;margin:5px 0;padding:5px}
.table img{border-radius:4px;width:auto}
.table a{text-decoration:none}
.img-left{width:1px}
.item-left{vertical-align:-webkit-baseline-middle;padding-right:10px}
.btn-remove{cursor:pointer}
.hartomy-bookmark-btn,.btn-outline-info{position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;text-transform:uppercase;color:rgb(var(--pure-material-onprimary-rgb,255,255,255));background-color:rgb(var(--pure-material-primary-rgb,33,150,243));box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);font-family:var(--pure-material-font,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;overflow:hidden;outline:none;cursor:pointer;transition:box-shadow 0.2s}.hartomy-bookmark-btn::-moz-focus-inner{border:none}
.hartomy-bookmark-btn svg{vertical-align:middle}

Bước 3: Tiếp tục tìm đến mã </body> và thêm trên/trước nó

<script>
//<![CDATA[/*
* hartomy Bookmark
* Copyright (c) 2020 https://www.hartomy.com* No Licensed & Open source Code
var massgEmpty = ('Chưa có bài nào được lưu'),* jQuery library
*/
// variable empty konten
link_articleLabel = ('LINK YOUR LABEL');articleLabel = ('TÊN NHÃN'),
(function ($) {
  "use strict";
    var defaultOptions = {  var OptionManager = (function () {
    var objToReturn = {};
      articleQuantity: 'article-quantity',      bookmarkIcon: 'bookmarkIcon',
      bookmarkBadge: 'show-bookmark',
      clickOnAddToBookmark: function($addTobookmark) { },      affixBookmarkIcon: true,
      showBookmarkModal: true,
    var getOptions = function (customOptions) {      clickOnbookmarkIcon: function($bookmarkIcon, konten ) { },
    };
      var options = $.extend({}, defaultOptions);
    objToReturn.getOptions = getOptions;      if (typeof customOptions === 'object') {
        $.extend(options, customOptions);
      }
      return options;
    }
    return objToReturn;
  }());
    var getIndexOfarticle = function(id){  var articleManager = (function(){
    var objToReturn = {};
    localStorage.konten = localStorage.konten ? localStorage.konten : "";
      var articleIndex = -1;
      return articleIndex;      var konten = getAllkonten();
      $.each(konten, function(index, value){
        if(value.id == id){
          articleIndex = index;
          return;
        }
      });
    }
      var konten = getAllkonten();    var setAllkonten = function(konten){
      localStorage.konten = JSON.stringify(konten);
    }
    var addarticle = function(id, title, link, summary, quantity, borkimage) {
      konten.push({
        id: id,
        var konten = JSON.parse(localStorage.konten);        title: title,
        link: link,
        summary: summary,
        quantity: quantity,
        borkimage: borkimage
      });
      setAllkonten(konten);
    }
    var getAllkonten = function(){
      try {
      var konten = getAllkonten();        return konten;
      } catch (e) {
        return [];
      }
    }
    var updatePoduct = function(id, quantity) {
      var articleIndex = getIndexOfarticle(id);
      if(articleIndex < 0){
        return false;
      }
    var setarticle = function(id, title, link, summary, quantity, borkimage) {      konten[articleIndex].quantity = typeof quantity === "undefined" ? konten[articleIndex].quantity : quantity;
      setAllkonten(konten);
      return true;
    }
      if(typeof id === "undefined"){
        console.error("id required")
        return false;
      }
      if(typeof title === "undefined"){
      summary = typeof summary === "undefined" ? "" : summary;        console.error("title required")
        return false;
      }
      if(typeof link === "undefined"){
        console.error("link required")
        return false;
      }
      if(typeof borkimage === "undefined"){
        console.error("borkimage required")
        return false;
      }

      if(!updatePoduct(id)){
    var getTotalQuantity = function(){        addarticle(id, title, link, summary, quantity, borkimage);
      }
    }
    var cleararticle = function(){
      setAllkonten([]);
    }
    var removearticle = function(id){
      var konten = getAllkonten();
      konten = $.grep(konten, function(value, index) {
        return value.id != id;
      });
      setAllkonten(konten);
    }
      var total = 0;
    objToReturn.getTotalQuantity = getTotalQuantity;      var konten = getAllkonten();
      $.each(konten, function(index, value){
        total += value.quantity;
      });
      return total;
    }
    objToReturn.getAllkonten = getAllkonten;
    objToReturn.updatePoduct = updatePoduct;
    objToReturn.setarticle = setarticle;
    objToReturn.cleararticle = cleararticle;
    objToReturn.removearticle = removearticle;
    return objToReturn;
  }());
    var AffixMybookmarkIcon = 'bookmarkIcon-affix';  var loadBookmarkEvent = function(userOptions){
    var options = OptionManager.getOptions(userOptions);
    var $bookmarkIcon = $("." + options.bookmarkIcon);
    var $bookmarkBadge = $("." + options.bookmarkBadge);
    var articleQuantity = options.articleQuantity;
    var idBookmarkModal = 'cart-modal';
    var idbookmarkTable = 'cart-table';
    var idEmptyBookmarkMessage = 'cart-empty-message';
        '</div>' +    $bookmarkBadge.text(articleManager.getTotalQuantity());
    if(!$("#" + idBookmarkModal).length) {
      $('body').append(
        '<div class="pop-area" id="' + idBookmarkModal + '">' +
        '<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="' + idbookmarkTable + '"></span>' +
        '</div>' +
        '</div>'
          '<td class="item-left img-left"><img width="60px" height="60px" src="' + this.borkimage + '"/></td>' +      );
    }
    var drawTable = function(){
      var $bookmarkTable = $("#" + idbookmarkTable);
      $bookmarkTable.empty();
      var konten = articleManager.getAllkonten();
      $.each(konten, function(){
        $bookmarkTable.append(
          '<table class="table">' +
          '<tbody>' +
          '<tr title="' + this.summary + '" data-id="' + this.id + '">' +
          '<td class="item-left" title="Remove favorit" class="text-center" style="width: 30px;"><a class="btn-remove"><svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-trash-fill text-danger" fill="currentColor"><path fill-rule="evenodd" d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"/></svg></a></td>' +          '<td class="item-left"><a href="' + this.link + '" class="btn-remove">' + this.title + '</a></td>' +
          '</tr>' +
          '</tbody>' +
          '</table>'
        );
      });
      $bookmarkTable.append(konten.length ? '':
        '<div role="alert" id="' + idEmptyBookmarkMessage + '"><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="#007bff"/></svg><center>' + massgEmpty + '</center><a class="btn btn-outline-info m-2" href="' + link_articleLabel + '">' + articleLabel + '</a></div></div>'      );
    }
    var showModal = function(){
      drawTable();
    }
    /*
    EVENT ADD TO BOOKMARK LIST
    */
    if(options.affixBookmarkIcon) {
      var bookmarkIconBottom = $bookmarkIcon.offset().top * 1 + $bookmarkIcon.css("height").match(/\d+/) * 1;
      $(window).scroll(function () {
        $(window).scrollTop() >= bookmarkIconBottom ? $bookmarkIcon.addClass(AffixMybookmarkIcon) : $bookmarkIcon.removeClass(AffixMybookmarkIcon);
      });
    }
    $bookmarkIcon.click(function(){
      options.showBookmarkModal ? showModal() : options.clickOnbookmarkIcon($bookmarkIcon, articleManager.getAllkonten());
    });
    $(document).on('keypress', "." + articleQuantity, function(evt){
      if(evt.keyCode == 38 || evt.keyCode == 40){
        return ;
      }
      evt.preventDefault();
    });
    $(document).on({
      click: function() {
      var $tr = $(this).closest("tr");
      var id = $tr.data("id");
      $tr.hide(500, function(){
        articleManager.removearticle(id);
    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('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)}})',58,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,{}))        drawTable();
        $bookmarkBadge.text(articleManager.getTotalQuantity());
      });
    }}, '.btn-remove');
  }
  $(document).on({
    click: function() {
      $('.pop-area').toggleClass('open');
      return false;
  }}, '.buka-tutup');
  $(function () {
    var goTohartomyBookmark = function($addTobookmarkBtn){
    }
    });
  var MyBookmark = function (target, userOptions) {
    /*
    PRIVATE 
    */
    var $target = $(target);
    var options = OptionManager.getOptions(userOptions);
    var $bookmarkBadge = $("." + options.bookmarkBadge);
    /*
    EVENT TARGET ADD TO BOOKMARK
    */
    $target.click(function(){
      options.clickOnAddToBookmark($target);
      var id = $target.data('id');
      var title = $target.data('title');
      var link = $target.data('link');
      var summary = $target.data('summary');
      var quantity = $target.data('quantity');
      var borkimage = $target.data('borkimage');

      articleManager.setarticle(id, title, link, summary, quantity, borkimage);
        $bookmarkBadge.text(articleManager.getTotalQuantity());
    });
  }
  $.fn.hartomyBookmark = function (userOptions) {
    loadBookmarkEvent(userOptions);
    return $.each(this, function () {
      new MyBookmark(this, userOptions);
    });
  }
})(jQuery);
//]]>
</script>

Bước 4: Cài đặt vị trí hiển thị nút hiển thị danh sách bài đã lưu.

Thường thì nút/button này được đặt ở phần menu của trang. Việc của bạn là tìm một vị trí thích hợp và đặt đoạn code này vào:

  <div class="alert-warning">    
      <div style="float: right; cursor: pointer;margin-top: 20px;">
        <span class="buka-tutup"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" /></svg><small><span class="show-bookmark"></span></small></span>      </div>
  </div>

Bước 5: Cài đặt nút/button đánh dấu bài yêu thích

Có nhiều vị trí để đặt nút/button này chẳng hạn như: tiêu đề bài viết, thẻ giới thiệu thông tin bài viết, cuối bài viết, phần share,... Tùy vị trí bạn muốn hiển thị mà cài đặt. Ở đây, mình chọn vị trí là phần giói thiệu thông tin(thẻ meta). Cài đặt vị trí này, bạn tìm đến đoạn mã <div class="post-meta-item"> và thêm sau nó đoạn code này:

<button class="hartomy-bookmark-btn" expr:data-link="data:post.url" expr:data-id='data:post.id' expr:data-title='data:post.title' data-quantity="1" expr:data-borkimage='resizeImage(data:post.featuredImage, 400, &quot;16:9&quot;)'>boorkmark <svg width="24" height="24" viewBox="0 0 24 24"><path d="M17,18L12,15.82L7,18V5H17M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z" fill="#fff" /></svg></button>

Bước 6: Chỉnh sửa

1. Bạn tìm đến đoạn code dưới đây và thay đổi các dòng muốn hiển thị.

var massgEmpty = ('Chưa có bài viết nào được lưu'),articleLabel = ('TÊN NHÃN'),
link_articleLabel = ('YOUR LABEL');

Cuối cùng, tiến hành chỉnh sửa cho vừa ý của bạn. Nếu có vấn đề nào khó khăn, để lại comment bên dưới, mình sẽ cố gắng phản hồi trong thời gian sớm nhất. Nếu thấy bài viết hữu ích, vui lòng đánh giá để ủng hộ và động viên mình nhé! Cảm ơn bạn rất nhiều.

Xem bài viết gốc tại đây.