Blogger
Photo of author
h4ck3r
0

Best Latest Post Widget For Blogger

Latest Post Widget For Blogger

Blogger

Blogger is free platform for the users which provides a lots of features to the users and also provide free cdn and not required any type of hosting. It is free to use and best for the new people who want to earn money through blogging

You don’t need to buy any custom domain because you will get adsense approval with default domain like example.blogspot.com

It is fully free not required any type of extra service charges for the website.

Features

  • It Is Free Of Cost
  • Easy Setup
  • Comfortable Layout And Easy To Use
  • Fully Based On Html And Java Script
  • Easy To Custome Codes
  • Fast Andsense Approval
  • There is lots Of Features

Installation Of Widget

  • Create a Website on blogger
  • Select your site
  • Go to layout
  • Click on add html/javascript
  • Paste the java script
  • Edit the website url and paste your url

Replace ‘https://YOUR-BLOG-URL’ with the actual URL of the Blogger blog you want to scrape

How To Get Script

  • Click On Download Button
  • You will be redirected to new website
  • Wait for time
  • Click On Generate Download Link
  • Now Download Will Start

It Will Look Like This

It’s Just a demo script . Download Full Script

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div class="latest-posts-widget">
    <h2>Latest Posts</h2>
    <ul id="latest-posts-list">
      <!-- Posts will be dynamically added here using JavaScript -->
    </ul>
  </div>

  <script>
    // Replace 'https://YOUR-BLOG-URL' with the actual URL of the Blogger blog you want to scrape.
    const blogURL = 'https://YOUR-BLOG-URL';

    // Function to fetch and display the latest posts.
    async function fetchLatestPosts() {
      try {
        const response = await fetch(`${blogURL}/feeds/posts/default?alt=json`);
        const data = await response.json();

        const latestPostsList = document.getElementById('latest-posts-list');

        // Loop through the retrieved data and create list items for up to 5 posts.
        for (let i = 0; i < 5 && i < data.feed.entry.length; i++) {
          const entry = data.feed.entry[i];
          const listItem = document.createElement('li');
          const link = document.createElement('a');
          link.href = entry.link[4].href;
          link.textContent = entry.title.$t;

          listItem.appendChild(link);

          // Add a special class to the first post to style it as a banner post.
          if (i === 0) {
            listItem.classList.add('banner-post');
          }

          latestPostsList.appendChild(listItem);
        }
      } catch (error) {
        console.error('Error fetching latest posts:', error);
      }
    }

    // Call the function to fetch and display the latest posts.
    fetchLatestPosts();
  </script>
</body>
</html>

Features

  • I’ve added padding to all list items using the .latest-posts-widget li selector to ensure consistent spacing.
  • I’ve modified the .banner-post selector to correctly apply the background color styling to posts with the banner-post class.
  • Added Custom Css And Designs

  • Latest Post Widget For Blogger

Decrypt Code

Copy first the decrypt code

Download

Another One With Banner

It Will Look Like This

Features

  • Just added banner to the post
  • More Effective
  • Added padding and margin
  • Everything Is same as previous one

Latest Post Widget For Blogger or recent post widget for blogger

Decrypt Code

Copy first the decrypt code

Download

Conclusion

In this article we show how to install latest post widget for blogger . we provided latest self made designs which full customizable using css . Both are good and you can use anyone according to your theme . let me know if you face any after using it. Recent post widget for blogger

Leave a Comment