Kode HTML dan CSS Widget Artikel Unggulan di Blogger

Pernah merasa tampilan blog kamu terlalu datar, kurang eye-catching, atau pengunjung cepat kabur padahal artikelnya keren? Nah, salah satu cara bikin blog kamu tampil lebih menarik adalah dengan menambahkan widget artikel unggulan.

Widget ini bisa kamu pakai untuk:

Menampilkan artikel unggulan atau pilihan editor di homepage.
Mempercantik bagian tengah artikel dengan menyisipkan rekomendasi bacaan lainnya.
Memunculkan artikel terkait yang punya visual menarik, biar pengunjung betah lebih lama.
Meningkatkan interaksi internal, alias bikin pengunjung klik artikel lain di blog kamu.

Widget ini bisa diterapkan di sidebar, di bagian atas/bawah postingan, atau bahkan di tengah artikel. Hasilnya? Blog kamu akan kelihatan lebih profesional dan engaging!

Tutorial: Cara Pasang Kode HTML & CSS Widget Artikel Unggulan di Blogger

1. Masuk ke Blogger dan Buka Tata Letak (Layout)

Login ke Blogger.
Pilih blog yang kamu kelola.
Masuk ke menu Tata Letak.
Klik “Tambahkan Gadget” di posisi yang kamu inginkan (misal: atas postingan, sidebar, atau footer).

2. Pilih Gadget HTML/JavaScript

Setelah klik “Tambahkan Gadget”, pilih HTML/JavaScript.
Akan muncul kotak untuk mengisi Judul dan Konten.

3. Tempelkan Kode di Bawah Ini

Masukkan seluruh kode ini ke bagian konten gadget HTML/JavaScript:

<style>
  .featured-widget {
    font-family: 'Segoe UI', sans-serif;
    color: #fff;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfL9Q9t0L3NWTE3y9T8ohmoXZ-gf6MwyJwREe55gpInDYM62UzlJmSYdemZ7DERKJARQNiEiDad9jHgQLcSxN_tSTGsdbQkcEzqlqH93X5OaWTFHVWY7ecGusRidsevgym7RiymxaUgrwqIMP0SBdkYgP6Q_8T0sQ9-AvXNlntEGq4bFLAmX2byQBENB5/s16000-rw/graduation-2613175_1280.jpg') no-repeat center center/cover;
    padding: 60px 20px;
    border-radius: 10px;
    position: relative;
    margin-bottom: 30px;
  }

  .featured-widget .category {
    background: #2962ff;
    color: #fff;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 15px;
  }

  .featured-widget h2 a {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
  }

  .featured-widget h2 a:hover {
    text-decoration: underline;
  }

  .featured-widget .author-date {
    font-size: 14px;
    color: #ddd;
  }

  .featured-widget .author-date b {
    color: #fff;
  }

  .featured-widget .related-posts {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 10px;
  }

  .related-post {
    flex: 1;
    min-width: 200px;
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
    align-items: center;
  }

  .related-post img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
  }

  .related-post-info {
    font-size: 14px;
    color: #eee;
  }

  .related-post-info h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 5px;
  }

  .related-post-info h4 a {
    color: #fff;
    text-decoration: none;
  }

  .related-post-info h4 a:hover {
    text-decoration: underline;
  }

  .related-post-info span {
    font-size: 12px;
    color: #ccc;
  }

  @media screen and (max-width: 768px) {
    .featured-widget h2 a {
      font-size: 24px;
    }
    .featured-widget .related-posts {
      flex-direction: column;
    }
  }
</style>

<div class="featured-widget">
  <div class="category">HYPE</div>
  <h2><a href="https://www.bloggerkalteng.id/2023/12/mempersiapkan-diri-tinggal-di-kota-tips.html" target="_blank">Mempersiapkan Diri Tinggal di Kota: Tips untuk Mahasiswa Baru Lulus</a></h2>
  <div class="author-date"><b>Debu Yandi</b> - December 13, 2023</div>

  <div class="related-posts">
    <div class="related-post">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4Pw_40lx0alqAm6pWeueViOQYkn1wUlfsacPgXsvNYof3FEHuCPdQZQqaoM_QzIiM4GjRPHM1YgjSjc2XIUIJ7ogYwlIgM8QNVS6LumnKXr4Guh3bFkVbJcKp0x536OCWnEUmTZeyXNMWhma9Q1gOygHzMgwMDAQtywUpG0dMf_ge-4t5n3xXmfhgEBx/s16000-rw/man-1867800_1280.jpg" alt=“Branding Diri”>
      <div class="related-post-info">
        <h4><a href="https://www.bloggerkalteng.id/2023/12/11-langkah-membranding-diri-sendiri.html" target="_blank">11 Langkah Membranding Diri Sendiri</a></h4>
        <span>December 14, 2023</span>
      </div>
    </div>
    <div class="related-post">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1NqDyrBigSrb_7jMtak9WhB7R2Rn6kZm7vY9KGSC8Do_gWYqzf3obF3rCz2B9Mk6qZT450otrL4UXKqHtCf6WVyi-X2h8Xu-g6u-YY_T6WygFD8JZtMgCaPA2VhZRxxqtI9ATCFNHJYwOj85Quu85NQOkVo1mcehhkLU7NNlI36QUbFQsD_HUK8BRrs_v/s16000-rw/pokemon-1543556_1280.jpg" alt=“Mahasiswa>
      <div class="related-post-info">
        <h4><a href="https://www.bloggerkalteng.id/2023/12/mahasiswa-rantau-hemat-dong-jangan-suka.html" target="_blank">Mahasiswa Rantau: Hemat Dong, Jangan Suka Nongkrong Tidak Jelas</a></h4>
        <span>December 13, 2023</span>
      </div>
    </div>
    <div class="related-post">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJeFGQvBOB2f3hdwLSgeEGbpfuADKq0dI8c7XzxKHRuRImluvSHcDyfFSjhphSbmiBR42WqDyqmmzRCTy3zsEiUFQxfoOFDJBTnDcoitM7w9VysS8Zn4eyo8QiLKGSd3IHV-lJKakNbYYrHl8SkWzjP_Rvj565mqSn8h7g6lqfkHaRsLCOcQM-I868Zre/s16000-rw/touch-screen-1023966_1280.jpg" alt=“Medsos>
      <div class="related-post-info">
        <h4><a href="https://www.bloggerkalteng.id/2023/12/bagaimana-bersikap-bijak-di-media-sosial.html" target="_blank">Bagaimana Bersikap Bijak di Media Sosial?</a></h4>
        <span>December 12, 2023</span>
      </div>
    </div>
  </div>
</div>