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

Salam Ngerapik Blog. Selamat malam sobat blogger, bikin artikel lagi nih. Pembukaan artikelnya adalah tentang tata letak blog saya yang tadinya tempat blok tersebut disi oleh kode 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. Lihat hasil penampakan aplikasinya dibawah ini:

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

Langsung saja deh pengaplikasian kode nya,  Cekidot Wae.. 

1. Masuk ke dasbor Edit html Template sobat blogger semua, lalu cari tempat terbaik peletakan kode utama dibawah ini;

Kode Utama Edit HTML:

</> Code Utama

<!-- Elegant Minimalist News Grid [start] --> <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> <script type='text/javascript'> //<![CDATA[ // KUSTOMISASI KATEGORI: var namaLabelKalian = "website"; // <-- Silakan ganti dengan nama label/kategori di blog Anda (perhatikan huruf besar/kecilnya) var jumlahKartu = 5; 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> <!-- Elegant Minimalist News Grid [end] -->

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  

Demikianlah artikel singkat saya kali ini tentang "Tips Blogger Membuat Artikel Lainnya seperti Blog Ngerapik Sederhana dan Minimalis Responsive Untuk Handphone" semoga dapat bermanfaat serta dapat diaplikasikan pada blog kesayangan sobat blogger semuanya. Selamat mencoba untuk mempercantik dan memperganteng blog teman teman semua. Salam Ngerapik Blog.