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

Dấu trang thường được người đọc sử dụng để đánh dấu các trang web mà họ thích hoặc được ưu tiên đọc. Như chúng ta biết, dấu trang là các phương tiện tồn tại trong một trình duyệt như Google Chrome, Mozilla, Internet Explorer, Opera và các ứng dụng trình duyệt khác để lưu địa chỉ hoặc tên của một trang web và nhóm các địa chỉ url theo chủ đề hoặc chủ đề được chỉ định để người đọc không lâu hơn cần phải ghi nhớ vì url của trang web quá dài.

Để sử dụng tiện ích dấu trang nhanh chóng trong trình duyệt, thường nhấn Ctr + D để thêm url trang web vào danh sách yêu thích có trong dấu trang.{alertInfo}

Trong bài viết này mình sẽ hướng dẫn các bạn mang tiện ích dấu trang vào chính trực tiếp website của bạn, điều này sẽ giúp bạn đọc có thể lưu lại bài viết và đọc chúng sau đó.

Giải thích một chút về tính năng đánh dấu trang này, sử dụng hệ thống localStorage như một kho lưu trữ hoạt động của người dùng, nơi hệ thống này có thể lưu trữ dữ liệu người đọc như Coockies (dữ liệu được lưu trữ trong trình duyệt) để danh sách các bài viết yêu thích được thêm vào của người dùng sẽ không bị mất ngay cả khi được làm mới hoặc chuyển trang trong một tên miền.{alertSuccess}

Hướng dẫn tạo nút đánh dấu bài viết yêu thích

Bước đầu tiên, mở Blogger -> Nhấp vào menu Chủ đề -> Chỉnh sửa HTML, sau đó làm theo các bước bên dưới.

Vì tính năng đánh dấu trang này bằng jQuery, nên tôi đảm bảo rằng bạn đã cài đặt mã jQuery bên dưới ngay phía trên mã </head> hoặc </body>{alertWarning}

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

Bước tiếp theo là sao chép mã Css bên dưới rồi đặt nó lên trên mã ]]></ b: skin> hoặc </style>

.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}

.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}

.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}

.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:#fff;background-color:#f90;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-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}{codeBox}

Tìm mã </body> rồi dán mã javascript bên dưới lên trên.

<script>

//<![CDATA[

/*

* jQuery library

*/

// variable empty konten

var massgEmpty = ('Danh sách bài viết yêu thích không có sẵn'),

articleLabel = ('Tất cả nội dung'),

link_articleLabel = ('https://www.truongblogger.top');

(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"><a class="close-btn buka-tutup">X</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="60px" height="60px" src="' + this.borkimage + '"/></td>' +

'<td class="item-left"><a href="' + this.link + '" class="btn-remove">' + this.title + '</a></td>' +

'<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>' +

'</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);

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>{codeBox}

Tiếp theo, sao chép mã HTML bên dưới một cách tự do ở bất kỳ đâu, nhưng để đẹp bạn có thể thêm vào phần Menu của blog.

<div class="alert-warning">
<div style="float: right; cursor: pointer;">
<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>{codeBox}

Bước cuối cùng trong hướng dẫn này là đặt một nút để thêm danh sách vào Bookmark, thực ra đoạn mã bên dưới có thể tự do đặt ở bất cứ đâu như mục đăng bài hoặc bài viết phổ biến, vị trí của mã HTML này trong tất cả các mẫu không giống nhau tùy thuộc vào cấu trúc của việc viết mã HTML.

Nhưng hãy đảm bảo mã HTML bên dưới phải nằm trong mã post-content, trong đó mã này nằm trong phần tử <article, để có thể đọc chính xác ID bài đăng, tiêu đề bài đăng và dữ liệu hình ảnh.{alertError}

<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;)'>Bookmark <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>{codeBox}

Lưu mẫu lại và kiểm tra kết quả!

Code: Hartomy