Tutorial Membuat Menu berita Ala Ngerapik Blog dengan Kategori Feed 2 Label Blog yang berbeda

Artikel kali ini saya akan membagikan kode yang sangat menarik untuk di aplikasikan di blogger kesayangan teman teman semua. Widget ini membuat blog kita menjadi lebih menarik dan elegan menurut saya teman teman gak tau menurut sobat sekalian. Binggung mau kasih nama apa jadi saya namakan "Menu berita Ala Ngerapik Blog dengan Kategori Feed 2 Label Blog yang berbeda" saja lah dikarenakan kode ini menampilkan pemanggilan feed dari dua jenis Label artikel blog kita yang berbeda. Disini saya menampilkan label blog My Histori dan tutorial blog Ngerapik. Nanti teman teman blogger semua sesuakan saja dengan label masing masing. Untuk hasil dari penerapan kode akan nampak seperti gambar dibawah ini:

Malam ini, koneksi internet di kontrakan saya lemot bangget euy sobat maklum comot sana sini yang penting bisa share artikel, wkkk 😅😂! Untuk teman teman yang ingin mengaplikasikan dan menerapkannya di blog kesayangan, langsung saja caranya cekidot wae!

PENERAPAN KODE HTML

Untuk penerapannya masuk ke Mode Edit HTML Template sobat blogger semua ya, dengan menekan CNTL F dan cari kode <main id='main-wrapper'> (kalau di blog saya menggunakan template Starter Ngerapik Blog, untuk letak teman teman disesuiakan saja) Biasanya kode tersebut tepat berada di atas kode </header>, kode yang saya bagikan di tempel tepat di bawah kode <main id='main-wrapper'> ya! saya akan membagi kode menjadi dua kotak kode agar tidak berantakan saat diaplikasikan, dengan cara Salin dan Tempel Kode Kotak pertama dahulu, lalu dilanjutkan tempel Kode Kotak kedua tepat dibawah Kode Kotak pertama. Berikut dibawah ini kodenya:

Kode Kotak Pertama:

</> Kotak 1

