Brief Discuss
Hiya all on this occasion I’ll portion a Tutorial On The categorical technique to kind a Bookmark widget In Blogger Utilizing jQuery Admire On This Weblog. This bookmark widget will doubtlessly be invaluable for our weblog guests, This Widget shall be expedient if the articles on our weblog are reasonably barely.
Benefits of the usage of Boomark Widget

So when guests are attracted to 1 in every of our articles and fetch no longer had time to learn it then guests can bookmark the article so that later it’s no longer provocative to accumulate them that post every other time.
This widget already makes employ of native Storage which manner that the bookmarked article will no longer go except the client deletes their browser cookie.
For the demo chances are you’ll well are trying to click on the bookmark icon that is in one in every of the articles on this weblog precisely at the tip of this Submit & bookmarked article shall be considered via the Bookmarked Icon on the Top of the Header in the Correct Nook i.e blinking.
sooner than you delivery up fetch sure you fetch backed up the template fair in case one thing occurs that you construct no longer desire.
The categorical technique to kind a Bookmark widget in Blogger
- First Dart To Blogger.Com.
- Initiating your blogger dashboard.
- Subsequent, Click on on the “Theme” Half and Click on Edit Html Choice
- Make sure your template is already installed jQuery if it does no longer already exist, Be aware the below Steps
- After that, In discovering
Brand on Theme - Duplicate the below JQuery Script Code and paste it above
Brand.
- Now Again, In discovering ]]>
Brand on Theme - Duplicate the below CSS Code and paste it above on ]]>
Brand.
- Right here is BookMark Icon open-shut button, chances are you'll well establish where you desire as an illustration fair above the Brand.
-
- And this html bookmark icon will existing Bookmark button in high of every Submit. To add articles to bookmarks, Duplicate the below code and establish it above of
- After You fetch gotten Stumbled on Paste it sooner than
- Now at closing establish the Java Script below above the code
/bookmark widget By Tech & Fun Zone*/
.pop-home::-webkit-scrollbar{expose:none}
.pop-home{expose:flex!crucial;width: 100%;high: 100%;anxiousness:mounted;high:0;left:0;background:rgb(0 0 0 / 51%);visibility:hidden;opacity:0;transition: var(--trans-2);z-index: 999999;overflow-y:scroll}
.pop-home.open{opacity:1;visibility:visible}
.pop-home .pop-html{background:#fff;padding-backside: 10px;expose:block;margin:auto auto;width:calc(100% - 20px);max-width: 500px;visibility:hidden;opacity:0;overflow:hidden;transition: var(--trans-2);turn into:scale(.5);border-radius:7px;field-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}
.pop-home.open .pop-html{opacity:1;turn into:scale(1);visibility:visible}
.pop-home .head-pop{width:-webkit-have-available;padding: 12px 30px;overflow:hidden;/*background:#d3f6f3*/border-backside: 1px stable #e6e6e6;}
.pop-home .shut-btn{waft:dazzling;cursor:pointer;have:#7e7e7e}
.pop-home .buka-tutup svg {width: 20px;high: 20px;have: none!crucial;stroke: #08102b;stroke-linecap: spherical;stroke-linejoin: spherical;stroke-width: 1px;}
.pop-home .physique-direct{padding: 10px}
.pop-home .text-heart{expose:grid;text-align:heart;grid-hole: 15px}
.pop-home .text-heart svg{margin:0 auto}
.pop-home .btn.btn-define-data{width:fit-direct;margin:0 auto;text-decoration:none}
.pop-home .table{width: 100%;border: 1px stable #e6e6e6;border-radius:7px;margin:5px 0;padding:5px}
.pop-home .table img{border-radius:4px;width:auto;background: var(--mobHv);}
.pop-home .table a{text-decoration:none;colour: var(--fotT);}
.pop-home .table:wing{border-colour:var(--linkC)}
.pop-home .img-left{width: 140px;high: 60px}
.pop-home .item-left{/*vertical-align:-webkit-baseline-heart;*/padding-dazzling: 10px}
.pop-home .btn-procure{cursor:pointer}
.pop-home .btn-procure svg{have:none!crucial;stroke:var(--iconC);stroke-linecap:spherical;stroke-linejoin:spherical;stroke-width:1;}
.existing-bookmark{font-measurement: 11px;line-high: 18px;padding:0 5px;border-radius: 10px;background:#e6e6e6;colour:var(--bodyC);anxiousness:absolute;high:-5px;dazzling:0;z-index:2;animation:indicator 4s ease endless;-webkit-animation:indicator 1s ease endless;z-index:1}@-webkit-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.counterStat{colour:white;font-measurement: 16px}
.pop-home .head-pop b::after{direct:'';expose:inline-block;vertical-align:heart;width:var(--widgetTa);margin:0 10px;border-backside:1px stable var(--widgetTac);opacity:.5}
.pop-home .head-pop b{margin:0 0 25px;font-measurement:var(--widgetT);font-weight:var(--widgetTw);anxiousness:relative}
.pop-home .table img::sooner than{direct:'No image';expose:block;anxiousness:absolute;high: 50%;left: 50%;max-width:none;max-high: 100%;-webkit-turn into:translate(-50%,-50%);turn into:translate(-50%,-50%);font-measurement: 12px;opacity:.7;white-home:nowrap;}
/*darkish mode alter if the class is completely different*/
.drK.pop-home .pop-html{background:var(--darkB);colour:var(--darkT)}
.drK.pop-home .buka-tutup svg,.drK .btn-procure svg{stroke:var(--darkT)}
.drK.pop-home .table img {background: var(--darkTa);}
.drK.pop-home .table a {colour: var(--darkT)}
Change the marked phase of .drK CSS as per your theme darkish-mode CSS.
Guidelines —
There are several