🔔 Aktifkan notifikasi disini Google News

Cara Memperbaiki First Image Median UI Agar Presisi

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.
Cara Memperbaiki First Image Median UI Agar Presisi

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
    Cara Membuat Header Median UI Menjadi Sticky Header

  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

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
PT Saifullah Digital Advantec

15 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. request popular post kaya punya agan
    1. Ok siap.
    2. Buatin tutorial bottom menu navigasi dong min, biar enak buat pengunjung dari hp waktu kunjungi web ku, karena rata rata dari hp, makasih
  2. bang request cara agar judul postingan rata tengah,sama cara agar bawah header ada garis tepi.
    1. Ok. Akan saya buatkan tutorialnya satu persatu.
  3. Iya, semua request teman² sudah saya catat. Tinggal di buat dan post aja nanti. Sekarang saya lagi buatkan artikel permintaan dari komentar sebelumnya dulu. Jadi sabar ya 😊
  4. lapor bang,dimedian ui amp gak garuh tetep bug.
    1. Median UI versi AMP beda scriptnya. Jadi kode yang diubah juga beda.
  5. Di blog saya gk ngaruh gan, apa karena beda versi ya.
    1. Iya, beda versi kodenya juga berbeda kak. Kakak pakai versi 1.6 kan?
  6. Bisa bikinin tutornya gak gan.
    1. Tutorialnya sudah di update
  7. untuk median UI 1.6 gak ngaruh nih tolong Bikinkan tutorialnya mas
    1. Tutorialnya khusus Median UI 1.6 sudah saya tambahkan di postingan di atas.
  8. Makasih mas
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.