How To Add Bookmark Post Widget in Blogger Website
Hello Everybody. Today in this post I am going to share How To Add Bookmark Post Widget in Blogger Website. Bookmark Widget in Blogger is a widget where you can save your favorites posts to read anytime. Bookmark Post Widget in Blogger is made with the help of JQuery, Javascript, HTML, CSS and Local Storage.
My habit is when I search for articles on the internet and I haven't had time to read them. I will copy the link to the article and save it so that when I want to read it it's not hard to find it again. with this bookmark widget it might be useful for our blog visitors, because you don't need to press CTRL+D Button in your browser. especially if the articles on our blog are quite a lot.
So when visitors are interested in one of our articles and haven't had time to read it, visitors can bookmark the articles so that it won't be difficult to find later. This widget already uses localStorage, which means that the bookmarked article will not be lost unless the visitor deletes the browser cookies or caches.
A little explanation, like the title of the post above on this bookmark feature I use the localStorage system as a user activity store where this system can store reader data such as cookies (data stored in the browser) so that the list of favorite articles added by the user will not be lost even if it is refreshed or switch pages within one domain.
for the demo, you can try clicking the bookmark icon located in one of the articles on this blog, precisely under the title and next to the author's profile, ok for those of you who want to install it in your blog, let's see how to install bookmark post widget in blogger.
How To Install Bookmark Post Widget in Blogger
before starting make sure you have backed up the template just in case something unexpected happens.
make sure your template has jQuery installed. if you don't already have it, you can copy the code below and place it above the code </head> or <!--</head>--></head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>copy the css below and paste it above the code ]]></b:skin> or above the code</style>
/* bookmark */
.buka-tutup svg.line{width:22px;height:22px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round; stroke-width:1}
.pop-area::-webkit-scrollbar{display:none}
.pop-area{display:flex!important;width:100%;height:100%;position:fixed;top:0;left:0;background:rgb(0 0 0 / 51%);visibility:hidden;opacity:0;transition:all 0.25s ease-in-out;z-index:999999;overflow-y:scroll}
.pop-area.open{opacity:1;visibility:visible}
.pop-area .pop-html{background:#fff;padding-bottom:10px;display:block;margin:auto auto;width:calc(100% - 20px);max-width:500px;visibility:hidden;opacity:0;overflow:hidden;transition:all 0.5s ease-in-out;transform:scale(.5);border-radius:7px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}
.pop-area.open .pop-html{opacity:1;transform:scale(1);visibility:visible}
.pop-area .head-pop:after{content:"Bookmark";color:#fefefe;font-weight:bold}
.pop-area .head-pop{width:-webkit-fill-available;padding:12px 30px;overflow:hidden;background:#f89000}
.pop-area .close-btn{float:right;cursor:pointer;fill:#7e7e7e;color:#fefefe;font-weight:bold}
.pop-area .body-content{padding:10px}
.pop-area .text-center{display:grid;text-align:center;grid-gap:15px}
.pop-area .text-center svg{margin:0 auto}
.pop-area .btn.btn-outline-info{width:fit-content;margin:0 auto;text-decoration:none}
.pop-area .table:hover{border-color:#f89000}
.pop-area .table{transition:all .3s;width:100%;border:1px solid rgba(155,155,155,0.15);border-radius:7px;margin:5px 0;padding:5px}
.pop-area .table img{border-radius:4px;width:auto}
.pop-area .table a:hover,.drK .pop-area .table a:hover{color:#f89000}
.pop-area .table a{text-decoration:none;color:#08102b}
.pop-area .img-left{width:150px}
.pop-area .item-left{padding-right:10px}
.pop-area .btn-remove{cursor:pointer}
.show-bookmark{font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:var(--bodyC);position:absolute;top:-5px;right:0;z-index:2}
.pop-area .counterStat{color:white;font-size:16px}
/* css darkmode sesuaikan class (.drK) dengan templatemu agar dapat berfungsi */
.drK .pop-area.open .pop-html,.drK .pop-area .body-content,.drK .pop-area .table a{background-color:#1e1e1e;color:#fefefe}You can place this bookmark open and close icon where you want, for example just above the header.
<div class='buka-tutup'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'></path></g></svg>
<span class='show-bookmark'></span>
</div>and the html of this bookmark icon functions to add to bookmarks or add articles to bookmarks, you can place this above the code <data:post.body/>
<div class='hartomy-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.featuredImage, 400, "16:9")' expr:data-id='data:post.id' expr:data-link='data:post.url' expr:data-title='data:post.title'><svg class='line' viewBox='0 0 24 24' 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>
</div>and finally place the script belowabove the code </body> or <!--</body>--></body>, if you have don't forget to click save.
the part I marked https://www.wendycode.com/search please change it with your blog url.
<script>//<![CDATA[
// source code : https://www.hartomy.com/2020/09/cara-membuat-tombol-bookmark-di-blogger.html
var massgEmpty="Daftar Artikel Favorit Belum Ada",articleLabel="Semua konten",link_articleLabel="https://www.wendycode.com/search";!function($){"use strict";var OptionManager=(objToReturn={},defaultOptions={bookmarkIcon:"bookmarkIcon",bookmarkBadge:"show-bookmark",articleQuantity:"article-quantity",affixBookmarkIcon:!0,showBookmarkModal:!0,clickOnAddToBookmark:function(t){},clickOnbookmarkIcon:function(t,e){}},objToReturn.getOptions=function(t){var e=$.extend({},defaultOptions);return"object"==typeof t&&$.extend(e,t),e},objToReturn),objToReturn,defaultOptions,articleManager=function(){var t={};localStorage.konten=localStorage.konten?localStorage.konten:"";var e=function(t){localStorage.konten=JSON.stringify(t)},a=function(){try{return JSON.parse(localStorage.konten)}catch(t){return[]}},o=function(t,o){var n=function(t){var e=-1,o=a();return $.each(o,function(a,o){o.id!=t||(e=a)}),e}(t);if(n<0)return!1;var r=a();return r[n].quantity=void 0===o?r[n].quantity:o,e(r),!0};return t.getAllkonten=a,t.updatePoduct=o,t.setarticle=function(t,n,r,i,c,l){return void 0===t?(console.error("id required"),!1):void 0===n?(console.error("title required"),!1):void 0===r?(console.error("link required"),!1):void 0===l?(console.error("borkimage required"),!1):(i=void 0===i?"":i,void(o(t)||function(t,o,n,r,i,c){var l=a();l.push({id:t,title:o,link:n,summary:r,quantity:i,borkimage:c}),e(l)}(t,n,r,i,c,l)))},t.cleararticle=function(){e([])},t.removearticle=function(t){var o=a();o=$.grep(o,function(e,a){return e.id!=t}),e(o)},t.getTotalQuantity=function(){var t=0,e=a();return $.each(e,function(e,a){t+=a.quantity}),t},t}(),loadBookmarkEvent=function(t){var e=OptionManager.getOptions(t),a=$("."+e.bookmarkIcon),o=$("."+e.bookmarkBadge),n=e.articleQuantity;o.text(articleManager.getTotalQuantity()),$("#cart-modal").length||$("body").append('<div class="pop-area" id="cart-modal"><div class="pop-html"><div class="head-pop"><a class="close-btn buka-tutup">X</a></div><div class="body-content"><span class="table-responsive" id="cart-table"></span></div></div></div>');var r=function(){var t=$("#cart-table");t.empty();var e=articleManager.getAllkonten();$.each(e,function(){t.append('<table class="table"><tbody><tr title="'+this.summary+'" data-id="'+this.id+'"><td class="item-left img-left"><img width="60px" height="60px" src="'+this.borkimage+'"/></td><td class="item-left"><a href="'+this.link+'">'+this.title+'</a></td><td class="item-left" title="Remove favorit" class="text-center" style="width: 30px;"><a class="btn-remove"><svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="translate(3.500000, 2.000000)"><path d="M15.3891429,7.55409524 C15.3891429,15.5731429 16.5434286,19.1979048 8.77961905,19.1979048 C1.01485714,19.1979048 2.19295238,15.5731429 2.19295238,7.55409524"></path><line x1="16.8651429" y1="4.47980952" x2="0.714666667" y2="4.47980952"></line><path d="M12.2148571,4.47980952 C12.2148571,4.47980952 12.7434286,0.714095238 8.78914286,0.714095238 C4.83580952,0.714095238 5.36438095,4.47980952 5.36438095,4.47980952"></path></g></svg></a></td></tr></tbody></table>')}),t.append(e.length?"":'<div role="alert" id="cart-empty-message"><div class="text-center"><svg width="80" height="80" viewBox="0 0 24 24"><path d="M19,2L14,6.5V17.5L19,13V2M6.5,5C4.55,5 2.45,5.4 1,6.5V21.16C1,21.41 1.25,21.66 1.5,21.66C1.6,21.66 1.65,21.59 1.75,21.59C3.1,20.94 5.05,20.5 6.5,20.5C8.45,20.5 10.55,20.9 12,22C13.35,21.15 15.8,20.5 17.5,20.5C19.15,20.5 20.85,20.81 22.25,21.56C22.35,21.61 22.4,21.59 22.5,21.59C22.75,21.59 23,21.34 23,21.09V6.5C22.4,6.05 21.75,5.75 21,5.5V7.5L21,13V19C19.9,18.65 18.7,18.5 17.5,18.5C15.8,18.5 13.35,19.15 12,20V13L12,8.5V6.5C10.55,5.4 8.45,5 6.5,5V5Z" fill="#f89000"/></svg><center>'+massgEmpty+'</center><a class="btn btn-outline-info m-2" href="'+link_articleLabel+'">'+articleLabel+"</a></div></div>")};if(e.affixBookmarkIcon){var i=1*a.offset().top+1*a.css("height").match(/\d+/);$(window).scroll(function(){$(window).scrollTop()>=i?a.addClass("bookmarkIcon-affix"):a.removeClass("bookmarkIcon-affix")})}a.click(function(){e.showBookmarkModal?r():e.clickOnbookmarkIcon(a,articleManager.getAllkonten())}),$(document).on("keypress","."+n,function(t){38!=t.keyCode&&40!=t.keyCode&&t.preventDefault()}),$(document).on({click:function(){var t=$(this).closest("tr"),e=t.data("id");t.hide(500,function(){articleManager.removearticle(e),r(),o.text(articleManager.getTotalQuantity())})}},".btn-remove")};$(document).on({click:function(){return $(".pop-area").toggleClass("open"),!1}},".buka-tutup"),$(function(){var goTohartomyBookmark=function(t){};eval(function(t,e,a,o,n,r){if(n=function(t){return(t<58?"":n(parseInt(t/58)))+((t%=58)>35?String.fromCharCode(t+29):t.toString(36))},!"".replace(/^/,String)){for(;a--;)r[n(a)]=o[a]||n(a);o=[function(t){return r[t]}],n=function(){return"\\w+"},a=1}for(;a--;)o[a]&&(t=t.replace(new RegExp("\\b"+n(a)+"\\b","g"),o[a]));return t}('q h=["\\B\\e\\M","\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f","\\x\\y\\f\\g\\C\\k\\y\\k\\y\\F","\\N\\z\\g\\i\\k\\e\\j\\G\\C\\x\\e\\e\\f\\j\\g\\i\\f\\C\\x\\k\\m","\\H\\z\\A\\r\\k","\\F\\y\\H\\z","\\s\\t\\s","\\s\\t\\O","\\s\\t\\P","\\z\\g\\i\\k\\e\\j\\G\\n\\e\\e\\f\\j\\g\\i\\f","\\s\\t\\Q"];q D=[h[0],h[1],h[2],h[3]];(o(b,c){q d=o(a){R(--a){b[h[5]](b[h[4]]())}};d(++c)}(D,S));q u=o(a,b){a=a-I;q c=D[a];T c};$(u(h[U]))[h[9]]({\'\\x\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':u(h[6]),\'\\g\\r\\r\\A\\t\\n\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':!I,\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)},\'\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){V[u(h[8])](u(h[7]),a)},\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)}})',0,58,"||||||||||||||x6F|x6B|x61|_0x6a0a|x72|x6D|x74|x64|x6E|x42|function|x63|var|x66|x30|x78|_0x3889|x41|x4F|x62|x75|x68|x69|x6C|x2D|_0x4117|x65|x70|x79|x73|0x0|x49|x54|goTohartomyBookmark|x67|x2E|x33|x32|x31|while|0xd6|return|10|console".split("|"),0,{}))});var MyBookmark=function(t,e){var a=$(t),o=OptionManager.getOptions(e),n=$("."+o.bookmarkBadge);a.click(function(){o.clickOnAddToBookmark(a);var t=a.data("id"),e=a.data("title"),r=a.data("link"),i=a.data("summary"),c=a.data("quantity"),l=a.data("borkimage");articleManager.setarticle(t,e,r,i,c,l),n.text(articleManager.getTotalQuantity())})};$.fn.hartomyBookmark=function(t){return loadBookmarkEvent(t),$.each(this,function(){new MyBookmark(this,t)})}}(jQuery);
//]]></script>ok so that 's how to make a bookmark widget on blogger that I can share this time, hopefully it's useful and thank you for visiting.
Refrence:- Wendycode.com or Hartomhy.com
0 comments for How To Add Bookmark Post Widget in Blogger Website