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
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
- First Go To Blogger.Com.
- Open your blogger dashboard.
- Next, Click on the "Theme" Section and Click Edit Html Option
- Make sure your template is already installed jQuery if it does not already exist, Follow the below Steps
- After that, Find </head> Tag on Theme
- Copy the below JQuery Script Code and paste it above</head> Tag.
- Now Again, Find ]]></b:skin> Tag on Theme
- Copy the below CSS Code and paste it above on ]]></b:skin> Tag.
- This is BookMark Icon open-close button, you can put where you want for example just above the </header> Tag.
- 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/>
- After You have Found Paste it before <data:post.body/>
- Now finally put the Java Script below above the code </body> or <!--</body>--></body> Tag.
- Now Don't forget to click on save.
- That't All For Now.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
/* 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.
<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>
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.
<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>
<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.
Final Words
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