<b:section class='absolute-perfect-section' id='absolute-perfect-section' maxwidgets='1' showelement='yes'>
  <b:widget id='HTML92' locked='false' title='Absolute Perfect Layout' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'/>
    </b:widget-settings>
    <b:includable id='main'>
      
      
      <style type='text/css'>
        .clean-blog-layout {
          display: grid;
          grid-template-columns: 2fr 1fr;
          gap: 30px;
          max-width: 1200px;
          margin: 20px auto;
          padding: 0 15px;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          align-items: start; /* Mengunci kedua kolom rata atas dari titik 0 px */
        }
        
        /* Bagian Kiri (Label: My Histori) */
        .left-news-section { 
          background: #ffffff; 
          border-radius: 8px; 
        }
        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          border-bottom: 2px solid #f0f0f0;
          padding-bottom: 10px;
          height: 40px;
        }
        .section-header h2 { font-size: 22px; color: #333; margin: 0; font-weight: 700; }
        .section-header .view-all { color: #0066cc; text-decoration: none; font-size: 14px; }
        
        /* Artikel Utama Besar Kiri */
        .main-post-large {
          position: relative;
          border-radius: 12px;
          overflow: hidden;
          margin-bottom: 25px;
          height: 380px;
          background: #eee;
        }
        .main-post-large img { width: 100%; height: 100%; object-fit: cover; }
        .main-post-large .overlay-content {
          position: absolute;
          bottom: 0; left: 0; right: 0;
          background: linear-gradient(transparent, rgba(0,0,0,0.85));
          padding: 30px;
          color: #fff;
        }
        .overlay-content h3 { margin: 5px 0 0 0; font-size: 26px; line-height: 1.3; }
        .overlay-content h3 a { color: #fff; text-decoration: none; }
        
        /* 3 Artikel Bawah Kiri */
        .sub-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .sub-post-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; background: #eee; }
        .sub-post-card h4 { margin: 10px 0 0 0; font-size: 15px; line-height: 1.4; height: 42px; overflow: hidden; }
        .sub-post-card h4 a { color: #222; text-decoration: none; font-weight: 600; }
        
        /* Bagian Kanan (Label: tutorial) - SEJAJAR TANPA RUANG KOSONG */
        .right-news-section {
          background: #ffffff;
          border-radius: 8px;
          padding-top: 0px; /* Diubah menjadi 0px agar nempel rata lurus dengan judul kiri */
          margin-top: 0px;  /* Menghapus semua sisa sela kosong pemicu gap */
        }
        .sidebar-grid { display: flex; flex-direction: column; gap: 25px; }
        .sidebar-card { display: flex; flex-direction: column; }
        .sidebar-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; background: #eee; }
        .sidebar-card h4 { margin: 10px 0 0 0; font-size: 15px; line-height: 1.4; height: 42px; overflow: hidden; }
        .sidebar-card h4 a { color: #222; text-decoration: none; font-weight: 600; }
        
        /* Responsif Screen Tablet HP */
        @media (max-width: 900px) {
          .clean-blog-layout { grid-template-columns: 1fr; }
          .right-news-section { margin-top: 20px; }
          .sub-posts-grid, .sidebar-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
        }
        @media (max-width: 500px) {
          .sub-posts-grid, .sidebar-grid { grid-template-columns: 1fr; }
        }
      </style>

Kode Kotak Kedua:

</> Kotak 2

<section class='right-news-section'>
          <div class='sidebar-grid' id='right-sidebar-posts'/>
        </section>

</div>

<script type='text/javascript'>
      //<![CDATA[
      (function() {
        var host = window.location.protocol + "//" + window.location.hostname;
        var labelKiri = "My Histori"; 
        var labelKanan = "tutorial";

// Pembersih URL Generasi Baru & Lama Blogger (Paksa Gambar Kualitas Asli / Anti Blur)
        function bersihkanGambarHD(url_mentah) {
          if (!url_mentah) return 'https://placehold.co';
          
          var file_url = url_mentah;
          
          // Ganti parameter w (width) h (height) bawaan thumbnail blogger generasi baru ke s1600 (resolusi original)
          if(file_url.indexOf('/w') !== -1 && file_url.indexOf('-h') !== -1) {
            file_url = file_url.replace(/\/w[0-9]+-h[0-9]+[^/]*\//, '/s1600/');
          } else {
            // Ganti pemotong s72-c, s150-c bawaan sistem blogger lama ke s1600
            file_url = file_url.replace(/\/s[0-9]+[^/]*\//, '/s1600/');
          }
          
          // Menghilangkan parameter pelengkap kompresi jika ada di ujung string penamaan
          return file_url;
        }

// Ambil Data Kolom Kiri
        var urlKiri = host + '/feeds/posts/summary/-/' + encodeURIComponent(labelKiri) + '?alt=json&max-results=4';
        fetch(urlKiri)
          .then(function(r) { return r.json(); })
          .then(function(d) {
            var entries = d.feed.entry || [];
            var lBox = document.getElementById('left-large-post');
            var sBox = document.getElementById('left-sub-posts');
            
            entries.forEach(function(e, i) {
              var title = e.title.$t;
              var link = e.link.find(function(l) { return l.rel === 'alternate'; }).href;
              var img = e.media$thumbnail ? bersihkanGambarHD(e.media$thumbnail.url) : 'https://placehold.co';
              
              if(i === 0) {
                lBox.innerHTML = '<div class="main-post-large"><img src="'+img+'" alt="'+title+'"/><div class="overlay-content"><h3><a href="'+link+'">'+title+'</a></h3></div></div>';
              } else {
                sBox.innerHTML += '<div class="sub-post-card"><a href="'+link+'"><img src="'+img+'" alt="'+title+'"/></a><h4><a href="'+link+'">'+title+'</a></h4></div>';
              }
            });
          });

// Ambil Data Kolom Kanan
        var urlKanan = host + '/feeds/posts/summary/-/' + encodeURIComponent(labelKanan) + '?alt=json&max-results=3';
        fetch(urlKanan)
          .then(function(r) { return r.json(); })
          .then(function(d) {
            var entries = d.feed.entry || [];
            var rBox = document.getElementById('right-sidebar-posts');
            
            entries.forEach(function(e) {
              var title = e.title.$t;
              var link = e.link.find(function(l) { return l.rel === 'alternate'; }).href;
              var img = e.media$thumbnail ? bersihkanGambarHD(e.media$thumbnail.url) : 'https://placehold.co';
              
              rBox.innerHTML += '<div class="sidebar-card"><a href="'+link+'"><img src="'+img+'" alt="'+title+'"/></a><h4><a href="'+link+'">'+title+'</a></h4></div>';
            });
          });
      })();
      //]]>
      </script>

</b:includable>
  </b:widget>
</b:section>

PERUBAHAN KODE HTML

Silahkan teman teman semua cari dan rubah kode dibawah ini sesuai dengan keinginan selera teman teman blogger semua.

Ganti dan rubah kode:

<div class='section-header'>
<h2>Car News</h2>
<a class='view-all' href='/search/label/My%20Histori'>View all</a>
</div> // sesuai keinginan sobat blogger semuanya

Ganti dan rubah kode:

var labelKiri = "My Histori";

var labelKanan = "tutorial"; // sesuai Label blog sobat blogger semuanya

Ganti dan rubah kode:

var urlKiri = host + '/feeds/posts/summary/-/' + encodeURIComponent(labelKiri) + '?alt=json&max-results=4'; // sesuaikan jumlah yang ingin ditampilkan oleh sobat blogger semuanya

SIMPAN EDIT HTML Template

Nah, mudah bukan penerapnnya teman teman.. semoga dengan adanya menu baru ini lebih mempercantik dan memperganteng tampilan blog teman teman semua. Semoga artikel ini bermanfaat dan apabila ada yang ingin ditanyakan silahkan berkomentar dengan baik di kotak komentar yang telah disediakan dibawah. Akhir kata saya ucapkan Salam Ngerapik Blog!

Tutorial Membuat Menu berita Ala Ngerapik Blog dengan Kategori Feed 2 Label Blog yang berbeda

Posting Komentar

Formulir Kontak