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.
How to Make Bookmark Posts Widget in Blogger :-
//]]></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}
</head>
.<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
</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.
<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>
<!--[ 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>
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.
//]]></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}
</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>
</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.
<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>
<!--[ 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>
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
You imazing thanx man
ReplyDeleteThanks man 🙏
DeleteCode copy nhi ho rha.
ReplyDeletenice Cevta
ReplyDeleteHello bro, may I use in my blog without any copyright issues?
ReplyDeletePlease reply 🤫
ReplyDeleteyes it is intended to be used copyright free unless you copy their whole post
DeleteName: Phạm Văn Linh
ReplyDeleteLink: https://phamvanlinhblog.blogspot.com/
Title: Blog Chia Sẻ Thủ Thuật Blogspot, Facebook, Code...
Name: Xuan Trung Pro
ReplyDeleteLink: https://xuantrungpro.blogspot.com/
Title: Xuan Trung Pro - Thủ Thuật Đa Nền Tảng
How to Change Bookmark button According to our choice like this one
ReplyDeletehttps://uiverse.io/detail/nikk7007/blue-mayfly-40 (Instead of button change it to bookmarks)
Is it possible??
Nofollow links should be used when you don't want to pass on ranking power or link juice to the linked website. The nofollow tag stops the credit from being transferred to other websites connected to your site.
ReplyDeletehttps://tipsfcworld.blogspot.com/2023/02/meaning-of-noindex-nofollow-noopener-noarchive-nosnippet-noodp-dofollow-in-Blogger.html
Nofollow links should be used when you don't want to pass on ranking power or link juice to the linked website. The nofollow tag stops the credit from being transferred to other websites connected to your site.other websites connected to your site.
ReplyDelete