Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Proper Working Bookmark Feature Script on blogger. This is the Right Place to you. Since You can get this Script for free.

Today, in this article, I will Discuss with you about How to Add a Proper Working Bookmark Feature in Blogger.

Bookmark Feature

Bookmark feature in Blogger is a widget where you can add your favorites posts to easily read. The bookmark feature will working on both desktop and mobile devices, This has an very beautiful and cool look, your Daily website visitors to bookmark your posts on your website and visitors can read infuture without his wasting time using By bookmark feature On Website.

When Our Website visitors are interested in any of our articles and haven't had time to read it,then the visitors can bookmark the particular post so that it is eaisly findalbe on particularpost to visit site. Bookmark widget uses localStorage, that means the bookmarked particular post will not be lost unless our visitor deletes the browser cookies or caches or clear data on Browser Like Chrome.

The bookmark feature working on all type devices like desktop mobile,devices or tab, it is eye catching and cool look, it will help our website visitors to bookmark posts which the like on your website and visitors can read later without wasting time using this widget bookmark feature.

How to Add

So, to add Bookmark Feature on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily add this feature in your blogger website.

Step 1

• You will go to your - Blogger Dashboard
• Go to Theme
• Go to - Edit HTML
• Search - </head> or &lt;/head&gt;
• Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;

