Tutorial Cara Membuat Rekomendasi Artikel dengan Thumbnail Ketupat Bernomor dan Efect Mengembang, Berbinar Saat Di arahkan Mouse

Mencari cara untuk meningkatkan pageview blog teman teman blogger semua saat ini? Menggunakan tutorial blogger yang tepat untuk memasang widget blogger interaktif adalah solusi terbaik yang bisa teman teman coba.

Sebagai seorang pemilik blog dan website, salah satu tantangan terbesar adalah mempertahankan pengunjung agar tidak langsung pergi setelah membaca satu artikel. Ketika bounce rate tinggi, reputasi SEO blog di mata Google bisa menurun. Oleh karena itu, kita semua membutuhkan elemen visual yang menarik perhatian pembaca untuk mengklik artikel lainnya.

Dalam panduan kali ini, saya akan coba mengulas secara tuntas bagaimana cara membuat widget rekomendasi artikel dengan tampilan super unik. Saya akan menggunakan desain thumbnail berbentuk ketupat, lengkap dengan nomor urut, serta efek animasi mengembang dan berbinar saat kursor mouse mendekat. Semua ini bisa teman teman blogger buat dengan mudah menggunakan widget html kode yang ringan dan ramah SEO.

gambar diambil dari tangkapan layar dari blog BaktiSite

Untuk melihat demo pengaplikasianya, silahkan berkunjung ke Sini.,

Mengapa Desain Visual Widget Mempengaruhi CTR

Sebelum kita masuk ke bagian teknis dan mempraktikkan tutorial kode script ini, mari kita pahami terlebih dahulu aspek psikologi visual dari pengunjung website. Manusia adalah makhluk visual yang sangat mudah terdistraksi oleh bentuk-bentuk geometris yang tidak biasa.

Sebagian besar blog saat ini menggunakan thumbnail berbentuk persegi atau lingkaran standar. Desain tersebut sudah terlalu umum sehingga sering diabaikan oleh mata pengunjung, sebuah fenomena yang biasa disebut dengan banner blindness. Dengan mengubah bentuk thumbnail menjadi ketupat atau diamond shape, teman teman blogger memberikan kejutan visual yang menyegarkan.

Selain bentuk geometris yang unik, efek interaksi atau hover effect juga memegang peranan krusial. Efek mengembang dan pancaran cahaya lembut saat mouse melintas memberikan umpan balik instan kepada pengguna bahwa elemen tersebut dapat diklik. Interaksi mikro seperti ini terbukti mampu meningkatkan Click-Through Rate hingga dua kali lipat dibanding widget statis biasa.

Kelebihan Menggunakan Kode HTML dan CSS Kustom

Banyak blogger tergoda menggunakan plugin pihak ketiga atau script eksternal yang rumit untuk menampilkan artikel terkait. Padahal, metode tersebut seringkali membebani loading blog. Kecepatan loading adalah salah satu faktor penentu dalam algoritma Google Search.

Dengan menerapkan kode script murni berbasis HTML dan CSS yang saya bagikan di bawah, blog teman teman akan tetap melesat cepat. Kode ini tidak memerlukan pustaka Javascript eksternal yang berat. Semuanya diproses secara native oleh browser pengunjung menggunakan teknologi CSS3 modern.

Selain ramah terhadap kecepatan blog, kode ini juga sepenuhnya responsif. Artinya, tampilan ketupat yang presisi akan tetap terlihat sempurna baik saat diakses melalui smartphone layar kecil, tablet, maupun perangkat komputer desktop.

Langkah Memasang Widget Rekomendasi Artikel di Blogspot

Untuk menerapkan widget ini di platform blogspot, teman teman blogger hanya perlu melakukan beberapa langkah mudah melalui dasbor blogger teman teman. Pertama, silakan masuk ke akun Blogger terlebih dahulu. Setelah berada di dasbor, masuk ke menu Tata Letak atau Layout.

Langkah kedua, pilih bagian sidebar atau bagian bawah postingan tempat teman teman blogger ingin menampilkan rekomendasi ini. Klik opsi Tambahkan Gadget atau Add a Gadget. Dari daftar pilihan yang muncul, pilih opsi HTML/JavaScript.

Langkah ketiga, salin seluruh kode kombinasi HTML dan CSS yang sudah saya siapkan di bawah ini. Tempelkan kode tersebut ke dalam kolom konten yang disediakan, lalu klik Simpan. teman teman blogger kini siap melihat perubahan luar biasa pada tampilan blog teman teman. huahahahahaa,,,

Kode Script Widget Rekomendasi Ketupat Berbinar

Kali ini saya akan membagikan dua versi kode, yang pertama standart Ai saya tempatkan pada KOTAK 1 nantinya, dan saya rombak penempatannya dan kodenya, akan di tempatkan pada KOTAK 2. Langsung saja cara pengaplikasiannya:

