Introducing Read Later X: The Ultimate Bookmarking System for Any Blogger Theme
In the age of information overload, your readers need a simple way to save engaging content for later. A generic browser bookmark is often lost in a sea of other links. What if you could offer them a beautiful, integrated, and app-like bookmarking experience right on your blog? Today, we at UioveX are thrilled to launch Read Later X – a universal, feature-rich, and stunningly animated bookmarking system designed to work flawlessly on any Blogger theme.
This isn't just a bookmark button; it's a complete content-saving ecosystem that will make your visitors want to return to your blog again and again.
Why Read Later X is a Must-Have for Your Blog
We've packed this system with modern features to ensure it not only looks incredible but also provides unmatched functionality.
- Dynamic & Interactive Buttons: Click the bookmark icon in any post, and watch it transform into a satisfying tick mark with a smooth animation.
- Floating Panel Button: A sleek, pill-shaped "Read Later" button floats elegantly below your header, showing the number of saved articles in a clean counter.
- Full-Screen App-like Panel: A beautiful, full-screen panel slides in from the right, showcasing saved articles with their thumbnails, titles, and labels.
- Universal Compatibility: Built with pure JavaScript, it works on ANY Blogger theme without conflicts.
- Theme-Aware & Dark Mode Ready: Automatically adapts to your theme's Light and Dark Modes for a seamless look.
- Persistent Storage: Uses the browser's Local Storage, so your readers' saved lists are always there when they return.
Installation Guide: A Simple Two-Step Process
Integrating the Read Later X system into your blog is incredibly straightforward. Just follow these two simple steps to get it up and running.
-
Add the HTML & JavaScript Code
This is the core of the system. It creates the floating button, the full-screen panel, and contains all the logic for saving, displaying, and managing bookmarks.
Crucial Step: For optimal performance, this entire code block should be placed right before the closing</body>tag in your theme's HTML. -
Add the CSS Code
This code handles all the styling that makes the system look beautiful. It controls the appearance, animations, and automatic color changes for dark mode.
Pro Tip: The recommended way to add this is via the Blogger Theme Customizer. Go to Theme → Customize → Advanced → Find "Add CSS" from the dropdown, and paste the CSS code provided below into the custom CSS box.
-
Add the Bookmark Button to Your Posts
Finally, you need to add a small piece of code to your theme's HTML where you want the bookmark icon to appear inside your posts. This will make the button appear automatically for every post.
The Universal Code Snippets
Here are the complete code snippets you'll need. Just copy and paste them according to the instructions above to bring this amazing feature to your blog.
Step 1: Main HTML & JavaScript (Place before </body>)
Copy the code below and paste it just before the </body> tag in your theme's HTML.
<!-- UioveX Read Later System by SAM (UioveX) - Start -->
<!-- 1. Main Bookmark Panel HTML -->
<div id="uiovex-read-later-panel" class="uiovex-rl-panel">
<div class="uiovex-rl-panel-header">
<h3>Read Later</h3>
<button id="uiovex-rl-close-btn" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<div class="uiovex-rl-search-container">
<input type="search" id="uiovex-rl-search-input" placeholder="Search in your list..."/>
</div>
<div class="uiovex-rl-list" id="uiovex-rl-list">
<div class="uiovex-rl-empty" id="uiovex-rl-empty-state">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
<h4>Your Reading List is Empty</h4>
<p>Click the bookmark icon on any post to save it for later.</p>
<a href="/" class="uiovex-rl-home-btn">Explore Posts</a>
</div>
</div>
<!-- Bonus Features Section -->
<div class="uiovex-rl-panel-footer">
<button id="uiovex-rl-export-btn">Export List</button>
<button onclick="document.getElementById('uiovex-rl-import-input').click()">Import List</button>
<input type='file' id='uiovex-rl-import-input' accept='.json' style='display:none'/>
</div>
</div>
<div id="uiovex-rl-overlay"></div>
<!-- 2. Floating "Read Later" Button -->
<button id="uiovex-rl-open-btn" class="uiovex-rl-floating-btn" aria-label="Open Read Later List">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
<span>Read Later</span>
<span id="uiovex-rl-counter" class="uiovex-rl-counter">0</span>
</button>
<!-- 3. Toast Notification for feedback -->
<div id="uiovex-rl-toast" class="uiovex-rl-toast"></div>
<!-- 4. Main JavaScript Logic -->
<script type='text/javascript'>
//<![CDATA[
(function() {
"use strict";
const bookmarkSystem = {
DB_KEY: 'uiovexReadLaterDB',
bookmarks: {},
init() {
this.bookmarks = JSON.parse(localStorage.getItem(this.DB_KEY)) || {};
this.panel = document.getElementById('uiovex-read-later-panel');
this.list = document.getElementById('uiovex-rl-list');
this.openBtn = document.getElementById('uiovex-rl-open-btn');
this.closeBtn = document.getElementById('uiovex-rl-close-btn');
this.overlay = document.getElementById('uiovex-rl-overlay');
this.counter = document.getElementById('uiovex-rl-counter');
this.searchInput = document.getElementById('uiovex-rl-search-input');
this.toast = document.getElementById('uiovex-rl-toast');
this.emptyState = document.getElementById('uiovex-rl-empty-state');
this.exportBtn = document.getElementById('uiovex-rl-export-btn');
this.importInput = document.getElementById('uiovex-rl-import-input');
this.addEventListeners();
this.updateAllButtons();
this.renderList();
},
addEventListeners() {
document.body.addEventListener('click', (e) => {
if (e.target.closest('.uiovex-bookmark-btn')) {
this.handleClick(e.target.closest('.uiovex-bookmark-btn'));
}
});
this.openBtn.addEventListener('click', () => this.togglePanel(true));
this.closeBtn.addEventListener('click', () => this.togglePanel(false));
this.overlay.addEventListener('click', () => this.togglePanel(false));
this.searchInput.addEventListener('input', () => this.renderList());
this.exportBtn.addEventListener('click', () => this.exportData());
this.importInput.addEventListener('change', (e) => this.importData(e));
},
handleClick(button) {
const postId = button.dataset.id;
if (!postId) return;
if (this.bookmarks[postId]) {
this.remove(postId);
this.showToast('Removed from Read Later');
} else {
const postData = {
id: postId,
title: button.dataset.title,
url: button.dataset.url,
image: button.dataset.image,
label: button.dataset.label || ''
};
this.add(postData);
this.showToast('Saved to Read Later!');
}
},
add(postData) { this.bookmarks[postData.id] = postData; this.save(); },
remove(postId) { delete this.bookmarks[postId]; this.save(); },
save() {
localStorage.setItem(this.DB_KEY, JSON.stringify(this.bookmarks));
this.updateAllButtons();
this.renderList();
},
updateAllButtons() {
document.querySelectorAll('.uiovex-bookmark-btn').forEach(btn => {
btn.classList.toggle('bookmarked', !!this.bookmarks[btn.dataset.id]);
});
this.updateCounter();
},
updateCounter() {
const count = Object.keys(this.bookmarks).length;
this.counter.textContent = count;
this.counter.style.display = count > 0 ? 'flex' : 'none';
},
togglePanel(isOpen) {
this.panel.classList.toggle('open', isOpen);
this.overlay.classList.toggle('open', isOpen);
document.body.style.overflow = isOpen ? 'hidden' : '';
},
renderList() {
const searchTerm = this.searchInput.value.toLowerCase();
const filteredBookmarks = Object.values(this.bookmarks).filter(item =>
item.title.toLowerCase().includes(searchTerm) || item.label.toLowerCase().includes(searchTerm)
);
this.list.innerHTML = '';
if (filteredBookmarks.length === 0) {
this.list.appendChild(this.emptyState);
this.emptyState.style.display = 'flex';
return;
}
this.emptyState.style.display = 'none';
filteredBookmarks.forEach(item => {
const itemEl = document.createElement('div');
itemEl.className = 'uiovex-rl-item';
itemEl.innerHTML = `
${item.label ? `${item.label}` : ''}
${item.title}
`;
this.list.appendChild(itemEl);
});
this.list.querySelectorAll('.uiovex-rl-item-remove').forEach(btn => {
btn.addEventListener('click', (e) => {
this.remove(e.currentTarget.dataset.id);
this.showToast('Removed from list');
});
});
},
showToast(message) {
this.toast.textContent = message;
this.toast.classList.add('show');
setTimeout(() => this.toast.classList.remove('show'), 3000);
},
exportData() {
const dataStr = JSON.stringify(this.bookmarks, null, 2);
const dataBlob = new Blob([dataStr], {type: "application/json"});
const url = URL.createObjectURL(dataBlob);
const a = document.createElement('a');
a.href = url;
a.download = 'uiovex_bookmarks.json';
a.click();
URL.revokeObjectURL(url);
this.showToast('List exported successfully!');
},
importData(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
try {
const importedData = JSON.parse(e.target.result);
// A simple validation to check if it's a valid bookmark object
if (typeof importedData === 'object' && !Array.isArray(importedData)) {
this.bookmarks = { ...this.bookmarks, ...importedData };
this.save();
this.showToast('List imported successfully!');
} else {
this.showToast('Invalid file format.');
}
} catch (err) {
this.showToast('Error importing file.');
console.error("Import error:", err);
}
};
reader.readAsText(file);
event.target.value = ''; // Reset input
}
};
document.addEventListener('DOMContentLoaded', () => bookmarkSystem.init());
})();
//]]>
</script>
<!-- UioveX Read Later System by SAM (UioveX) - End -->
Step 2: CSS Code (Place in Custom CSS)
Go to your theme's custom CSS section and paste the following code.
/* UioveX Read Later System by SAM (UioveX) - https://www.uiovex.top */
:root {--rl-primary:#007bff;--rl-light-bg:#ffffff;--rl-light-bg-alt:#f8f9fa;--rl-light-text:#212529;--rl-light-text-alt:#6c757d;--rl-light-border:#dee2e6;--rl-dark-bg:#1a1d24;--rl-dark-bg-alt:#21252e;--rl-dark-text:#f8f9fa;--rl-dark-text-alt:#adb5bd;--rl-dark-border:#373b43;}
.uiovex-bookmark-btn{background:none;border:none;padding:0;cursor:pointer;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;}.uiovex-bookmark-btn svg{width:22px;height:22px;transition:all .3s ease;}.uiovex-bookmark-btn .icon-bookmark{display:block;}.uiovex-bookmark-btn .icon-tick{display:none;}.uiovex-bookmark-btn.bookmarked .icon-bookmark{display:none;}.uiovex-bookmark-btn.bookmarked .icon-tick{display:block;}.uiovex-bookmark-btn .icon-bookmark path{fill:none;stroke:var(--bodyCa);}.uiovex-bookmark-btn:hover .icon-bookmark path{stroke:var(--rl-primary);}.uiovex-bookmark-btn.bookmarked .icon-tick path{stroke:var(--rl-primary);}
.uiovex-rl-floating-btn{position:fixed;top:80px;right:20px;z-index:999;display:flex;align-items:center;gap:8px;padding:2px 5px 2px 4px;background-color:var(--rl-light-bg);color:var(--rl-light-text);border:1px solid var(--rl-light-border);border-radius:50px;box-shadow:0 5px 20px rgba(0,0,0,.1);cursor:pointer;font-weight:600;font-size:0.9rem;transition:all .3s ease;}.uiovex-rl-floating-btn:hover{transform:scale(1.05);box-shadow:0 8px 25px rgba(0,0,0,.15);}.uiovex-rl-floating-btn svg{width:20px;height:20px;stroke:var(--rl-light-text);}.uiovex-rl-counter{min-width:22px;height:22px;border-radius:50%;background-color:var(--rl-primary);color:white;font-size:0.8rem;display:flex;align-items:center;justify-content:center;}.uiovex-rl-panel{position:fixed;top:0;right:-100%;width:100%;max-width:400px;height:100%;background-color:var(--rl-light-bg);z-index:10001;box-shadow:-5px 0 30px rgba(0,0,0,.1);transition:right .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;}.uiovex-rl-panel.open{right:0;}.uiovex-rl-panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--rl-light-border);flex-shrink:0;}.uiovex-rl-panel-header h3{margin:0;font-size:1.3rem;}.uiovex-rl-panel-header button{background:none;border:none;padding:5px;cursor:pointer;}.uiovex-rl-panel-header svg{width:24px;height:24px;stroke:var(--rl-light-text-alt);}.uiovex-rl-search-container{padding:1rem 1.5rem;border-bottom:1px solid var(--rl-light-border);flex-shrink:0;}.uiovex-rl-search-container input{width:100%;padding:10px 15px;border-radius:8px;border:1px solid var(--rl-light-border);background-color:var(--rl-light-bg-alt);font-size:1rem;}.uiovex-rl-list{flex-grow:1;overflow-y:auto;padding:1rem;}.uiovex-rl-item{display:flex;align-items:center;gap:1rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--rl-light-border);}.uiovex-rl-item:last-child{border-bottom:none;}.uiovex-rl-item-img-link{flex-shrink:0;}.uiovex-rl-item-img{width:80px;height:80px;border-radius:12px;background-size:cover;background-position:center;}.uiovex-rl-item-content{flex-grow:1;}.uiovex-rl-item-label{display:inline-block;padding:3px 8px;background-color:rgba(0,123,255,0.1);color:var(--rl-primary);font-size:0.75rem;border-radius:50px;margin-bottom:5px;}.uiovex-rl-item-title{margin:0;font-size:1rem;font-weight:600;}.uiovex-rl-item-title a{text-decoration:none;color:inherit;}.uiovex-rl-item-remove{background:none;border:none;cursor:pointer;color:var(--rl-light-text-alt);padding:5px;}.uiovex-rl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--rl-light-text-alt);padding:2rem;}.uiovex-rl-empty svg{margin-bottom:1rem;width:48px;height:48px;opacity:0.5;}.uiovex-rl-empty h4{margin:0 0 0.5rem;color:var(--rl-light-text);font-size:1.2rem;}.uiovex-rl-home-btn{margin-top:1.5rem;padding:10px 20px;background-color:var(--rl-primary);color:white;text-decoration:none;border-radius:8px;font-weight:600;}.uiovex-rl-panel-footer{padding:1rem;border-top:1px solid var(--rl-light-border);display:flex;gap:10px;}.uiovex-rl-panel-footer button{padding:8px 12px;font-size:0.85rem;border-radius:6px;cursor:pointer;flex-grow:1;border:1px solid var(--rl-light-border);background:var(--rl-light-bg-alt);}.uiovex-rl-overlay{position:fixed;inset:0;background-color:rgba(0,0,0,.5);z-index:10000;opacity:0;visibility:hidden;transition:opacity .4s ease;}.uiovex-rl-overlay.open{opacity:1;visibility:visible;}.uiovex-rl-toast{position:fixed;bottom:-100px;left:50%;transform:translateX(-50%);padding:12px 24px;background-color:#323232;color:white;border-radius:8px;box-shadow:0 5px 20px rgba(0,0,0,.2);font-size:0.9rem;z-index:10002;transition:bottom .4s cubic-bezier(.4,0,.2,1);}.uiovex-rl-toast.show{bottom:30px;}
@media(max-width:768px){.uiovex-rl-floating-btn{bottom:30px;right:15px;height: 40px;width: 40px}
.uiovex-rl-floating-btn span:not(.uiovex-rl-counter){display:none;}.uiovex-rl-panel{max-width:100%;}}
.drK .uiovex-rl-floating-btn,.drK .uiovex-rl-panel{background-color:var(--rl-dark-bg);color:var(--rl-dark-text);border-color:var(--rl-dark-border);}.drK .uiovex-rl-floating-btn svg{stroke:var(--rl-dark-text);}.drK .uiovex-rl-panel-header,.drK .uiovex-rl-search-container{border-bottom-color:var(--rl-dark-border);}.drK .uiovex-rl-panel-header svg{stroke:var(--rl-dark-text-alt);}.drK .uiovex-rl-search-container input{background-color:var(--rl-dark-bg-alt);border-color:var(--rl-dark-border);color:var(--rl-dark-text);}.drK .uiovex-rl-item{border-bottom-color:var(--rl-dark-border);}.drK .uiovex-rl-item-label{background-color:rgba(88,166,255,0.15);color:var(--rl-primary);}.drK .uiovex-rl-item-remove{color:var(--rl-dark-text-alt);}.drK .uiovex-rl-empty{color:var(--rl-dark-text-alt);}.drK .uiovex-rl-empty h4{color:var(--rl-dark-text);}.drK .uiovex-rl-panel-footer{border-top-color:var(--rl-dark-border);}.drK .uiovex-rl-panel-footer button{background:var(--rl-dark-bg-alt);border-color:var(--rl-dark-border);color:var(--rl-dark-text);}
Step 3: Add the Automatic Bookmark Button to Posts
This code will automatically place the bookmark button inside your posts.
First, you need to create a new
b:includable which will hold the automatic button code. Go to your theme's HTML editor, search for <!--[ <Common> | LinkList ]-->, and paste the following code right **above** it.
<b:includable id='uiovex-in-post-bookmark-button' var='post'>
<button class='uiovex-bookmark-btn'
expr:data-id='data:post.id'
expr:data-title='data:post.title'
expr:data-url='data:post.url.canonical'
expr:data-image='resizeImage(data:post.featuredImage, 300)'
expr:data-label='data:post.labels ? data:post.labels.first.name : ""'
aria-label='Save to Read Later'>
<span class='icon-bookmark'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</span>
<span class="icon-tick">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
</button>
</b:includable>
Now that the includable is created, you need to "call" it where you want the button to appear. A great place is next to the other icons like comments and share. Find
<b:includable id='postInfo' var='post'> in your theme, and inside its .pIc div, add the following line:
<b:include data='post' name='uiovex-in-post-bookmark-button'/>
Bonus Features Explained
Read Later X comes with powerful bonus features to give your readers full control over their saved content.
Please note that these are advanced features. The import function will merge lists and can overwrite existing items if they share the same post ID.
- Search & Filter: The search bar at the top of the panel allows users to instantly filter their saved articles by title or label.
- Data Export: With the "Export List" button, users can download their entire bookmark collection as a JSON file. This is perfect for backing up their list or moving to a new device.
- Data Import: The "Import List" button allows users to upload a previously exported JSON file to restore or merge their reading list.
- Smart Counter: The floating button only shows the counter when there's at least one item saved, keeping the UI clean.
- Empty State UI: When the list is empty, it shows a helpful message and a button to encourage users to explore more posts.
This is a browser-based system. Clearing browser data (Local Storage) will erase the user's saved list. The Export/Import feature is provided to mitigate this.
Final Words & Feedback Request
We are incredibly proud to offer this advanced, app-like bookmarking system to the Blogger community. We believe it will not only enhance your site's functionality but also significantly improve user retention.
What do you think of the new Read Later X system? Are there other advanced features you'd like to see on UioveX? Let us know your thoughts and suggestions in the comments below. Your feedback drives our innovation!
