Tips Blogger Membuat Artikel Lainnya seperti Blog Ngerapik Sederhana dan Minimalis Responsive Untuk Handphone

Malam sobat blogger, bikin artikel lagi nih. Karena tadinya tempat blok tersebut disi oleh Code Share yang tampaknya kurang berguna peletakan posisinya. jadi deh minta bantuan Mode AI mengatasinya. Lalu muncul lah ide membuat artikel lainnya dengan kondisi yang minimalis warna adem, awalnya Black tuh begroundnya tekst serasa memedihkan mata..ckckck.. minta perubahan code, edit teroos sampai bodoh..ckkk.. Alhasil, ya lumayan lah untuk memperindah dan mempercantik blog ngerapik ini.

Widget ini peletakan code nya semau teman teman bloger aja, dirasa pas tempatnya di Edit HTML template blog sobat semua. Code ini saya memang khusus untuk menampilkan Label tertentu, jadi sebelum menerapkannya yakinkan blog sobat memiliki label pada artikelnya. Langsung saja deh.. Cekidot Wae!

1. Edit html Template sobat lalu cari tempat terbaik peletakan code utama dibawah ini;

Kode Utama Edit HTML:

</> Code Utama

<b:if cond='data:blog.pageType == "item"'>      
<div class='elegant-news-section'>
  <div class='eng-header'>
    <h3 class='eng-header-title'>Artikel Lainnya</h3>
    <span class='eng-header-line'/>
  </div>
  
  <div class='eng-grid' id='custom-news-grid'>
    <p style='color:#999;font-size:12px;font-style:italic;padding:10px;'>Memuat artikel pilihan...</p>
  </div>
</div>

function getElegantCards(json) {
    var html = "";
    var entries = json.feed.entry || [];
    
    if (entries.length === 0) {
      document.getElementById('custom-news-grid').innerHTML = "<p style='color:#999;font-size:12px;padding:10px;'>Belum ada artikel di kategori ini.</p>";
      return;
    }

for (var i = 0; i < Math.min(entries.length, jumlahKartu); i++) {
      var entry = entries[i];
      var title = entry.title.$t;
      var url = "";
      var imgUrl = "https://placehold.co";
      
      for (var j = 0; j < entry.link.length; j++) {
        if (entry.link[j].rel == 'alternate') {
          url = entry.link[j].href;
          break;
        }
      }
      
      if ('media$thumbnail' in entry) {
        imgUrl = entry.media$thumbnail.url.replace('/s72-c/', '/w400-h250-c/');
      }
      
      html += "<div class='eng-card'>";
      html += "<a href='" + url + "' title='" + title + "'>";
      html += "<div class='eng-thumb-wrapper'><img src='" + imgUrl + "' alt='" + title + "'/></div>";
      html += "<div class='eng-body'>";
      html += "<h4 class='eng-title'>" + title + "</h4>";
      html += "</div>";
      html += "</a>";
      html += "</div>";
    }
    document.getElementById('custom-news-grid').innerHTML = html;
  }

(function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // Menggunakan HTTPS absolut untuk menghindari Mixed Content Block di browser
    var blogHost = window.location.hostname;
    var feedUrl = "https://" + blogHost + "/feeds/posts/default";
    
    if (namaLabelKalian !== "") {
      feedUrl += '/-/' + encodeURIComponent(namaLabelKalian);
    }
    script.src = feedUrl + '?alt=json-in-script&callback=getElegantCards&max-results=' + jumlahKartu;
    document.getElementsByTagName('head')[0].appendChild(script);
  })();
  //]]>
</script>
</b:if>

2. CNTRL F lagi sekarang cari ]]</b:skin> tempat code CSS ini diatasnya;

Kode bagian CSS:

</> Bagian CSS

/* Container Utama */
.elegant-news-section {
  display: block !important;
  clear: both !important;
  margin: 35px auto !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Header Tipografi Minimalis */
.eng-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 10px !important;
}
.eng-header-title {
  color: #0f172a !important; /* Warna Gelap Mewah Klasik */
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
}
.eng-header-title::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -11px !important;
  width: 50px !important;
  height: 2.5px !important;
  background-color: #3b82f6 !important; /* Aksen Biru Safir tipis di bawah judul */
}

/* Tata Letak Grid Bersih */
.eng-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Desain Kartu Tanpa Kotak Tebal */
.eng-card {
  background: transparent !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}
.eng-card a {
  text-decoration: none !important;
  display: block !important;
}

/* Bingkai Gambar dengan Efek Smooth Zoom */
.eng-thumb-wrapper {
  width: 100% !important;
  height: 110px !important;
  overflow: hidden !important;
  border-radius: 6px !important; /* Lengkungan sudut halus modern */
  background-color: #f1f5f9 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.3s ease !important;
}
.eng-thumb-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

/* Efek Hover Studio Kelas Dunia */
.eng-card:hover .eng-thumb-wrapper img {
  transform: scale(1.05) !important; /* Gambar membesar sedikit dengan anggun saat disentuh */
}

/* Ruang Teks Judul */
.eng-body {
  padding: 10px 1px 0 1px !important;
}

/* Tipografi Judul yang Sangat Rapi */
.eng-title {
  color: #334155 !important; /* Warna Slate Grey kalem di mata */
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  height: 54px !important; /* Mengunci tinggi wadah agar deretan kartu sejajar lurus */
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important; /* Batasi judul kepanjangan maksimal hanya 3 baris */
  -webkit-box-orient: vertical !important;
  text-align: left !important;
}
.eng-card:hover .eng-title {
  color: #3b82f6 !important; /* Judul melunak menjadi warna biru safir saat di-hover */
}

/* Sinkronisasi Layar Ponsel */
@media screen and (max-width: 768px) {
  .eng-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .eng-thumb-wrapper {
    height: 100px !important;
  }
  .eng-card:last-child {
    display: none !important; /* Menyembunyikan item ganjil ke-5 di HP agar simetris berpasangan */
  }
}

3. Rubah dan ganti Label sesuai Blogger teman teman pada "var namaLabelKalian = "website"; // var jumlahKartu = 5";

4. Simpan Template, Selesai dah

Semoga artikel ini bermanfaat unutk mempercantik dan memperganteng blog teman-teman semua. Salam Ngerapik Blog..!!

Tips Blogger Membuat Artikel Lainnya seperti Blog Ngerapik Sederhana dan Minimalis Responsive Untuk Handphone

Posting Komentar

Formulir Kontak