Berikut adalah widget html kode lengkap yang bisa langsung teman teman blogger gunakan. Kode ini sudah dioptimalkan agar mudah dimodifikasi warna dan ukurannya sesuai dengan tema blog.

KOTAK 1

</> Kode Kotak 1

<pre><code><style>
.ketupat-recommendation {
  font-family: 'Segoe UI', Roboto, sans-serif;
  margin: 20px 0;
  padding: 15px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.ketupat-title {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 25px;
  border-left: 4px solid #ff5722;
  padding-left: 10px;
}
.ketupat-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}
.ketupat-holder {
  position: relative;
  width: 80px;
  height: 80px;
  margin-right: 25px;
  flex-shrink: 0;
}
.ketupat-thumb {
  width: 55px;
  height: 55px;
  background: #ddd;
  margin: 12px;
  transform: rotate(45deg);
  overflow: hidden;
  border: 3px solid #ff5722;
  box-shadow: 0 0 0 rgba(255, 87, 34, 0);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ketupat-thumb img {
  width: 140%;
  height: 140%;
  object-fit: cover;
  transform: rotate(-45deg) translate(-15%, -15%);
}
.ketupat-number {
  position: absolute;
  top: 0;
  left: 0;
  background: #2c3e50;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  z-index: 2;
  border: 2px solid #fff;
}
.ketupat-info {
  flex-grow: 1;
}
.ketupat-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 5px 0;
  color: #2c3e50;
  transition: color 0.3s ease;
}
.ketupat-item:hover .ketupat-thumb {
  transform: rotate(45deg) scale(1.15);
  border-color: #ff9800;
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.8);
}
.ketupat-item:hover .ketupat-text {
  color: #ff5722;
}
</style>

<div class="ketupat-recommendation">
  <div class="ketupat-title">ARTIKEL PILIHAN UNTUK ANDA</div>
  
  <a href="URL_ARTIKEL_1" class="ketupat-item">
    <div class="ketupat-holder">
      <div class="ketupat-number">01</div>
      <div class="ketupat-thumb">
        <img src="URL_GAMBAR_1" alt="Thumbnail 1" />
      </div>
    </div>
    <div class="ketupat-info">
      <h3 class="ketupat-text">Cara Mengoptimalkan Kecepatan Loading Blogspot Tanpa Mengurangi Kualitas Gambar</h3>
    </div>
  </a>

<a href="URL_ARTIKEL_2" class="ketupat-item">
    <div class="ketupat-holder">
      <div class="ketupat-number">02</div>
      <div class="ketupat-thumb">
        <img src="URL_GAMBAR_2" alt="Thumbnail 2" />
      </div>
    </div>
    <div class="ketupat-info">
      <h3 class="ketupat-text">Panduan Lengkap SEO On-Page untuk Pemula Agar Cepat Masuk Halaman Pertama Google</h3>
    </div>
  </a>

<a href="URL_ARTIKEL_3" class="ketupat-item">
    <div class="ketupat-holder">
      <div class="ketupat-number">03</div>
      <div class="ketupat-thumb">
        <img src="URL_GAMBAR_3" alt="Thumbnail 3" />
      </div>
    </div>
    <div class="ketupat-info">
      <h3 class="ketupat-text">Strategi Memilih Niche Blog yang Paling Menguntungkan dengan Kompetisi Rendah</h3>
    </div>
  </a>
</div></code></pre>

Pastikan teman teman blogger mengganti bagian URL_ARTIKEL_X dengan link artikel aktif di blog teman teman ya.. Jangan lupa juga untuk mengganti URL_GAMBAR_X dengan tautan gambar thumbnail yang relevan agar tampilannya presisi.

Berikut adalah widget html kode lengkap yang bisa langsung teman teman blogger gunakan. Kode ini sudah dioptimalkan agar mudah dimodifikasi warna dan ukurannya sesuai dengan tema blog teman teman semua.

KOTAK 2

</> Kode Kotak 2

<div class="box-popular-ketupat-final-safe">
  
  
  <div class="ketupat-header-flex-safe">
    <h2 class="horizontal-widget-title-safe">Rekomendasi Artikel</h2>
    
    
    <div class="ketupat-nav-buttons-safe">
      <button class="arrow-btn-nav-safe" onclick="document.getElementById('grid-ketupat-horizontal-safe-4').scrollBy({ left: -240, behavior: 'smooth' })" type="button">❮</button>
      <button class="arrow-btn-nav-safe" onclick="document.getElementById('grid-ketupat-horizontal-safe-4').scrollBy({ left: 240, behavior: 'smooth' })" type="button">❯</button>
    </div>
  </div>
  
  
  <div class="slider-viewport-ketupat-safe">
    <div id="grid-ketupat-horizontal-safe-4"></div>
  </div>
