Threads app: Meta Officially Launches Twitter Rival

 Good day amazing lovers and readers of TechBrainaic, how are you guess you're doing great?. Today I will be sharing with you how to setup bookmark widget in Blogger.

What Is Bookmark And How Does It Work?

Bookmark is a record of the address of a file or Internet page, serving as a shortcut to it. In a more simple blogging term, Bookmark Widget in Blogger is a widget where you can easily save your favorite posts/articles for future and further reading without the need to write down or memorize the URL of the post/website. 

Bookmarks is one of the features commonly present in most internet browsers such as Opera, Mozilla Firefox, Google Chrome, Internet Explorer, Brave and many more to store the address or name of a website and group URL addresses according to the specified theme or themes.

See What Others are Reading :

• How to Remove All Widgets in Blogger Template 2022
• How To Add Facebook Open Graph Meta Tags In Blogger 2022
• How to Integrate WhatsApp Chat Widget on Blogger

Post Bookmark Widget in Blogger is designed with the help of JQuery, Javascript, HTML, CSS and Local Storage.

Oftentimes I find myself copying and saving the hyperlink of a captivating and engaging Blog post i stumbled on while surfing the internet so as to make it easy to access the article over and over again with less stress. With this awesome post bookmarking widget blog readers will find it suitable to have access to all their favorite post on a specific webpage without pressing CTRL+D button in their browser especially when there is a long chain of articles on the website/Blog. 

In a nutshell when a visitor stumbleupon an interesting article on a webpage and doesn't have enough time to read it, such visitor can bookmark the articles so that it won't be difficult to find later. This widget already uses localStorage, which means that the bookmarked article will not be lost unless the visitor deletes the browser cookies or caches.

How To Setup Bookmark Post Widget in Blogger

Warning! Before making any changes to your template make sure you take a back up of it just in case something unexpected happens.

Step 1 :- First Login to your Blogger Dashboard. 

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

Step 3 :- Make sure your template has jQuery installed. if you don't already have it, you can copy the code below and place it above the code  </head> or <!--</head>--></head>.

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

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

CSS

/* 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 5 :- 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 6 :- After Copy the given Main JavaScript Code and Put it Above </body>

JS

<script src='https://scripts.smarttechmukesh.com/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://techbrainaic.blogspot.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 customize all the marked part to suit your desire.

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 :- Lastly, Click Save and Enjoy the Amazing Feature.

Final words

Hope I was able to make you understand How To Setup Bookmark Post Widget in Blogger. And if you still have any issues related to this post, feal free to ask me in the comments, I would be happy to answer!

That's All

 Thanks for reading our blog

Have a great day ahead!😍

Reference:
smarttechmukesh.com