How to Make Bookmark Posts Widget in Blogger ?

In this post I will share how to make bookmark post widget on blogger. Bookmarks are commonly used by readers to mark sites that have been liked or liked for reading. As we know bookmarks are facilities present in a browser such as Google Chrome, Mozilla, Internet Explorer, Opera and other browser applications to store the address or name of a website and group URL addresses according to the specified theme or themes so that The reader no longer needs to remember that the website article URL is so long.

To quickly access the bookmarks feature in a browser, usually press Ctr+D to add the website URL to the favorites list contained in the bookmark.

On this occasion I will share a tutorial which may be very much liked by people, especially blogger template designers and cloners. I thought of creating this feature because I saw many blogger templates that are circulating everywhere they use a bookmark icon in each of their entries, but the icon is not a bookmark button but a direct link to the article . Leads and it's a pretend icon gimmick like a bookmark button.

In order to realize the gimmick so that it becomes a real bookmark button, please follow the steps below carefully so that no errors or errors occur during installation.

Like the title of the above post on this bookmark feature, I use the local storage system as a user activity store where this system can store reader data such as cookies (data stored in the browser) to add a list of favorite articles. Will not be lost by the user when refreshing or switching pages in a domain.

View Demo

---

How to Make Bookmark Posts Widget in Blogger :-

Step 1 :- First Login & Open Your Blogger Account.

Step 2 :- Now Click on Theme Menu > Edit Html.

Step 3 :- Then Copy The Given Css Code and Put it Above The //]]></b:skin>.

/* Bookmark Posts Css By SmartTechMukesh.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}

Step 4 :- Then Copy the given Jquery Code and Put it Above </head>.

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

Step 5 :- After Copy the given Main JavaScript Code and Put it Above </body>.

<script src='https://cdn.jsdelivr.net/gh/smarttechmukesh/scripts@main/bookmark/bookmark-posts-v1.1.js'/>
<script>/*<![CDATA[*/ 
/*-- Variable Empty Items --*/
var emptyMsg = ('Bookmark Article List Not Available');
var buttonTitle = ('View All Posts');
var buttonLink = ('https://www.smarttechmukesh.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>

You can change all the marked part according to your need.

Step 6 :- Then Copy the given Bookmark Posts Adding Button Html code and Put it Above <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, &quot;16:9&quot;)' 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>

Step 7 :- You can place this bookmark (open and close) icon wherever you want, for example you can place it right above the header.

<!--[ 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>

Step 8 :- Finally, Click on Save Theme and See The Result.

---

Defer Jquery and Main Js For Bookmark Posts :-

<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/smarttechmukesh/scripts@main/bookmark/bookmark-posts-v1.1.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.smarttechmukesh.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 and Main Js For Bookmark Posts :-

<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/smarttechmukesh/scripts@main/bookmark/bookmark-posts-v1.1.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.smarttechmukesh.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>

---

How to Add Bookmark Posts Widget in Median UI v1.6 ?

Specially i made this bookmark post widget only for median ui blogger template user. But we have shared its method above for other blogger users as well. Now I will share how to install this widget in Median UI Blogger Template. In this widget we have created three types of JavaScript which include – default, lazy load and deferred. You can use any of these, but we think it's better to use Lazy Loaded JS.

Step 1 :- First Login & Open Your Blogger Account.

Step 2 :- Now Click on Theme Menu > Edit Html.

Step 3 :- Then Copy The Given Css Code and Put it Above The //]]></b:skin>.

/* Bookmark Posts Css By SmartTechMukesh.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}

Step 4 :- Then Copy the given Lazyload Jquery Code and Put it Above </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>

Step 5 :- After Copy the given Main JavaScript Code and Put it Above </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/smarttechmukesh/scripts@main/bookmark/bookmark-posts-v1.1.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.smarttechmukesh.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>

You can change all the marked part according to your need.

Step 6 :- Then Copy the given Bookmark Posts Adding Button Html code and Put it Above <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, &quot;16:9&quot;)' 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>

Step 7 :- Then Find The TextList000 Widget Id and Paste The Given Html Code For Example Like Image.

<!--[ 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>

Step 8 :- Finally, Click on Save Theme and See The Result.

---

Conclusion :-

This is an easy way to create a bookmark post widget in blogger with local storage that you can use in your blogger website or any web design project.

In this post, I shared how to make bookmark post widget in blogger with local storage. I hope this method of creating bookmark post widget in blogger with local storage can be very useful for you and your blog. Thank you for visiting our website.

Reference:
smarttechmukesh.com