</div>

.ketupat-header-flex-safe {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding-bottom: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.horizontal-widget-title-safe {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  margin: 0 !important;
  padding-bottom: 5px !important;
  border-bottom: 2px solid #008b8b !important;
}

/* GAYA TOMBOL TOMBOL NAVIGASI */
.ketupat-nav-buttons-safe {
  display: flex !important;
  gap: 6px !important;
}
.arrow-btn-nav-safe {
  background: #008b8b !important; /* Warna Hijau Toska tema Anda */
  color: #ffffff !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
  user-select: none !important;
}
/* Efek saat kursor diarahkan ke tombol panah (Berubah warna jadi Oranye Blogspot) */
.arrow-btn-nav-safe:hover {
  background: #f57c00 !important; /* Warna Oranye Khas Blogger/Blogspot */
  box-shadow: 0 2px 6px rgba(245, 124, 0, 0.4) !important; /* Efek cahaya oranye tipis */
}

/* Efek sedikit menggelap saat tombol diklik aktif di HP */
.arrow-btn-nav-safe:active {
  background: #e65100 !important; /* Oranye gelap saat ditekan */
}

.slider-viewport-ketupat-safe {
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* TATA LETAK JALUR SLIDER DESKTOP (Kunci Tampil 4 Kolom, Sisanya Sembunyi ke Kanan) */
#grid-ketupat-horizontal-safe-4 {
  display: flex !important; 
  overflow-x: auto !important; 
  scroll-behavior: smooth !important;
  white-space: nowrap !important;
  gap: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  
  /* Sembunyikan scrollbar agar rapi */
  -ms-overflow-style: none !important;  
  scrollbar-width: none !important; 
}
#grid-ketupat-horizontal-safe-4::-webkit-scrollbar {
  display: none !important;
}

/* Lebar per item artikel di KOMPUTER (Dipaksa pas membagi 4 kolom) */
.h-ketupat-item-safe {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 10px 0 !important; 
  flex: 0 0 calc(25% - 12px) !important; /* Pas 4 kolom di layar monitor */
  max-width: calc(25% - 12px) !important;
}

/* --- ATURAN GESER DI LAYAR HP --- */
@media (max-width: 768px) {
  .h-ketupat-item-safe {
    flex: 0 0 45% !important; /* Pas 2 kolom lebih sedikit di HP */
    max-width: 45% !important;
  }
}

/* TAMPILAN DETAIL ITEM KETUPAT */
.h-thumb-wrapper-safe {
  position: relative !important;
  width: 90px !important;
  height: 90px !important;
  margin-bottom: 12px !important;
}

/* Lingkaran Angka */
.h-number-safe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 22px !important;
  height: 22px !important;
  background-color: #008b8b !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: bold !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

/* Bingkai Ketupat */
.h-shape-safe {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 62px !important;
  height: 62px !important;
  overflow: hidden !important; 
  transform: rotate(45deg) !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.06) !important;
  background: #ffffff !important;
  z-index: 2 !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.h-shape-safe img {
  width: 145% !important;
  height: 145% !important;
  object-fit: cover !important;
  transform: rotate(-45deg) scale(1.1) !important;
  transition: transform 0.3s ease-in-out !important;
}

/* EFEK HOVER */
.h-ketupat-item-safe:hover .h-shape-safe {
  border-color: #008b8b !important;
  box-shadow: 0 0 14px rgba(0, 139, 139, 0.7) !important;
}
.h-ketupat-item-safe:hover .h-shape-safe img {
  transform: rotate(-45deg) scale(1.35) !important; 
}

/* Judul Artikel */
.h-title-safe {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #333333 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; 
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.h-ketupat-item-safe:hover .h-title-safe {
  color: #008b8b !important;
}
</style>

function generateHorizontalKetupatSafe(json) {
  const container = document.getElementById('grid-ketupat-horizontal-safe-4');
  if(!container) return;
  let htmlOutput = '';
  const entries = json.feed.entry || [];

for (let i = 0; i < entries.length; i++) {
    const entry = entries[i];
    let title = entry.title.$t;
    let url = '';
    
    for (let j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel === 'alternate') { url = entry.link[j].href; break; }
    }
    let imgUrl = defaultImageHorizontalSafe;
    if (entry.media$thumbnail) {
      imgUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s150-c/');
    }
    let rankNumber = i + 1;

htmlOutput += `
      <a class="h-ketupat-item-safe" href="${url}">
        <div class="h-thumb-wrapper-safe">
          <div class="h-number-safe">${rankNumber}</div>
          <div class="h-shape-safe">
            <img src="${imgUrl}" alt="${title}" title="${title}" loading="lazy"/>
          </div>
        </div>
        <h3 class="h-title-safe">${title}</h3>
      </a>
    `;
  }
  container.innerHTML = htmlOutput;
}

