How to create a Bookmark widget in Blogger 2022

Hello all on this occasion I will share a Tutorial On How to create a Bookmark widget In Blogger Using jQuery Like On This Blog. This bookmark

Short Talk

Hello all on this occasion I will share a Tutorial On How to create a Bookmark widget In Blogger Using jQuery Like On This Blog. This bookmark widget will probably be useful for our blog visitors, This Widget will be helpful if the articles on our blog are quite a lot.

    Benefits of using Boomark Widget

    How to create a Bookmark widget in Blogger

    So when visitors are interested in one of our articles and have not had time to read it then visitors can bookmark the article so that later it is not difficult to find them that post again.

    This widget already uses local Storage which means that the bookmarked article will not disappear unless the visitor deletes their browser cookie.

    For the demo you can try to click the bookmark icon that is in one of the articles on this blog precisely at the top of this Post & bookmarked article can be seen through the Bookmarked Icon on the Top of the Header in the Right Corner i.e blinking.

    before you start make sure you have backed up the template just in case something happens that you don't want.

    How to create a Bookmark widget in Blogger

    1. First Go To Blogger.Com.
    2. Open your blogger dashboard.
    3. Next, Click on the "Theme" Section and Click Edit Html Option
    4. Make sure your template is already installed jQuery if it does not already exist, Follow the below Steps
    5. After that, Find </head> Tag on Theme
    6. Copy the below JQuery Script Code and paste it above</head>   Tag.
    7. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
    8. Now Again, Find ]]></b:skin> Tag on Theme
    9. Copy the below CSS Code and paste it above on ]]></b:skin>   Tag.
    10. /* bookmark widget By Tech & Fun Zone*/
      .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: var(--trans-2);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: var(--trans-2);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{width:-webkit-fill-available;padding:12px 30px;overflow:hidden;/*background:#d3f6f3*/border-bottom: 1px solid #e6e6e6;}
      .pop-area .close-btn{float:right;cursor:pointer;fill:#7e7e7e}
      .pop-area .buka-tutup svg {width: 20px;height: 20px;fill: none!important;stroke: #08102b;stroke-linecap: round;stroke-linejoin: round;stroke-width: 1px;}
      .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{width:100%;border: 1px solid #e6e6e6;border-radius:7px;margin:5px 0;padding:5px}
      .pop-area .table img{border-radius:4px;width:auto;background: var(--mobHv);}
      .pop-area .table a{text-decoration:none;color: var(--fotT);}
      .pop-area .table:hover{border-color:var(--linkC)}
      .pop-area .img-left{width:140px;height:60px}
      .pop-area .item-left{/*vertical-align:-webkit-baseline-middle;*/padding-right:10px}
      .pop-area .btn-remove{cursor:pointer}
      .pop-area .btn-remove svg{fill:none!important;stroke:var(--iconC);stroke-linecap:round;stroke-linejoin:round;stroke-width:1;}
      .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;animation:indicator 4s ease infinite;-webkit-animation:indicator 1s ease infinite;z-index:1}@-webkit-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
      .counterStat{color:white;font-size:16px}
      .pop-area .head-pop b::after{content:'';display:inline-block;vertical-align:middle;width:var(--widgetTa);margin:0 10px;border-bottom:1px solid var(--widgetTac);opacity:.5}
      .pop-area .head-pop b{margin:0 0 25px;font-size:var(--widgetT);font-weight:var(--widgetTw);position:relative}
      .pop-area .table img::before{content:'No image';display:block;position:absolute;top:50%;left:50%;max-width:none;max-height:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:12px;opacity:.7;white-space:nowrap;}
      /*dark mode adjust if the class is different*/
      .drK.pop-area .pop-html{background:var(--darkB);color:var(--darkT)}
      .drK.pop-area .buka-tutup svg,.drK .btn-remove svg{stroke:var(--darkT)}
      .drK.pop-area .table img {background: var(--darkTa);}
      .drK.pop-area .table a {color: var(--darkT)}
      

      Change the marked part of .drK CSS as per your theme dark-mode CSS.

    11. This is BookMark Icon open-close button, you can put where you want for example just above the </header> Tag.
    12. <li class='buka-tutup'>
      <div class='tSrch R tIc bIc' data-tooltip='Buka Bookmark'>
      <svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(4.500000, 2.500000)'><line x1='4.042443' x2='10.897443' y1='6.7177' y2='6.7177'/><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>
                                </li>
    13. And this html bookmark icon will show Bookmark button in top of every Post. To add articles to bookmarks, Copy the below code and put it above of <data:post.body/>
    14. Tips —
      There are several <data:post.body/> codes in some blogger templates, usually there are 2 or 3. please try one by one and check the result.


    15. After You have Found Paste it before <data:post.body/>
    16. <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>
      
    17. Now finally put the Java Script below above the code </body> or <!--</body>--></body> Tag.
    18. <script>
      //<![CDATA[
      // source code : https://www.hartomy.com/2020/09/cara-membuat-tombol-bookmark-di-blogger.html
      var massgEmpty = ('List of Favorite Articles Does Not Yet Exist'),
      articleLabel = ('All Content'),
      link_articleLabel = ('https://www.techandfunzone.in/search/');
      (function ($) {
      "use strict";
      var OptionManager = (function () {
      var objToReturn = {};
      var defaultOptions = {
      bookmarkIcon: 'bookmarkIcon',
      bookmarkBadge: 'show-bookmark',
      articleQuantity: 'article-quantity',
      affixBookmarkIcon: true,
      showBookmarkModal: true,
      clickOnAddToBookmark: function($addTobookmark) { },
      clickOnbookmarkIcon: function($bookmarkIcon, konten ) { },
      };
      var getOptions = function (customOptions) {
      var options = $.extend({}, defaultOptions);
      if (typeof customOptions === 'object') {
      $.extend(options, customOptions);
      }
      return options;
      }
      objToReturn.getOptions = getOptions;
      return objToReturn;
      }());
      var articleManager = (function(){
      var objToReturn = {};
      localStorage.konten = localStorage.konten ? localStorage.konten : "";
      var getIndexOfarticle = function(id){
      var articleIndex = -1;
      var konten = getAllkonten();
      $.each(konten, function(index, value){
      if(value.id == id){
      articleIndex = index;
      return;
      }
      });
      return articleIndex;
      }
      var setAllkonten = function(konten){
      localStorage.konten = JSON.stringify(konten);
      }
      var addarticle = function(id, title, link, summary, quantity, borkimage) {
      var konten = getAllkonten();
      konten.push({
      id: id,
      title: title,
      link: link,
      summary: summary,
      quantity: quantity,
      borkimage: borkimage
      });
      setAllkonten(konten);
      }
      var getAllkonten = function(){
      try {
      var konten = JSON.parse(localStorage.konten);
      return konten;
      } catch (e) {
      return [];
      }
      }
      var updatePoduct = function(id, quantity) {
      var articleIndex = getIndexOfarticle(id);
      if(articleIndex < 0){
      return false;
      }
      var konten = getAllkonten();
      konten[articleIndex].quantity = typeof quantity === "undefined" ? konten[articleIndex].quantity : quantity;
      setAllkonten(konten);
      return true;
      }
      var setarticle = function(id, title, link, summary, quantity, borkimage) {
      if(typeof id === "undefined"){
      console.error("id required")
      return false;
      }
      if(typeof title === "undefined"){
      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;
      }
      summary = typeof summary === "undefined" ? "" : summary;
      if(!updatePoduct(id)){
      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 getTotalQuantity = function(){
      var total = 0;
      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;
      objToReturn.getTotalQuantity = getTotalQuantity;
      return objToReturn;
      }());
      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';
      var AffixMybookmarkIcon = 'bookmarkIcon-affix';
      $bookmarkBadge.text(articleManager.getTotalQuantity());
      if(!$("#" + idBookmarkModal).length) {
      $('body').append(
      '<div class="pop-area" id="' + idBookmarkModal + '">' +
      '<div class="pop-html">' +
      '<div class="head-pop"><b>Bookmark</b><a class="close-btn buka-tutup"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="15" y1="15" x2="9" y2="9"></line></svg></a></div>' +
      '<div class="body-content">' +
      '<span class="table-responsive" id="' + idbookmarkTable + '"></span>' +
      '</div>' +
      '</div>' +
      '</div>'
      );
      }
      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 img-left"><img width="140px" 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 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>'
      );
      });
      $bookmarkTable.append(konten.length ? '':
      '<div role="alert" id="' + idEmptyBookmarkMessage + '"><div class="text-center"><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><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);
      drawTable();
      $bookmarkBadge.text(articleManager.getTotalQuantity());
      });
      }}, '.btn-remove');
      }
      $(document).on({
      click: function() {
      $('.pop-area').toggleClass('open');
      return false;
      }}, '.buka-tutup');
      $(function () {
      var goTohartomyBookmark = function($addTobookmarkBtn){
      }
      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,{}))
      });
      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>

      The part that I marked https://www.techandfunzone.in/search please change it with the url of your blog.

    19. Now Don't forget to click on save.
    20. That't All For Now.

    Final Words

    I hope this Article How to create a Bookmark widget in Blogger would be helpful for you. If you want any more information like this article. Please follow our Tech & Fun Zone on Telegram Channel for updates.

    Hopefully, the Above tutorial has completely helped you to learn How to create a Bookmark widget in Blogger If you have got any issues in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us

    © Tech & Fun Zone
    Hi there, this is Arif. I am a Bachelors in computer by qualification who loves to write about blogs, softwares, windows and all it's related topics. I’m the one that writes, publishes, and maint…

    2 comments

    1. Nice Arif bhai ❣️
      1. Thanks bro...keep supporting ❤️