Hello Everyone! Welcome Back to TechiFeed. I have written a new informative post for you to read. So, Keep reading to find out more!
Nowadays, you may have noticed many Blogger websites with bookmark features, and you may be wondering how to add a bookmark feature to your Blogger website.
Therefore we created a guide to teach you how to add a bookmark feature in Blogger.
Bookmark Posts Widget
The bookmark function works flawlessly on both desktop and mobile platforms, have an excellent style, and will allow your website users to save your content so that they may read them later without wasting time.
Advantages of Using Boomark Widget
If a visitor is interested in one of our posts but does not have time to read it, they may save the page so they can easily reaccess it later.
Because this widget already uses local Storage, the saved article will not delete unless the visitor deletes their browser cookie.
Do you want to include a bookmarking option on your Blogger site?
Let's look at how to add a bookmark function to your Blogger page!
I recommend you back up your template if you make a mistake and need to restore it later!
How to Create a Blogger Bookmark Posts Widget?
Step 1: First, log in and create a Blogger account.
Step 2: Go to the Theme Menu and choose Edit HTML.
Step 3: Copy the CSS code provided and paste it above the ]]></b:skin>.
/* Bookmark Posts Css By techifeed.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: Copy the Jquery code and paste it above </head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Step 5: Copy the Main JavaScript Code and paste it above </body>.
<script src='https://cdn.jsdelivr.net/gh/smarttechmukesh/[email protected]/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.Your-Site-Link.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-2h3a2,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,2h3a2,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 replace all significant parts to suit your needs.
Step 6: Paste the supplied Bookmark Posts Adding Button Html code 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, "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>
Step 7: You may put this bookmark (open and shut) icon anywhere you wish, for example, directly 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 Save Theme to view the results.
For Bookmark Posts, Defer Jquery and Main 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/smarttechmukesh/[email protected]/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.Your-Site-Link.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-2h3a2,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,2h3a2,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 replace all significant parts to suit your needs.
For Bookmark Posts, Lazyload Jquery and Main 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/smarttechmukesh/[email protected]/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.yourwebsite.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-2h3a2,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,2h3a2,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 replace all significant parts to suit your needs.
How to Install the Bookmark Posts Button in Median UI v1.6?
It will create this bookmark post widget for users of the median UI blogger template. However, we have shared this approach with other blogger users above.
Now I'll show you how to add this widget to the Median UI Blogger Template. We built three sorts of JavaScript in this widget: default, lazy load, and delayed.
You can utilize any of them. However, Lazy Loaded JS is the best option.
Step 1: First, log in and create a Blogger account.
Step 1: First, log in and create a Blogger account.
Step 2: Go to the Theme Menu and choose Edit HTML.
Step 3: Copy the CSS code provided and paste it above the /]]></b:skin>.
/* Bookmark Posts Css By techifeed.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: Copy the provided Lazyload Jquery code and paste 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: Copy the Main JavaScript Code and paste 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/[email protected]/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.yourwebsite.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-2h3a2,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,2h3a2,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 replace all significant parts to suit your needs.
Step 6: Paste the supplied Bookmark Posts Adding Button Html code 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, "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>
Step 7: Next, locate the TextList000 Widget Id and paste the provided HTML code.
<!--[ 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 Save Theme to view the results.
Video Tutorial
Frequently Asked Questions
What is the Bookmark Posts Widget in Blogger?
The Bookmark Posts Widget in Blogger is a feature that allows users to save and organize their favorite posts from a blog for easy access.
Can I customize the appearance of the Bookmark Posts Widget?
Yes, you can customize the appearance of the Bookmark Posts Widget by adjusting the settings in the widget's configuration menu. You can change the title, the number of posts displayed, and the widget's layout.
How do I remove a post from my Bookmarked Posts list?
To remove a post from your Bookmarked Posts list, go to the post and click on the "Remove" button located next to the "Bookmark" button.
Stay Connected
I hope you liked the above informative content. Please share this post and follow our blog for more great content.
If you have any questions or problems, feel free to ask in the comments section.
© Copyright: TechiFeed
