This code creates a styled button labeled "Bookmark This Page".
When clicked, it displays a prompt with the homepage URL and a bookmark instruction, guiding the user to manually bookmark the page using keyboard shortcuts (e.g., Ctrl + D or Command ⌘ + D). The button does not perform the bookmarking action itself.
<style>
.bookmark-button {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px 0;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
display: block;
text-align: center;
}
.bookmark-button:hover {
background-color: #0056b3;
}
</style>
<button id="bookmarkButton" class="bookmark-button">Bookmark This Page</button>
<script>
document.getElementById('bookmarkButton').addEventListener('click', function () {
const title = document.title;
const url = window.location.href;
// Detect user OS for correct key combo in alert
const isMac = navigator.userAgent.indexOf('Mac') !== -1;
const shortcut = isMac ? 'Command ⌘ + D' : 'Ctrl + D';
if (navigator.userAgent.indexOf('Opera') !== -1 || navigator.userAgent.indexOf('OPR') !== -1) {
alert('Use the browser’s menu or press ' + shortcut + ' to bookmark this page.');
} else {
alert('Press ' + shortcut + ' to bookmark this page.');
}
});
</script>
Where to add this code
Add a new gadget then paste the code into the HTML/JavaScript gadget. You can leave the 'Title' empty.
Why code can't bookmark a page directly in modern browsers
Modern browsers don't allow JavaScript to bookmark pages directly due to security concerns, user control, and browser policies. Instead, users must interact with the browser to bookmark a page, such as clicking the bookmark button or using a keyboard shortcut.
Read also:
Improve AdSense Auto In-page Ads Margin Spacing
Add Blogs from Any Platform to Your Blogger Reading List
Show Ad below Post Title in Blogger