Cara Memperbaiki First Image Median UI Agar Presisi

Saifulah.id - Seperti yang sudah saya ulas pada artikel sebelumnya, kekurangan template Median UI sangatlah banyak. Namun, di artikel tersebut, saya hanya menyebutkan 8 Bugs saja, karena itu yang fatal dari segi profesionalitas sebuah template. Salah satu yang saya soroti adalah tentang First Image.

Apa itu First Image?

First Image adalah gambar pertama yang biasa terletak di paling atas artikel yang berfungsi untuk menggambarkan keseluruhan isi artikel.

Selain itu, First Image ini juga bisa menjadi Thumbnail ketika kita membagikan artikel ke sosial media lain. Sehingga keberadaannya sangat penting untuk membuat pengunjung tertarik.

Kekurangan First Image di Median UI

First Image (Gambar Pertama) blog secara umum ditampilkan dengan ukuran penuh sampai menyentuh pinggir layar. Hal ini bisa kita lihat hampir di semua website kecil sampai yang besar melakukan hal tersebut.

Saya sendiri sering bergonta-ganti template dan tidak pernah menemukan masalah di bagian ini. Tapi sayang, ketika saya menggunakan template Median UI, saya langsung sadar bahwa ada yang tidak beres dengan Thumbnail pertamanya saat dibuka dengan tampilan desktop.

Gambarnya tidak presisi atau tidak simetris, dimana gambar bergeser ke kanan sampai keluar batas pinggir artikel.

Memang terlihat sepele, tapi justru sesuatu bisa dikatakan profesional ketika detail-detail kecil ini bisa diperhatikan dengan baik oleh pembuatnya.

Lalu bagaimana cara memperbaikinya? Ayo simak tutorial berikut ini:

Cara Memperbaiki First Image Median UI 1.5

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML

   
   
   
5. Cari kode /* Article Style Responsive */
6. Tambahkan kode berikut tepat di bawahnya
   

   @media screen and (min-width:480px) and (max-width:1920px){.postEntry img{margin-left:-1em}} 

7. Hasilnya seperti ini

   

8. Simpan Tema

Cara Memperbaiki First Image Median UI 1.6

1. Cari kode /* Img and Ad */ .pS img
   

   /* Img and Ad */ .pS img{display:inline-block;border-radius:3px;height:auto !important;}

2. Lalu tambahkan kode margin-left: -1em
   

   /* Img and Ad */ .pS img{display:inline-block;border-radius:3px;height:auto !important;margin-left: -1em}

3. Simpan Tema
4. Selesai