<style>
.bmPs.a>svg .i1,.bmPs svg .i2{display:none}.bmPs.a>svg .i2{display:inline-flex}.bmPs svg{width:16px;height:16px}.del,.tBkmt:before,.wBkm{background:#fff}.bkmC .itmTtl a,.bkmC .n>svg{color:#000}.tBkmt:before,.wBkm{right:0}.bkmC .thmb,.bkmC>.n{text-align:center}.bkmC .pThmb .bkmImg,.bkmI:checked~.wBkm,.bmPs.a>svg .d,.cBkPs,.del svg{display:block;transition:.2s}.tBkmt.n:before,.wBkm{display:none}.tBkmt:before{content:attr(bm-count);position:absolute;top:-7px;font-size:14px;border-radius:50%}.bkmC .item,.del,.wBkm{border-radius:5px}.del svg{width:16px;height:16px}.wBkm{position:fixed;top:0;left:0;bottom:0;width:350px;height:595px;margin:auto;box-shadow:0 0 5px #000;overflow-y:auto;z-index:15}.fullClose{visibility:hidden;display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;background:0 0;opacity:0}.bkmI:checked~.fullClose{visibility:visible;background:#222;opacity:.9;z-index:12}.bkmH{display:flex;justify-content:space-between;padding:20px;border-bottom:1px dashed #000;margin-bottom:10px}.fixH .c:after{content:'\2715';font-size:14px}.fixT:before{content:attr(data-text);display:flex;font-size:15px;opacity:.7}.fixT .c::before{content:attr(aria-label);font-size:12px;margin:0 10px;opacity:.7}.bkmC .n{justify-content:center;margin-top:75px}.bkmC .n>svg{height:30px;width:30px}.bkmC .n>a{font-size:90%;padding:10px 20px}.bkmC .item{position:relative;box-shadow:0 0 3px inset #000;padding:12px;display:flex;margin:50px 20px 30px}.bkmC .item a,.bkmC .itmTtl{display:block;width:100%}.bkmC .item:not(:last-child){margin-bottom:15px}.bkmC .pThmb .bkmImg{width:85px;height:85px;display:flex;flex-shrink:0;align-items:center;justify-content:center;background:transparent;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:5px;margin-right:15px}.bkmC .pThmb:hover .bkmImg{transform:scale(1.04)}.bkmC .itmTtl{line-height:1.5;margin-top:15px}.bkmC .item a:hover{color:#0000ff}.del{top:-20px;box-shadow:0 0 3px var(--shadow3);position:absolute;right:12px;padding:12px}.del:hover{box-shadow:0 0 5px #0000ff}.bkmC .item.d{animation:1s forwards delBkm;overflow:hidden}.Aa span{position:fixed;left:25px;bottom:-150px;display:inline-flex;justify-content:center;margin-bottom:75px;z-index:99999;background:#fff;color:#000;box-shadow:0 0 5px #000;border-radius:5px;padding:16px 25px;opacity:0;animation:2.3s forwards slideup}@media screen and (max-width:480px){.Aa span{margin-bottom:75px;left:25px;right:25px}}@keyframes delBkm{0%{opacity:1}50%{opacity:.5;left:0}100%{opacity:0;left:500px}}@keyframes slideup{0%{opacity:0}20%,50%,80%{opacity:1;bottom:0}100%{opacity:0;bottom:-150px;visibility:hidden}}
</style>

Step 2

• After Paste CSS Code
• Search - </body> or &lt;/body&gt;
• Copy this Javascript below and Paste on top of - </body> or &lt;/body&gt;

<script>/*<![CDATA[*/
var TS={
bookmark:{
bmTitle:"Your Bookmarks",
closeText:"Close",
noBmIcon:"<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.650100, 2.749900)'><path d='M16.51,5.55 L10.84,0.15 C10.11,0.05 9.29,0 8.39,0 C2.1,0 -1.95399252e-14,2.32 -1.95399252e-14,9.25 C-1.95399252e-14,16.19 2.1,18.5 8.39,18.5 C14.69,18.5 16.79,16.19 16.79,9.25 C16.79,7.83 16.7,6.6 16.51,5.55 Z'/><path d='M10.2839,0.0827 L10.2839,2.7437 C10.2839,4.6017 11.7899,6.1067 13.6479,6.1067 L16.5989,6.1067'/><line class='svgC' x1='10.6623' y1='10.2306' x2='5.7623' y2='10.2306'/><line class='svgC' x1='8.2131' y1='12.6808' x2='8.2131' y2='7.7808'/></g></svg>",
noBmMes:"No Bookmarks Here!...",
noBmAll:"View All",
noBmLink:"/search",
delIcon:"<svg viewBox='0 0 2048 2048'><path fill='currentColor' d='M1792 384h-128v1472q0 40-15 75t-41 61t-61 41t-75 15H448q-40 0-75-15t-61-41t-41-61t-15-75V384H128V256h512V128q0-27 10-50t27-40t41-28t50-10h384q27 0 50 10t40 27t28 41t10 50v128h512v128zM768 256h384V128H768v128zm768 128H384v1472q0 26 19 45t45 19h1024q26 0 45-19t19-45V384zM768 1664H640V640h128v1024zm256 0H896V640h128v1024zm256 0h-128V640h128v1024z'/></svg>",
addedNtf:"Added to Bookmarks!",
removedNtf:"Removed from Bookmarks!",
sLS:function(t,n){localStorage.setItem(t,n)},
gLS:function(t){return localStorage.getItem(t)},
rLS:function(t){localStorage.removeItem(t)}}};
function qS(e){return document.querySelector(e)}
function qSA(e){return document.querySelectorAll(e)}
function gId(e){return document.getElementById(e)};
function aE(e,t,n){return e.addEventListener(t,n)}
function techlyseriesBookmark(){let e=document.createElement("script");e.setAttribute("crossorigin","anonymous"),e.async=!0,e.src="https://cdn.jsdelivr.net/gh/tspuku/tsP/techlyseriesBookmark.js",document.body.appendChild(e)}var lazyLoad=!1;aE(window,"scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyLoad||0!=document.body.scrollTop&&!1===lazyLoad)&&(null==gLS("Lz_Js")&&(techlyseriesBookmark(),sLS("Lz_Js",1)),lazyLoad=!0)},!0),aE(document.body,"click",s=>{null==gLS("Lz_Js")&&(techlyseriesBookmark(),sLS("Lz_Js",1))}),gLS("Lz_Js")&&techlyseriesBookmark();
/*]]>*/</script>

Step 3

• After Paste Javascript
• Copy this HTML Code bellow and Paste before header tag

<div id='Bookmark_Widget'></div>

Step 4

• After Paste HTML
• Copy this HTML code bellow and paste where you want to show Bookmark List Button for open Bookmark Widget

<div class='hBook'><label aria-label='Bookmark List' class='tBkmt n' for='offBkm'><svg viewBox='0 0 24 24'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M9 16v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6l-1.89-1.26a2 2 0 0 0-2.22 0L9 16Z'/><path d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Z'/></g></svg></label></div>

Step 5

• After Paste HTML
• Copy this last & final HTML code bellow and paste carefully where you want to show Bookmark Button for Bookmark Post
• Save Theme.

<label aria-label='Add to Bookmark' class='bmPs' expr:bm-id='data:post.id' expr:bm-img='resizeImage(data:post.featuredImage,240,&quot;1:1&quot;)' expr:bm-title='data:post.title' expr:bm-url='data:post.url' role='button'><svg viewBox='0 0 16 16'><g fill='currentColor'><path class='i1' d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z'/><path class='i1' d='M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4z'/><path class='i2' d='M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zM6 6a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1H6z' fill='currentColor' fill-rule='evenodd'/></g></svg></label>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.