Kode html Widget Artikel Terbaru yang Menarik di Blogger

Jika Anda ingin menambahkan widget artikel terbaru dengan tampilan yang menarik di blogspot Anda, Anda dapat mengikuti langkah-langkah berikut. Widget ini akan menampilkan daftar artikel terbaru dengan efek warna-warni dan transisi yang membuatnya lebih menarik.

Langkah 1: Buka Dasbor Blogger

Buka dasbor Blogger dan pilih blog yang ingin Anda modifikasi.

Langkah 2: Pilih Tata Letak

Pilih opsi "Tata Letak" dari menu di sebelah kiri.

Langkah 3: Tambahkan Gadget HTML/JavaScript Baru

Pilih area di tata letak Anda di mana Anda ingin menampilkan widget artikel terbaru. Klik pada tombol "Tambah Gadget" di area tersebut.

Langkah 4: Tambahkan Kode HTML

Dalam jendela "Tambah Gadget," pilih "HTML/JavaScript." Salin dan tempelkan kode HTML berikut ke dalam editor:

<style>
  .recent-wrapper {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    margin: 0 auto;
  }

  .recent-posts {
    list-style: none;
    padding: 0;
  }

  .recent-post {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    background-color: #fff; /* Warna latar belakang setiap post */
    transition: background-color 0.3s ease-in-out; /* Transisi warna latar belakang saat dihover */
  }

  .recent-post:hover {
    background-color: #f5f5f5; /* Warna latar belakang saat dihover */
  }

  .recent-post a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
  }

  .recent-post a:hover {
    color: #e44d26; /* Warna teks saat dihover */
  }
</style>

<div id='recent-wrapper' class='recent-wrapper'>
  <h2 style="color: #e44d26;">Artikel Terbaru</h2>
<br>
  <ul id="recent-posts" class="recent-posts"></ul>
  <script>
    //<![CDATA[
    numPosts = 5; // Jumlah posting terbaru yang ingin ditampilkan

    function recentPosts(a) {
      if (document.getElementById("recent-posts")) {
        var e = a.feed.entry, title, link, content = "", ct = document.getElementById("recent-posts");
        for (var i = 0; i < numPosts; i++) {
          for (var j = 0; j < numPosts; j++) {
            if (e[i].link[j].rel == "alternate") {
              link = e[i].link[j].href;
              break;
            }
          }
          var title = e[i].title.$t;
          content += '<li class="recent-post"><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></li>';
        }
        ct.innerHTML = content;
      }
    }

    var rcp = document.createElement('script');
    rcp.src = '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=' + numPosts + '&callback=recentPosts';
    document.getElementsByTagName('head')[0].appendChild(rcp);
    //]]>
  </script>
</div>

Langkah 5: Simpan dan Tinjau

Setelah menambahkan kode HTML, klik "Simpan" atau "Simpan Tata Letak." Lihat blog Anda untuk melihat widget artikel terbaru dengan tampilan yang menarik.

Dengan langkah-langkah ini, Anda telah berhasil menambahkan widget artikel terbaru yang memukau di blogspot Anda. Anda dapat menyesuaikan warna dan gaya sesuai keinginan Anda dengan memodifikasi nilai-nilai warna dan properti CSS lainnya dalam kode tersebut.