document.write('<script src="/feeds/posts/default?alt=json-in-script&callback=generateHorizontalKetupatSafe&max-results=' + jumlahTampilHorizontalSafe + '"><\/script>');
</script>

Tidak ada Perubahan apa apa pada kode Kotak 2, karena langsung mengambil artikel secara otomatis dari LABEL blog, namun untuk merubah banyaknya artikel yang muncul silahkan ganti pada kode: const jumlahTampilHorizontalSafe = 8; //

Analisis Cara Kerja Efek Mengembang dan Berbinar

Mari kita bedah secara singkat bagaimana efek transisi ini bekerja di browser pengunjung. Kunci utama pembentukan thumbnail berbentuk ketupat terletak pada properti transform rotate sebesar 45 derajat pada container gambar.

Agar gambar di dalamnya tidak ikut miring dan tetap tegak presisi, kita melakukan rotasi balik sebesar minus 45 derajat pada tag image. Teknik ini menghasilkan potongan bentuk ketupat yang bersih dan simetris tanpa memerlukan software editor gambar tambahan.

Sedangkan untuk efek berbinar, kita memanfaatkan properti box-shadow dengan nilai blur radius yang cukup lebar. Saat kursor mouse menyentuh area artikel, nilai box-shadow bertransisi dari tanpa bayangan menjadi bayangan berwarna jingga terang dengan animasi yang sangat halus berkat properti transition 0.4 detik.

Manfaat Memasang Widget Rekomendasi di Blog

Manfaat utama dari penerapan widget modis ini adalah penurunan bounce rate yang signifikan. Ketika pengunjung merasa nyaman dan terstimulasi oleh visual blog teman teman, mereka akan bertahan lebih lama menjelajahi halaman demi halaman.

Dari sudut pandang optimasi mesin pencari, durasi kunjungan atau dwell time yang tinggi memberikan sinyal positif kepada algoritma Google. Google akan menilai bahwa konten yang teman teman blogger sajikan sangat relevan dan disukai oleh pengguna internet.

Selain itu, widget ini juga membantu mempercepat proses pengindeksan artikel-artikel lama teman teman blogger. Struktur link internal yang kuat memudahkan robot crawler mesin pencari untuk merayapi seluruh arsip tulisan teman teman blogger dengan lebih efektif.

Pertanyaan yang Sering Diajukan Seputar Widget

Apakah widget rekomendasi artikel ini aman untuk kelayakan Google AdSense?

Tentu saja sangat aman karena widget ini murni menggunakan HTML dan CSS standar tanpa melanggar kebijakan penempatan iklan apa pun dari Google.

Apakah widget ini bisa dipasang di platform selain Blogspot seperti WordPress?

Sangat bisa. Teman teman blogger cukup menambahkan blok Custom HTML pada editor Gutenberg WordPress teman teman dan menempelkan baris kode yang sama ke dalamnya.

Bagaimana cara mengubah warna bingkai ketupat agar senada dengan logo blog saya?

Teman teman blogger hanya perlu mencari kode warna heksadesimal seperti #ff5722 pada bagian CSS di atas, lalu menggantinya dengan kode warna pilihan teman teman sendiri.

Kesimpulan dan Langkah Strategis Selanjutnya

Memiliki blog dengan trafik tinggi membutuhkan konsistensi dalam menyajikan konten berkualitas dan inovasi dalam menyajikan tampilan antarmuka. Dengan mempraktikkan tutorial kali ini, teman teman blogger semua selangkah lebih maju dalam memberikan pengalaman pengguna terbaik.

Jangan ragu untuk terus bereksperimen dengan kombinasi warna dan transisi kode yang berbeda. Selamat mencoba memasang widget rekomendasi artikel "Tutorial Cara Membuat Rekomendasi Artikel dengan Thumnail Ketupat Bernomor dan Efect Mengembang, Berbinar Saat Di arahkan Mouse" ini dan rasakan peningkatan interaksi pengunjung serta CTR blog teman teman blogger secara nyata mulai sekarang.

Ahir kata saya ucapkan terimakasih telah berkunjung ke blog sederhana saya ini, Ngerapik Blog. Semoga artikel ini bermanfaat buat teman teman blogger yang berkreasi memodifikasi blog teman teman blogger semua menjadi lebih cantik dan ganteng.

Meta Hashtag: #TutorialBlogger #WidgetBlogger #Blogspot #DesainWeb #HTMLkode #ScripHTML #SEOIndonesia #WidgetThumbnailKetupat #NgerapikBlog #BaktiSiteBlog