Hello everyone, in this post I am going to Share about How To Create Bookmark Post widget on blogger. Bookmark feature in Blogger is a widget where you can add your favorites posts to easily read.The bookmark feature will working on both desktop and mobile devices, This has an very beautiful and cool look, your Daily website visitors to bookmark your posts on your website and visitors can read infuture without his wasting time using By bookmark feature On Website.
You can do it very easily in mobile To Create Bookmark Post Feature On Blogger ,This Feature Created on JQuery, Javascript, HTML, CSS and Other.
You can do it very easily in mobile To Create Bookmark Post Feature On Blogger ,This Feature Created on JQuery, Javascript, HTML, CSS and Other.
When Our Website visitors are interested in any of our articles and haven't had time to read it,then the visitors can bookmark the particular post so that it is eaisly findalbe on particularpost to visit site. Bookmark widget uses localStorage, that means the bookmarked particular post will not be lost unless our visitor deletes the browser cookies or caches or clear data on Browser Like Chrome.
The bookmark feature working on ally type devices like desktop mobile,devices or tab, it is eye catching and cool look, it will help our website visitors to bookmark posts which the like on your website and visitors can read later without wasting time using this widget bookmark feature.
Lets Start Tutorial On How To Create Bookmark Post Feature On Blogger Without any Problem
before starting make sure you have backed up the template By chance, in case if mistake has been done you can restore it later!
How To Add Bookmark Post widget on blogger :-
Follow These StepsStep 1:- Go To Blogger.com
Step 2:- Login To Your Account
Step 3:- Now Click on Theme Option
Step 4:- And then click this button⏷ Near Customise
Step 5:- Now Click Edit HTML
Step 6:- Then Find
]]>< /b:skin>Step 7:-Paste it above the code
/* 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 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}
Step 8:-And Copy the given Jquery Code and Put it Above</head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Step 9:-You can Paste this code where you want bookmark open and close icon, 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>
Step 10:-then 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'><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>
Step 11:-And Now finally place the script below above the code</body>Or<!--</body>--></body>
<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>
Important note:-https://www.wendycode.com/search please change it with your blog url.
Step 12:-Finaly Click onSave HTML And Done
Conclusion:
So My Dear Freinds, In this post, I shared How To Add Bookmark Post widget on blogger. I hope this method of creating bookmark post widget in blogger can be very useful for you and your blog. Thank you for visiting our website.
Source:
wendycode