Create a Professional Sitemap For Google
Create a Professional Sitemap For Google
Understanding the JavaScript Code for Displaying Blogger Posts
In this article, we'll explore a JavaScript code snippet designed to dynamically load and display posts from a Blogger blog.
This approach leverages JSON feeds and JavaScript to create an up-to-date list of articles.
The code snippet performs several tasks:
1. **Fetches data from a JSON feed**: It retrieves the list of posts from a Blogger blog using a JSON feed URL.
2. **Processes the data**: It parses the JSON response and formats it for display.
3. **Updates the webpage**: It inserts the formatted data into a specific HTML element on the page.
Detailed Breakdown
1. **Fetching the JSON Feed**
```javascript
var feedUrl = 'https://sharing-life-in-tw.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=myFunc';
```
This line defines the URL for the JSON feed of the blog.
It includes parameters to specify the maximum number of results and the callback function to handle the response.
Processing the JSON Data
```javascript
function myFunc(root) {
var html = [''];
var entries = root.feed.entry;
var date = 0;
for (var i = 0; i < entries.length; i++) {
if (entries[i].published.$t.substr(0,7) != date) {
html.push(' <a class="day-blue night fs-4 lh-lg" href="https://sharing-life-in-tw.blogspot.com/');
html.push(entries[i].published.$t.substr(0,4));
html.push('/');
html.push(entries[i].published.$t.substr(5,2));
html.push('/" style="text-decoration:none;">');
html.push(entries[i].published.$t.substr(0,4));
html.push(' Year ');
html.push(entries[i].published.$t.substr(5,2));
html.push(' Month');
html.push('</a>');
html.push('<br />');
date = entries[i].published.$t.substr(0,7);
}
html.push('<li>')
html.push(entries[i].published.$t.substr(5,2));
html.push('/');
html.push(entries[i].published.$t.substr(8,2));
html.push(' : <a class="day-blue night lh-base" href="');
html.push(entries[i].link[4].href); // Extract article URL
html.push('" style="text-decoration:none;">');
html.push(entries[i].title.$t); // Extract article title
html.push('</a>');
html.push('</li>');
}
document.getElementById("show_data").innerHTML = html.join('');
}
```
The `myFunc` function is responsible for generating the HTML content. It:
- Loops through each entry in the JSON feed.
- Checks if the date has changed to create new section headers.
- Constructs HTML for each post, including a link to the article and the publication date.
Including the JavaScript File
```javascript
function IncludeJavaScript(jsFile) {
document.write('<script type="text/javascript" src="'+ jsFile + '"></script>');
}
```
This function dynamically includes an external JavaScript file by writing a script tag into the document.
Loading the Feed
```javascript
IncludeJavaScript(feedUrl);
```
Finally, this line calls the `IncludeJavaScript` function to load the JSON feed from the specified URL.
Conclusion
This code provides a dynamic way to display Blogger posts on your website by fetching data from a JSON feed, processing it, and updating the webpage.
By understanding and customizing this script, you can efficiently manage and present your blog content.
---
Feel free to adjust or expand the article based on specific needs or additional details you may want to include.