Kode HTML Postingan Terbaru Blogger - Widget Recent Posts

Anda dapat menambahkan daftar postingan terbaru ke situs Blogger Anda dengan menggunakan gadget Feed bawaan atau widget HTML/JavaScript.  

Menggunakan Gadget Feed Resmi (Metode Termudah)

1. Buka Dasbor BloggerAnda .
2. Klik Tata Letak di menu sebelah kiri.
3. Temukan area sidebar atau footer dan klik Tambah Gadget.
4. Gulir ke bawah dan pilih gadget Feed .
5. Masukkan URL feed blog Anda (biasanya https://blogspot.com) dan klik Lanjutkan.
6. Sesuaikan judul (misalnya, Posting Terbaru) dan atur jumlah item yang akan ditampilkan
7. Klik Simpan.

Menggunakan Gadget HTML/JavaScript (Tampilan Kustom)

1. Buka Dasbor Blogger Anda dan buka Tata Letak.
2. Klik Tambah Gadget di tempat Anda ingin daftar tersebut muncul.
3. Pilih gadget HTML/JavaScript .
4. Tempelkan cuplikan kode JSON/JavaScript khusus untuk postingan terbaru ke dalam kotak konten untuk menampilkan thumbnail atau tanggal.
5. Klik Simpan.

Kode HTML Postingan Terbaru Blogger - Widget Recent Posts

Berikut ini Kode HTML Postingan Terbaru Blogger - Widget Recent Posts untuk dipasang di sidebar blog Blogger.

1. Layout > Add Gasget > HTML/JavaScript
2. Isi judul dengan Postingan Terbaru
3. Isi kolom content dengan kode berikut ini.

<script type="text/javascript"> function recentPosts(json) { document.write('<ul>'); for (var i = 0; i < 5; i++) { var entry = json.feed.entry[i]; var title = entry.title.$t; var url = ''; for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel == 'alternate') { url = entry.link[j].href; break; } } document.write('<li><a href="' + url + '">' + title + '</a></li>'); } document.write('</ul>'); } </script> <script src="/feeds/posts/default?alt=json-in-script&callback=recentPosts"></script>

Kode yang sudah diparse:

&lt;script type=&quot;text/javascript&quot;&gt;

function recentPosts(json) {

  document.write('&lt;ul&gt;');

  for (var i = 0; i &lt; 5; i++) {

    var entry = json.feed.entry[i];

    var title = entry.title.$t;

    var url = '';

    for (var j = 0; j &lt; entry.link.length; j++) {

      if (entry.link[j].rel == 'alternate') {

        url = entry.link[j].href;

        break;

      }

    }

    document.write('&lt;li&gt;&lt;a href=&quot;' + url + '&quot;&gt;' + title + '&lt;/a&gt;&lt;/li&gt;');

  }

  document.write('&lt;/ul&gt;');

}

&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/default?alt=json-in-script&amp;callback=recentPosts&quot;&gt;&lt;/script&gt;

Berikut adalah kode HTML dan JavaScript yang sudah diperbarui untuk menampilkan posting terbaru lengkap dengan gambar thumbnail, judul, dan link aktif.

Kode HTML & JavaScript (Dengan Gambar Thumbnail)

Salin kode di bawah ini dan masukkan ke dalam gadget HTML/JavaScript di Tata Letak Blogger Anda:

<div class="recent-posts-thumb"> <script type="text/javascript"> function showRecentPosts(json) { var maxPosts = 5; // Ubah jumlah postingan yang ingin ditampilkan di sini var noImage = "https://placehold.co"; // Gambar default jika post tidak punya thumbnail for (var i = 0; i < maxPosts; i++) { if (i == json.feed.entry.length) break; var entry = json.feed.entry[i]; var postTitle = entry.title.$t; var postUrl; // Mengambil URL Postingan for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { postUrl = entry.link[k].href; break; } } // Mengambil URL Thumbnail var thumbUrl = noImage; if (entry.media$thumbnail) { // Mengubah ukuran thumbnail bawaan Blogger menjadi lebih tajam (70x70 piksel) thumbUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s70-c/'); } else if (entry.content) { // Mencari gambar pertama di dalam konten jika thumbnail bawaan tidak ada var content = entry.content.$t; var imgTag = content.match(/<img src="(.*?)"/); if (imgTag && imgTag[1]) { thumbUrl = imgTag[1]; } } // Menampilkan HTML document.write('<div class="rp-item">'); document.write('<a href="' + postUrl + '"><img src="' + thumbUrl + '" alt="' + postTitle + '" class="rp-thumb"/></a>'); document.write('<div class="rp-title"><a href="' + postUrl + '">' + postTitle + '</a></div>'); document.write('<div style="clear: both;"></div>'); document.write('</div>'); } } </script> <script src="/feeds/posts/default?alt=json-in-script&callback=showRecentPosts"></script> </div> <!-- Gaya Tampilan (CSS) untuk merapikan layout --> <style> .recent-posts-thumb { font-family: Arial, sans-serif; font-size: 14px; } .rp-item { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dotted #eee; } .rp-item:last-child { border-bottom: none; } .rp-thumb { width: 70px; height: 70px; float: left; margin-right: 12px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; } .rp-title a { text-decoration: none; color: #333; font-weight: bold; line-height: 1.3; display: block; } .rp-title a:hover { color: #0088cc; } </style>

Kode yang sudah diparse:

&lt;div class=&quot;recent-posts-thumb&quot;&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

function showRecentPosts(json) {

  var maxPosts = 5; // Ubah jumlah postingan yang ingin ditampilkan di sini

  var noImage = &quot;https://placehold.co&quot;; // Gambar default jika post tidak punya thumbnail

  

  for (var i = 0; i &lt; maxPosts; i++) {

    if (i == json.feed.entry.length) break;

    var entry = json.feed.entry[i];

    var postTitle = entry.title.$t;

    var postUrl;

    

    // Mengambil URL Postingan

    for (var k = 0; k &lt; entry.link.length; k++) {

      if (entry.link[k].rel == 'alternate') {

        postUrl = entry.link[k].href;

        break;

      }

    }

    

    // Mengambil URL Thumbnail

    var thumbUrl = noImage;

    if (entry.media$thumbnail) {

      // Mengubah ukuran thumbnail bawaan Blogger menjadi lebih tajam (70x70 piksel)

      thumbUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s70-c/');

    } else if (entry.content) {

      // Mencari gambar pertama di dalam konten jika thumbnail bawaan tidak ada

      var content = entry.content.$t;

      var imgTag = content.match(/&lt;img src=&quot;(.*?)&quot;/);

      if (imgTag &amp;&amp; imgTag[1]) {

        thumbUrl = imgTag[1];

      }

    }

    

    // Menampilkan HTML

    document.write('&lt;div class=&quot;rp-item&quot;&gt;');

    document.write('&lt;a href=&quot;' + postUrl + '&quot;&gt;&lt;img src=&quot;' + thumbUrl + '&quot; alt=&quot;' + postTitle + '&quot; class=&quot;rp-thumb&quot;/&gt;&lt;/a&gt;');

    document.write('&lt;div class=&quot;rp-title&quot;&gt;&lt;a href=&quot;' + postUrl + '&quot;&gt;' + postTitle + '&lt;/a&gt;&lt;/div&gt;');

    document.write('&lt;div style=&quot;clear: both;&quot;&gt;&lt;/div&gt;');

    document.write('&lt;/div&gt;');

  }

}

&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/default?alt=json-in-script&amp;callback=showRecentPosts&quot;&gt;&lt;/script&gt;

&lt;/div&gt;

&lt;!-- Gaya Tampilan (CSS) untuk merapikan layout --&gt;

&lt;style&gt;

.recent-posts-thumb { font-family: Arial, sans-serif; font-size: 14px; }

.rp-item { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dotted #eee; }

.rp-item:last-child { border-bottom: none; }

.rp-thumb { width: 70px; height: 70px; float: left; margin-right: 12px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; }

.rp-title a { text-decoration: none; color: #333; font-weight: bold; line-height: 1.3; display: block; }

.rp-title a:hover { color: #0088cc; }

&lt;/style&gt;