Trong bài viết này mình sẽ chia sẻ cách làm tiện ích đánh dấu bài viết trên blogger. Dấu trang thường được người đọc sử dụng để đánh dấu các trang đã được thích hoặc thích để đọc. Như chúng ta biết, bookmark là các tiện ích hiện diện trong một trình duyệt như Google Chrome, Coccoc, Internet Explorer và các ứng dụng trình duyệt khác để lưu trữ địa chỉ hoặc tên của một trang web và nhóm các địa chỉ URL theo chủ đề hoặc các chủ đề được chỉ định để người đọc không còn cần nhớ rằng URL bài viết trên trang web dài như vậy.
Để truy cập nhanh tính năng dấu trang trong trình duyệt, thường nhấn Ctr + D để thêm URL của trang web vào danh sách yêu thích có trong dấu trang.
Tính năng đánh dấu trang này,vozshare sử dụng hệ thống lưu trữ cục bộ 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 của người đọc như cookie (dữ liệu được lưu trữ trong trình duyệt) để thêm vào danh sách các bài viết yêu thích. Người dùng sẽ không bị mất khi làm mới hoặc chuyển trang trong miền.
Cách tạo tiện ích đánh dấu bài đăng trong Blogger
Bước 1: – Đăng nhập tài khoản Blogger của bạn.
Bước 2: – Bây giờ nhấp vào Menu Chủ đề > Chỉnh sửa Html.
Bước 3: – Sau đó sao chép mã Css bên dưới và đặt nó ở trên thẻ
//]]></b:skin>/* Bookmark Posts Css By Vozshare.Com */
.bookmark-icon-cont svg{vertical-align:middle;width:22px;height:22px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.bookmark-count{font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:#08102b;position:absolute;top:-5px;right:-2px;z-index:5}
.bookmark-body{padding:20px}
.bookmark-area{display:flex!important;width:100%;height:100%;position:fixed;top:0;left:0;background:rgb(0 0 0 / 52%);visibility:hidden;opacity:0;transition:all 0.8s ease-in-out;z-index:9999;overflow-y:scroll;backdrop-filter:blur(8px);user-select:none;-webkit-user-select:none;-ms-user-select:none}
.bookmark-area.open{opacity:1;visibility:visible}
.bookmark-area.open .bookmark-main{opacity:1;transform:scale(1);visibility:visible}
.bookmark-main{background:#fff;padding-bottom:15px;display:block;margin:auto;width:calc(100% - 20px);max-width:520px;visibility:hidden;opacity:0;overflow:hidden;transition:all 0.5s ease-in-out;transform:scale(.3);border-radius:6px;box-shadow:0 0 8px 0 rgba(0,0,0,.08)}
.bookmark-main h2{font-size:17px;font-weight:700;color:#08102b;float:left;border-bottom:2px solid #4a4a4a}
.bookmark-close-btn{cursor:pointer;float:right}
.bookmark-head-sec{padding:28px}
.bookmark-head-sec svg{width:20px;height:20px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}
.stm-bookmark-btn,.bookmark-empty-btn{display:inline-flex;align-items:center;margin:0;padding:10px 15px;outline:0;border:0;border-radius:6px;line-height:20px;color:#fefefe;background-color:#482dff;font-size:13px;font-family:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer;transition:all 0.3s ease}
.stm-bookmark-btn svg{width:18px;height:18px;fill:none!important;stroke:#fefefe;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px;margin-right:7px}
.bookmark-empty-center{text-align:center;justify-content:center;margin:8px}
.bookmark-empty-center p{font-size:15px;font-weight:600;text-align:center;color:#08102b;margin-bottom:25px}
.bookmark-empty-center svg{width:45px;height:45px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}
.bookmark-empty-btn svg{width:18px;height:18px;fill:none!important;stroke:#fefefe;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px;margin-right:7px}
.bookmark-table{width:100%;border:2px solid #f5f5f5;border-radius:6px;padding:9px;margin-bottom:8px}
.bookmark-table img{border-radius:6px;width:130px;height:60px;border:1px solid #f5f5f5;pointer-events:none}
.bookmark-table a{display:inline-flex;text-decoration:none;color:#08102b;font-size:13px;font-weight:600;margin-left:8px;line-height:20px}
.bookmark-btn-remove svg{width:18px;height:18px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}
.bookmark-btn-remove{cursor:pointer}
/* Dark Mode Css */
.drK .bookmark-icon-cont svg{stroke:#fffdfc}
.drK .bookmark-main{background:#1e1e1e}
.drK .bookmark-main h2{color:#e3e3e3;border-bottom:2px solid #4d4d4d}
.drK .bookmark-head-sec svg{stroke:#e3e3e3}
.drK .bookmark-empty-center p{color:#e3e3e3}
.drK .bookmark-empty-center svg{stroke:#e3e3e3}
.drK .stm-bookmark-btn,.drK .bookmark-empty-btn{color:#e3e3e3}
.drK .stm-bookmark-btn svg,.drK .bookmark-empty-btn svg{stroke:#e3e3e3}
.drK .bookmark-btn-remove svg{stroke:#e3e3e3}
.drK .bookmark-table img{border:none}
.drK .bookmark-table{border:2px solid #4d4d4d}
.drK .bookmark-table a{color:#e3e3e3}Bước 4: – Các bạn sao chép mã Jquery bên dưới và dán nó lên trên thẻ
</head><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>Bước 5: – Tiếp đến các bạn hãy sao chép mã JavaScript bên dưới và dán nó lên trên thẻ
</body><script src='https://cdn.jsdelivr.net/gh/vozshare/bookmark@main/bookmark-posts.js'/>
<script>/*<![CDATA[*/
/*-- Variable Empty Items --*/
var emptyMsg = ('Bookmark Article List Not Available');
var buttonTitle = ('View All Posts');
var buttonLink = ('https://www.vozshare.com/search');
/*-- Bookmark Title --*/
var bookmarkMsg = ('Bookmark Posts');
/*-- Svg Icons --*/
var closeIcon = ('<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>');
var bookmarkHeartIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M20.66,12.34l-7.95,8a1,1,0,0,1-1.42,0L3.34,12.34a4.59,4.59,0,0,1,0-6.49l.09-.08a4.59,4.59,0,0,1,5.73-.62l3.05,2,2.59-1.8a4.61,4.61,0,0,1,5.86.53h0A4.59,4.59,0,0,1,20.66,12.34Z"></path></g></svg>');
var removeIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="2" y1="6" x2="22" y2="6"></line><path d="M8,6V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path><line x1="9" y1="10" x2="9" y2="18"></line><line x1="15" y1="10" x2="15" y2="18"></line><path d="M20,6V20a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V6"></path></svg>');
var linkIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,13v7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4h7"></path><polyline points="16 2 22 2 22 8"></polyline><line x1="12" y1="12" x2="21.6" y2="2.4"></line></svg>');
/*]]>*/</script>Bạn có thể thay đổi https://www.vozshare.com/search thành url blog của bạn.
Bước 6: – Sao chép mã Html được đánh dấu bài viết bên dưới và đặt nó lên trên
<data:post.body/>.<b:if cond='data:view.isPost'><div style='text-align:center;'><button class='stm-bookmark-btn' data-quantity='1' expr:data-bookmarkimage='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 viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18.4,20.8,12,16,5.6,20.8A1,1,0,0,1,4,20V4A2,2,0,0,1,6,2H18a2,2,0,0,1,2,2V20A1,1,0,0,1,18.4,20.8Z'/><line x1='12' x2='12' y1='6' y2='12'/><line x1='15' x2='9' y1='9' y2='9'/></svg> Bookmark Post</button></div></b:if>
Bước 7: – Bạn có thể đặt biểu tượng bookmark (mở và đóng) này ở bất cứ đâu bạn muốn, ví dụ bạn có thể đặt ngay dưới phần tiêu đề.
<!--[ Bookmark button ]-->
<label class='bookmark-icon-cont stm-open-close'><svg 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'/></g></svg><span class='bookmark-count'/></label>Bước 8: – Cuối cùng, Click vào Save Theme và See The Result.
2 loại JavaScript deferred và Lazyload
Defer Jquery và Js
<script>/*<![CDATA[*/ function deferJqueryAtOnload(){var d=document.createElement("script");d.src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",deferJqueryAtOnload,!1):window.attachEvent?window.attachEvent("onload",deferJqueryAtOnload):window.onload=deferJqueryAtOnload; /*]]>*/</script>
<script>/*<![CDATA[*/ function deferBookmarkPosts(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/vozshare/bookmark@main/bookmark-posts.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",deferBookmarkPosts,!1):window.attachEvent?window.attachEvent("onload",deferBookmarkPosts):window.onload=deferBookmarkPosts; /*]]>*/</script>
<script>/*<![CDATA[*/
/*-- Variable Empty Items --*/
var emptyMsg = ('Bookmark Article List Not Available');
var buttonTitle = ('View All Posts');
var buttonLink = ('https://www.vozshare.com/search');
/*-- Bookmark Title --*/
var bookmarkMsg = ('Bookmark Posts');
/*-- Svg Icons --*/
var closeIcon = ('<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>');
var bookmarkHeartIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M20.66,12.34l-7.95,8a1,1,0,0,1-1.42,0L3.34,12.34a4.59,4.59,0,0,1,0-6.49l.09-.08a4.59,4.59,0,0,1,5.73-.62l3.05,2,2.59-1.8a4.61,4.61,0,0,1,5.86.53h0A4.59,4.59,0,0,1,20.66,12.34Z"></path></g></svg>');
var removeIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="2" y1="6" x2="22" y2="6"></line><path d="M8,6V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path><line x1="9" y1="10" x2="9" y2="18"></line><line x1="15" y1="10" x2="15" y2="18"></line><path d="M20,6V20a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V6"></path></svg>');
var linkIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,13v7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4h7"></path><polyline points="16 2 22 2 22 8"></polyline><line x1="12" y1="12" x2="21.6" y2="2.4"></line></svg>');
/*]]>*/</script>Lazyload Jquery và Js
<script>/*<![CDATA[*/ var lazyJquery=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyJquery||0!=document.body.scrollTop&&!1===lazyJquery)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyJquery=!0)},!0); /*]]>*/</script>
<script>/*<![CDATA[*/ var bookmarkLazy=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===bookmarkLazy||0!=document.body.scrollTop&&!1===bookmarkLazy)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/vozshare/bookmark@main/bookmark-posts.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),bookmarkLazy=!0)},!0); /*]]>*/</script><script>/*<![CDATA[*/
/*-- Variable Empty Items --*/
var emptyMsg = ('Bookmark Article List Not Available');
var buttonTitle = ('View All Posts');
var buttonLink = ('https://www.vozshare.com/search');
/*-- Bookmark Title --*/
var bookmarkMsg = ('Bookmark Posts');
/*-- Svg Icons --*/
var closeIcon = ('<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>');
var bookmarkHeartIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M20.66,12.34l-7.95,8a1,1,0,0,1-1.42,0L3.34,12.34a4.59,4.59,0,0,1,0-6.49l.09-.08a4.59,4.59,0,0,1,5.73-.62l3.05,2,2.59-1.8a4.61,4.61,0,0,1,5.86.53h0A4.59,4.59,0,0,1,20.66,12.34Z"></path></g></svg>');
var removeIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="2" y1="6" x2="22" y2="6"></line><path d="M8,6V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path><line x1="9" y1="10" x2="9" y2="18"></line><line x1="15" y1="10" x2="15" y2="18"></line><path d="M20,6V20a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V6"></path></svg>');
var linkIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,13v7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4h7"></path><polyline points="16 2 22 2 22 8"></polyline><line x1="12" y1="12" x2="21.6" y2="2.4"></line></svg>');
/*]]>*/</script>Hướng dẫn thêm tiện ích đánh dấu bài đăng trong template blogspot media UI v1.6?
Bây giờ mình sẽ chia sẻ cách cài đặt widget này trong Median UI Blogger Template. Trong widget này, mình đã tạo ba loại JavaScript bao gồm – default, lazy load and deferred. Bạn có thể sử dụng bất kỳ cái nào trong số này.
Theo như mình thì các bạn tốt hơn nên sử dụng Lazy Loaded JS để đạt được hiệu qua tốt nhất.
Bước 1: – Đăng nhập tài khoản Blogger của bạn.
Bước 2: – Nhấp vào Menu Chủ đề> Chỉnh sửa Html.
Bước 3: – Sau đó sao chép mã Css bên dưới và đặt nó ở trên
//]]></b:skin>/* Bookmark Posts Css By www.vozshare.com */
.bookmark-icon-cont svg{vertical-align:middle;width:22px;height:22px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.bookmark-count{font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:#08102b;position:absolute;top:-5px;right:-2px;z-index:5}
.bookmark-body{padding:20px}
.bookmark-area{display:flex!important;width:100%;height:100%;position:fixed;top:0;left:0;background:rgb(0 0 0 / 52%);visibility:hidden;opacity:0;transition:all 0.8s ease-in-out;z-index:9999;overflow-y:scroll;backdrop-filter:blur(8px);user-select:none;-webkit-user-select:none;-ms-user-select:none}
.bookmark-area.open{opacity:1;visibility:visible}
.bookmark-area.open .bookmark-main{opacity:1;transform:scale(1);visibility:visible}
.bookmark-main{background:#fff;padding-bottom:15px;display:block;margin:auto;width:calc(100% - 20px);max-width:520px;visibility:hidden;opacity:0;overflow:hidden;transition:all 0.5s ease-in-out;transform:scale(.3);border-radius:6px;box-shadow:0 0 8px 0 rgba(0,0,0,.08)}
.bookmark-main h2{font-size:17px;font-weight:700;color:#08102b;float:left;border-bottom:2px solid #4a4a4a}
.bookmark-close-btn{cursor:pointer;float:right}
.bookmark-head-sec{padding:28px}
.bookmark-head-sec svg{width:20px;height:20px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}
.stm-bookmark-btn,.bookmark-empty-btn{display:inline-flex;align-items:center;margin:0;padding:10px 15px;outline:0;border:0;border-radius:6px;line-height:20px;color:#fefefe;background-color:#482dff;font-size:13px;font-family:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer;transition:all 0.3s ease}
.stm-bookmark-btn svg{width:18px;height:18px;fill:none!important;stroke:#fefefe;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px;margin-right:7px}
.bookmark-empty-center{text-align:center;justify-content:center;margin:8px}
.bookmark-empty-center p{font-size:15px;font-weight:600;text-align:center;color:#08102b;margin-bottom:25px}
.bookmark-empty-center svg{width:45px;height:45px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}
.bookmark-empty-btn svg{width:18px;height:18px;fill:none!important;stroke:#fefefe;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px;margin-right:7px}
.bookmark-table{width:100%;border:2px solid #f5f5f5;border-radius:6px;padding:9px;margin-bottom:8px}
.bookmark-table img{border-radius:6px;width:130px;height:60px;border:1px solid #f5f5f5;pointer-events:none}
.bookmark-table a{display:inline-flex;text-decoration:none;color:#08102b;font-size:13px;font-weight:600;margin-left:8px;line-height:20px}
.bookmark-btn-remove svg{width:18px;height:18px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}
.bookmark-btn-remove{cursor:pointer}
/* Dark Mode Css */
.drK .bookmark-icon-cont svg{stroke:#fffdfc}
.drK .bookmark-main{background:#1e1e1e}
.drK .bookmark-main h2{color:#e3e3e3;border-bottom:2px solid #4d4d4d}
.drK .bookmark-head-sec svg{stroke:#e3e3e3}
.drK .bookmark-empty-center p{color:#e3e3e3}
.drK .bookmark-empty-center svg{stroke:#e3e3e3}
.drK .stm-bookmark-btn,.drK .bookmark-empty-btn{color:#e3e3e3}
.drK .stm-bookmark-btn svg,.drK .bookmark-empty-btn svg{stroke:#e3e3e3}
.drK .bookmark-btn-remove svg{stroke:#e3e3e3}
.drK .bookmark-table img{border:none}
.drK .bookmark-table{border:2px solid #4d4d4d}
.drK .bookmark-table a{color:#e3e3e3}Bước 4: – Sau đó sao chép mã Lazyload Jquery bên dưới và đặt nó lên trên
</head><script>/*<![CDATA[*/ var lazyJquery=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyJquery||0!=document.body.scrollTop&&!1===lazyJquery)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyJquery=!0)},!0); /*]]>*/</script>Bước 5: – Sau khi sao chép mã JavaScript bên dưới và dán nó lên trên
</body><script>/*<![CDATA[*/ var bookmarkLazy=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===bookmarkLazy||0!=document.body.scrollTop&&!1===bookmarkLazy)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/vozshare/bookmark@main/bookmark-posts.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),bookmarkLazy=!0)},!0); /*]]>*/</script>
<script>/*<![CDATA[*/
/*-- Variable Empty Items --*/
var emptyMsg = ('Bookmark Article List Not Available');
var buttonTitle = ('View All Posts');
var buttonLink = ('https://www.vozshare.com/search');
/*-- Bookmark Title --*/
var bookmarkMsg = ('Bookmark Posts');
/*-- Svg Icons --*/
var closeIcon = ('<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>');
var bookmarkHeartIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M20.66,12.34l-7.95,8a1,1,0,0,1-1.42,0L3.34,12.34a4.59,4.59,0,0,1,0-6.49l.09-.08a4.59,4.59,0,0,1,5.73-.62l3.05,2,2.59-1.8a4.61,4.61,0,0,1,5.86.53h0A4.59,4.59,0,0,1,20.66,12.34Z"></path></g></svg>');
var removeIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="2" y1="6" x2="22" y2="6"></line><path d="M8,6V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path><line x1="9" y1="10" x2="9" y2="18"></line><line x1="15" y1="10" x2="15" y2="18"></line><path d="M20,6V20a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V6"></path></svg>');
var linkIcon = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,13v7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4h7"></path><polyline points="16 2 22 2 22 8"></polyline><line x1="12" y1="12" x2="21.6" y2="2.4"></line></svg>');
/*]]>*/</script>Bạn có thể thay đổi https://www.vozshare.com/search thành url blog của bạn.
Bước 6: – Sau đó sao chép mã Html bên dưới và dán nó lên trên
<data:post.body/><b:if cond='data:view.isPost'><div style='text-align:center;'><button class='stm-bookmark-btn' data-quantity='1' expr:data-bookmarkimage='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 viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18.4,20.8,12,16,5.6,20.8A1,1,0,0,1,4,20V4A2,2,0,0,1,6,2H18a2,2,0,0,1,2,2V20A1,1,0,0,1,18.4,20.8Z'/><line x1='12' x2='12' y1='6' y2='12'/><line x1='15' x2='9' y1='9' y2='9'/></svg> Bookmark Post</button></div></b:if>
Bước 7: – Sau đó tìm Id tiện ích TextList000 và dán mã Html bên dưới.
<!--[ Bookmark button ]-->
<li>
<label aria-label='Bookmark' class='bookmark-icon-cont stm-open-close tIc bIc'>
<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>
</label><span class='bookmark-count'></span>
</li>
Bước 8: – Cuối cùng, Click vào Save Theme và See The Result.
Kết luận
Trên đây vozshare đã chia sẻ với các bạn cách để tạo tiện ích đánh dấu bài đăng trong blogger với bộ nhớ cục bộ mà bạn có thể sử dụng trong trang web blogger của mình. Hy vọng nó sẽ hữu ích với bạn. Chúc các bạn thành công !
Bài viết thuộc www.vozshare.com
Anh ơi hướng dẫn tạo trang chuyển hướng giống của a dc không ak nhìn đẹp lắm lun