How to Add a Random 5-Page Sidebar Widget on Blogspot

Adding a widget that randomly displays 5 pages from your Blogspot site can engage your readers and encourage them to explore more of your content. This feature keeps your blog dynamic and gives your audience something new to discover each time they visit. Follow these simple steps to create and add a random 5-page widget to your sidebar.

Step 1: Collect Your Page URLs

First, list the URLs of the pages you want to display randomly. These could be important pages like “About,” “Contact,” “Privacy Policy,” or popular posts you want to highlight.

Step 2: Create the HTML and JavaScript Code

Use the following code to create the widget. This code randomly selects 5 pages from your list each time the page is loaded:

    <div class="random-pages-widget">
        <h3>Random Pages</h3>
        <ul id="random-pages"></ul>
    </div>
    <script>
        // List of your page URLs
        var pages = [
            "https://yourblog.blogspot.com/p/about.html",
            "https://yourblog.blogspot.com/p/contact.html",
            "https://yourblog.blogspot.com/p/privacy-policy.html",
            "https://yourblog.blogspot.com/2024/11/sample-post-1.html",
            "https://yourblog.blogspot.com/2024/11/sample-post-2.html",
            "https://yourblog.blogspot.com/2024/11/sample-post-3.html",
            "https://yourblog.blogspot.com/2024/11/sample-post-4.html",
            "https://yourblog.blogspot.com/2024/11/sample-post-5.html"
        ];

        // Function to shuffle and select 5 random pages
        function getRandomPages() {
            var shuffled = pages.sort(() => 0.5 - Math.random());
            return shuffled.slice(0, 5);
        }

        // Display the random pages
        var randomPagesList = document.getElementById("random-pages");
        var randomPages = getRandomPages();
        randomPages.forEach(function(page) {
            var listItem = document.createElement("li");
            var link = document.createElement("a");
            link.href = page;
            link.textContent = page;
            listItem.appendChild(link);
            randomPagesList.appendChild(listItem);
        });
    </script>
    

Step 3: Add the Code to Your Blogspot Sidebar

Follow these steps to add the code to your sidebar:

• Go to your Blogspot dashboard and click on **Layout**.
• Click **Add a Gadget** in the sidebar section where you want the widget to appear.
• Select **HTML/JavaScript** and paste the code from above into the content box.
• Click **Save** and then **Save arrangement** to apply the changes.

Step 4: Customize the Widget

Feel free to customize the widget to better fit your blog’s design. You can modify the list of pages or style the widget using custom CSS in your theme settings.

Conclusion

Adding a random 5-page widget to your Blogspot sidebar is a great way to increase page views and keep your readers engaged. By presenting different pages each time, you’ll make your blog feel fresh and encourage visitors to explore more content.