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.

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

Để 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

Đánh giá của bạn về bài viết này?

Trường

Chia sẻ những gì mình biết là cách ý nghĩa nhất để lưu lại giá trị của đời mình cho cộng đồng. Cho đi là cách nhận lại thông minh nhất. facebook flickr share

Nếu bổ ích hãy mời mình 1 ly nước mía 5k qua MoMo nhé: 085.45.74.559

5
Nhận xét

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn (Tích vào ô Thông báo cho tôi).
➥ Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang Upload Image, sau đó sao chép link ảnh dán vào khung bình luận.
➥ Không spam trong khung bình luận, hạn chế viết tắt. Xem quy định bình luận tại đây.

  1. Đại Lê28 tháng 8

    hay thế, làm blog truyện thì quá ngon lành rùi

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bác, ghé thăm blog mình chơi thường xuyên nhé!

      Xóa
  2. Thành Đạt28 tháng 8

    Chất vậy bác, cảm ơn bác chia sẻ

    Trả lờiXóa
    Trả lời
    1. Mình thấy tiện ích này hồi trước cũng có nhiều mẫu truyện hỗ trợ lắm, mà hồi đó không biết lấy code ra như nào ấy :D

      Xóa
  3. Bác có tenp blog truyện nào không ạ ?

    Trả lờiXóa