AutoSheet Solutions

Blog Link Manager: A Free Tool for Bloggers

Are you tired of manually updating your "Recent Posts" section every time you publish a new article? This Blog Link Manager is a simple yet powerful tool that makes managing your blog's navigation links effortless.

What It Does

The Blog Link Manager is a browser-based tool that helps you create, organize and manage links to your blog posts. It generates clean HTML code that you can paste directly into your blog to display a "Recent Posts" section.

Key Features

Import Existing Links: Paste your current HTML to import all your existing links
Add New Links Easily: Add multiple post titles and URLs at once
Drag-and-Drop Reordering: Visually arrange your links in any order
Hide/Show Links: Temporarily hide certain links without deleting them
One-Click Copy: Copy the generated HTML with a single click
Direct Blogger Integration: Open your Blogger page directly from the tool

How to Use

Import Your Existing Links (Optional)
- Copy the HTML from your current "Recent Posts" section
- Paste it into the first text area
- Click "Parse Existing Links"
Add New Links
- Enter the post title and URL in the input fields
- Click "Add Link Row" to add more entries
- Click "Add Links" when you're done
Organize Your Links
- Drag links to reorder them
- Use the up/down arrows to move links
- Click "Hide" to temporarily remove a link from the list
- Click "Edit" to modify a link's title or URL
Get Your HTML
- The formatted HTML will appear in the output box
- Click "Copy HTML" to copy it to your clipboard
- Paste it into your blog's HTML editor

Where Can You Use It?

This tool works with any platform that accepts HTML code, including:

Blogger: Works perfectly with Blogger's HTML/JavaScript widget
WordPress: Use in Text/HTML widgets or custom HTML blocks
Wix/Squarespace: Paste into HTML embed elements
Any Website: Works with any site where you can edit HTML

Why Use It?

Save Time: Update your recent posts section in seconds instead of minutes
No Coding Required: Generate clean, styled HTML without writing code
Work Offline: Save the HTML file and use it anytime, anywhere
No Registration: No accounts, no sign-ups, completely free

Installation

Simply download the HTML file and open it in any modern web browser. No installation or internet connection required after downloading.

Tips for Best Results

Use consistent formatting for your post titles
For Blogger users, the "Open Blogger Page" button provides a convenient shortcut
Hide seasonal or temporary posts instead of deleting them
Save your generated HTML as a backup before making major changes

Ready to simplify your blog management? Download the Blog Link Manager now and take control of your "Recent Posts" section!

Sample HTML Template

Below is a sample "Recent Posts" HTML template that you can use as a starting point:

Code Block

Here is the html fir your 'Recent Posts' copy it.

<h2>Recent Posts</h2>
<ul style="list-style-type: none; padding: 0;">
  <li style="margin: 8px 0;">
    <a href="https://www.yourblog.com/post-1" target="_blank" 
       style="color: #0077cc; text-decoration: none;">
      10 Essential Tips for Beginner Bloggers
    </a>
  </li>
  <li style="margin: 8px 0;">
    <a href="https://www.yourblog.com/post-2" target="_blank" 
       style="color: #0077cc; text-decoration: none;">
      How to Grow Your Blog Traffic in 2025
    </a>
  </li>
  <li style="margin: 8px 0;">
    <a href="https://www.yourblog.com/post-3" target="_blank" 
       style="color: #0077cc; text-decoration: none;">
      The Ultimate Guide to SEO for Bloggers
    </a>
  </li>
  <li style="margin: 8px 0;">
    <a href="https://www.yourblog.com/post-4" target="_blank" 
       style="color: #0077cc; text-decoration: none;">
      Creating Engaging Content That Readers Love
    </a>
  </li>
  <li style="margin: 8px 0;">
    <a href="https://www.yourblog.com/post-5" target="_blank" 
       style="color: #0077cc; text-decoration: none;">
      5 Ways to Monetize Your Blog in 2025
    </a>
  </li>
  <li style="margin: 8px 0;">
    <a href="https://www.yourblog.com/post-6" target="_blank" 
       style="color: #0077cc; text-decoration: none;">
      How to Build an Email List for Your Blog
    </a>
  </li>
  <li style="margin: 8px 0;">
    <a href="https://www.yourblog.com/post-7" target="_blank" 
       style="color: #0077cc; text-decoration: none;">
      Social Media Strategies for Bloggers
    </a>
  </li>
  <li style="margin: 8px 0;">
    <a href="https://www.yourblog.com/post-8" target="_blank" 
       style="color: #0077cc; text-decoration: none;">
      The Best Tools for Modern Bloggers
    </a>
  </li>
</ul>

Code Block

Here is the html for 'Blog Link Manager'.Copy it

