Panduan HTML dan CSS Widget Artikel Sponsor untuk Blogger agar Blog Makin Menarik

 

BSD City, Arteesid.com. Pernah merasa tampilan blog kamu kurang menarik meski kontennya bagus? Salah satu cara membuat blog lebih profesional dan memikat pengunjung adalah dengan menambahkan widget artikel sponsor atau unggulan. Widget ini membantu blog kamu tampil lebih dinamis dan meningkatkan interaksi internal.

Manfaat Widget Artikel di Blogger

Dengan menggunakan widget ini, kamu bisa:

• Menampilkan artikel pilihan atau sponsor di halaman depan.
• Menyisipkan rekomendasi artikel di tengah konten.
• Menambahkan tampilan visual menarik untuk artikel terkait.
• Meningkatkan jumlah klik antar artikel di dalam blog.

Widget bisa ditempatkan di sidebar, atas atau bawah artikel, bahkan di tengah konten, membuat blog terlihat lebih rapi, interaktif, dan profesional.

Cara Memasang Kode HTML & CSS Widget Artikel di Blogger

Berikut langkah-langkah memasangnya:

1. Masuk ke Tata Letak Blogger

• Login ke akun Blogger.
• Pilih blog yang akan dimodifikasi.
• Masuk ke menu Tata Letak (Layout).
• Klik "Tambahkan Gadget" pada lokasi yang diinginkan.

2. Pilih HTML/JavaScript

• Pilih jenis gadget HTML/JavaScript.
• Akan muncul kolom untuk mengisi Judul dan Konten.

<style>
  .featured-widget {
    font-family: 'Segoe UI', sans-serif;
    color: #fff;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvzvXWbolqXOww2pIWn3mdpSH-Qkr6mPAu_JgVYRsxbXlyW_l2x6y2DxcB9VKXqB78kfss801brOuENSpD2FM0kLvxbhELiman-L31tO6XBikeXWAH6vJDT2cAE5Iw2v2qljGVhpxBBNqa4JK5_JrYxqsZbgaSMZX8zMcQFYHUOQthlvZ3vYgS1XzsAlU/s320/Tinihouse.jpeg') 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">SPONSORSHIP</div>
  <h2><a href="https://www.arteesid.com/2024/05/kontrakan-murah-bsd-city.html" target="_blank">Kontrakan Murah BSD City</a></h2>
  <div class="author-date"><b>Amir Mahmud</b> - Mei 28, 2025</div>

  <div class="related-posts">
    <div class="related-post">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieKhfGXzTtRZR5kIVOga5SE3OTrVxmpGaUjMqe2PEdHtkL_fskR_KJhRhHji1ywYHFVO5u7zh_0EkSt8zr3LcVZfttiuC3S3iPW9ifB1q2cpMlAOFT_-qNQa9sBb2ebXhZk389eQBG9UvSkGxiPi6dVc26pwpXK7yF7KmGR1vaJAW9PdZCxM0YoouFr2U/w400-h266-rw/Thumbnail-artees.id.webp" alt="Rumah Dijual" />
      <div class="related-post-info">
        <h4><a href="https://www.arteesid.com/2024/05/dijual-rumah-strategis-cantik-siap-huni.html" target="_blank">Dijual Rumah Strategis dan Cantik Siap Huni</a></h4>
        <span>Juni 01, 2024</span>
      </div>
    </div>
    <div class="related-post">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2hCgrE-ksF2eY-VVJlANWvVIyeZiK1KRHQkJgw0FK-CWXCkl8ABdoxA8yj31mr9qVL8yq4zjjLncPwAmOE8H7N94oos7dOyzWWypgtlNKn6diC8_Zej03h61UcGoYuDjcwpoJ-cX8eqtr36xEDS2MtsEQFR1Im0Xnwure3hyphenhyphen3HJVeBkxrjLRVkOw6vSI/w640-h640-rw/Conten%20Premium.png" alt="Peluang Cuan" />
      <div class="related-post-info">
        <h4><a href="https://www.arteesid.com/2025/01/peluang-cuan-dari-jasa-desain-dan-social-media.html" target="_blank">Peluang Cuan dari Jasa Desain dan Social Media</a></h4>
        <span>Januri 11, 2025</span>
      </div>
    </div>
    <div class="related-post">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyjxLZ2b5mIre_Eq4vK3Gv12NnFY4WuBEIY2xDSpnI8ryqbHPB86aZUCfb6lS-BR2nUkX6BWOVOjFnQvzdjzt6bTwPbUBozK0_kgwizTx0g4tpawyhoAyrc_YVmf2yu8D34D6y75wCGSlTXQq6lXkmtHpaRx0lWPKDNtWH27Euboc0Tltd7Fobcdc2pUI/w640-h360/screen%20saver%20app%20fahira%20store%20(3).png" alt="Fahirastoreid" />
      <div class="related-post-info">
        <h4><a href="https://www.arteesid.com/2025/06/fahirastoreid-destinasi-busana-muslim-ternama.html" target="_blank">Fahirastoreid: Destinasi Busana Muslim ternama</a></h4>
        <span>Juni 05, 2025</span>
      </div>
    </div></div></div>

LIHAT DEMO

Coba pasang widget ini sekarang!

Source Code: https://www.bloggerkalteng.com/2025/04/21/kode-html-dan-css-widget-artikel-unggulan-di-blogger/