Recent Post
Januari 01, 2023 • •
Displaying recent posts on your blog is one of the best ways to keep your content fresh and make it easier for visitors to find your latest writings. Here are the steps to add a "Recent Posts" widget in Blogger:
- Log in to Your Blogger Account: Open your Blogger account and access the dashboard of the blog where you want to add the "Recent Posts" widget.
- Open Layout: Select "Layout" from the menu on the left side of the dashboard.
- Add a Gadget: Click "Add a Gadget" in the area where you want the widget to appear.
- Select Feed: In the list of available gadgets, find and select "Feed".
- Enter the Feed URL: A pop-up window will appear. Enter the feed URL of your blog (e.g., `https://yourblog.blogspot.com/feeds/posts/default`), then click "Continue".
- Preview and Customize: Blogger will display a preview of the latest posts. Customize the number of posts to display and other settings as needed.
- Save the Gadget: If everything looks good, click "Save" to add the widget to your blog layout.
- Save the Layout: Return to the "Layout" page and click the "Save Layout" button at the top right.
- Done: The "Recent Posts" widget will now appear on your blog, showing the latest posts to your visitors.
By following these steps, you can make your blog more dynamic and engaging for readers. Don't forget to keep updating your blog regularly to make the most out of this feature.
Here is the translation of your sentence along with the script for displaying recent posts in a Blogger template:
Standar JS Script
<script>
function showLatestPosts(json) {
document.write('<ul id="recent-posts">');
for (var i = 0; i < 5; i++) {
if (i == json.feed.entry.length) break;
var entry = json.feed.entry[i];
var postTitle = entry.title.$t;
var postUrl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
postUrl = entry.link[k].href;
break;
}
}
if (postUrl) {
document.write('<li class="recent-posts">');
document.write('<a class="link-body-emphasis" href="' + postUrl + '" target="_top">' + postTitle + '</a>');
document.write('</li>');
}
}
document.write('</ul>');
}
</script><script src="/feeds/posts/default?orderby=updated&alt=json-in-script&callback=showLatestPosts"></script>With Bootstrap Column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Recent Posts</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.card-img-top {
width: 100%;
height: 200px; /* Menetapkan tinggi tetap untuk gambar */
object-fit: cover;
}
</style>
<script>
function showLatestPosts(json) {
document.write('<div class="container"><div class="row">');
for (var i = 0; i < 5; i++) {
if (i == json.feed.entry.length) break;
var entry = json.feed.entry[i];
var postTitle = entry.title.$t;
var postUrl;
var postSummary = entry.summary ? entry.summary.$t : '';
var postImage = entry.media$thumbnail ? entry.media$thumbnail.url.replace('/s72-c/', '/s400/') : 'https://via.placeholder.com/400'; // Adjusted image size
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
postUrl = entry.link[k].href;
break;
}
}
if (postUrl) {
document.write('<div class="col-md-3 mb-4">');
document.write('<div class="card h-100">');
document.write('<img src="' + postImage + '" class="card-img-top" alt="' + postTitle + '">');
document.write('<div class="card-body">');
document.write('<h5 class="card-title"><a class="link-body-emphasis" href="' + postUrl + '" target="_top">' + postTitle + '</a></h5>');
document.write('<p class="card-text">' + postSummary + '</p>');
document.write('</div>');
document.write('<div class="card-footer">');
document.write('<a href="' + postUrl + '" class="btn btn-primary" target="_top">Read more</a>');
document.write('</div>');
document.write('</div>');
document.write('</div>');
}
}
document.write('</div></div>');
}
</script>
</head>
<body>
<script src="/feeds/posts/default/-/datapo?orderby=updated&alt=json-in-script&callback=showLatestPosts"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Other View with custom CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog Pager</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.pager-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.pager-content {
width: 100%;
display: flex;
justify-content: space-between;
}
.pager-left, .pager-right {
flex: 1;
}
.pager-left {
text-align: left;
}
.pager-right {
text-align: right;
}
.pager-title {
font-weight: bold;
font-size: 1.5rem;
color: #6c757d;
}
</style>
</head>
<body>
<div class="pager-container" id="blog-pager">
<div class="pager-content">
<div class="pager-left">
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<span class='pager-title'><i class='fa-thin fa-chevrons-left'></i></span><br/>
<a class='blog-pager-newer-link link-body-emphasis' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« Next article</a>
</span>
<b:else/>
<span class='current-pageleft'>
<span class='pager-title'><i class='fa-light fa-face-smile'></i></span><br/>
<span class='text-muted'>This is newest article.</span>
</span>
</b:if>
</div>
<div class="pager-right">
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<span class='pager-title'><i class='fa-thin fa-chevrons-right'></i></span><br/>
<a class='blog-pager-older-link link-body-emphasis' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Older article »</a>
</span>
<b:else/>
<span class='current-pageright'>
<span class='pager-title'><i class='fa-light fa-face-smile'></i></span><br/>
<span class='text-muted'>This is the oldest article.</span>
</span>
</b:if>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>