<!DOCTYPE html>
<html>
<head>
  <title>Blog Link Manager</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    .container {
      background-color: #f4f4f4;
      padding: 20px;
      border-radius: 8px;
    }
    .section {
      margin-bottom: 20px;
      background-color: white;
      padding: 15px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .html-input, #output {
      width: 100%;
      height: 200px;
      font-family: monospace;
      white-space: pre-wrap;
      margin-bottom: 10px;
    }
    .link-inputs {
      display: grid;
      grid-template-columns: 3fr 4fr;
      gap: 10px;
      margin-bottom: 10px;
    }
    .link-row {
      display: flex;
      margin-bottom: 5px;
    }
    .link-row input {
      flex-grow: 1;
      margin-right: 5px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 15px;
      margin: 5px 0;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    .remove-link, .edit-generated-link, .hide-link {
      background-color: #f44336;
      margin-left: 5px;
      padding: 5px 10px;
      font-size: 0.8em;
    }
    .edit-generated-link {
      background-color: #2196F3;
    }
    .hide-link {
      background-color: #FF9800;
    }
    .link-edit-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid #eee;
      border-radius: 4px;
    }
    .drag-handle {
      cursor: grab;
      padding: 5px;
      margin-right: 5px;
      color: #757575;
    }
    .move-buttons {
      display: flex;
      margin-left: 5px;
    }
    .move-up, .move-down {
      background-color: #607D8B;
      padding: 5px 8px;
      margin: 0 2px;
      font-size: 0.8em;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Blog Link Manager</h1>
    
    <div class="section">
      <h2>1. Paste Existing Page HTML</h2>
      <textarea id="htmlInput" class="html-input" placeholder="Paste your current 'Recent Posts' HTML here"></textarea>
      <button onclick="parseExistingHTML()">Parse Existing Links</button>
    </div>

<div class="section">
      <h2>2. Add Multiple New Posts</h2>
      <div id="linkInputs">
        <div class="link-inputs">
          <label>Post Titles</label>
          <label>Post URLs</label>
        </div>
        <div id="dynamicLinkInputs"></div>
      </div>
      <button onclick="addLinkRow()">Add Link Row</button>
      <button onclick="addMultipleLinks()">Add Links</button>
    </div>

<div class="section">
      <h2>3. Generated HTML</h2>
      <button id="toggleHiddenBtn" class="show-hidden-links" onclick="toggleHiddenLinks()">Show Hidden Links</button>
      <div id="generatedLinksContainer"></div>
      
      <div id="hiddenPostsSection" class="hidden-posts-section" style="display: none;">
        <div class="hidden-links-title">
          <h3>Hidden Posts</h3>
          <button class="unhide-all" onclick="unhideAllLinks()">Unhide All</button>
        </div>
        <div id="hiddenLinksContainer"></div>
      </div>
      
      <textarea id="output" readonly></textarea>
      <div class="button-group">
        <button onclick="copyToClipboard()">Copy HTML</button>
        <button class="blogger-link-btn" onclick="openBloggerPage()">Open Blogger</button>
      </div>
    </div>
  </div>

function createLinkRow() {
      const row = document.createElement('div');
      row.className = 'link-row';
      row.innerHTML = `
        <input type="text" placeholder="Post Title">
        <input type="text" placeholder="Post URL">
        <button class="remove-link" onclick="removeRow(this)">Remove</button>
      `;
      return row;
    }

function openBloggerPage() {
      window.open('https://www.example.com/blog', '_blank');
    }

function addLinkRow() {
      const container = document.getElementById('dynamicLinkInputs');
      container.appendChild(createLinkRow());
    }

function removeRow(button) {
      button.closest('.link-row').remove();
    }

function addMultipleLinks() {
      const rows = document.querySelectorAll('#dynamicLinkInputs .link-row');
      const newLinks = [];

rows.forEach(row => {
        const titleInput = row.querySelector('input:first-child');
        const urlInput = row.querySelector('input:nth-child(2)');
        
        const title = titleInput.value.trim();
        const url = urlInput.value.trim();

if (title && url) {
          newLinks.push({ title, url, hidden: false });
          titleInput.value = '';
          urlInput.value = '';
        }
      });

if (newLinks.length === 0) {
        alert('Please enter at least one valid link');
        return;
      }

existingLinks.unshift(...newLinks);
      updateDisplay();
    }

function toggleHiddenLinks() {
      showHiddenLinks = !showHiddenLinks;
      const toggleBtn = document.getElementById('toggleHiddenBtn');
      toggleBtn.textContent = showHiddenLinks ? 'Hide Hidden Links' : 'Show Hidden Links';
      displayGeneratedLinks();
    }

function unhideAllLinks() {
      existingLinks.forEach(link => {
        if (link.hidden) {
          link.hidden = false;
        }
      });
      updateDisplay();
    }

function updateDisplay() {
      document.getElementById('output').value = generateHTML();
      displayGeneratedLinks();
      displayHiddenLinks();
    }

function moveLink(index, direction) {
      if (direction === 'up' && index === 0) return;
      if (direction === 'down' && index === existingLinks.length - 1) return;
      
      const newIndex = direction === 'up' ? index - 1 : index + 1;
      
      [existingLinks[index], existingLinks[newIndex]] = [existingLinks[newIndex], existingLinks[index]];
      updateDisplay();
    }

container.innerHTML = generatedLinksHTML || '<p>No visible links. Unhide posts or add new ones.</p>';
      
      setupDragAndDrop();
    }

// Remaining functions for drag and drop, editing, etc.
    function setupDragAndDrop() {
      // Implementation details for drag and drop functionality
    }

function displayHiddenLinks() {
      // Implementation for displaying hidden links
    }

function toggleLinkVisibility(index) {
      existingLinks[index].hidden = !existingLinks[index].hidden;
      updateDisplay();
    }

function editGeneratedLink(index) {
      // Implementation for editing links
    }

function removeGeneratedLink(index) {
      if (confirm(`Are you sure you want to remove this link?`)) {
        existingLinks.splice(index, 1);
        updateDisplay();
      }
    }

function copyToClipboard() {
      const output = document.getElementById('output');
      output.select();
      document.execCommand('copy');
      alert('HTML copied to clipboard!');
    }

// Add initial link row
    addLinkRow();
  </script>
</body>
</html>