Salah satu kekurangan template median ui ini adalah first image atau gambar awal yang tidak presisi atau tidak pas, salah satu kekurangan yang pantas untuk di soroti karena terlihat sangat jelas ketika di akses melalui mobile atau handphone. Gambar awal pada median ui ini agak geser ke kanan dan tidak rata di tengah. Pada kesempatan ini saya akan membagikan tutorial cara agar gambar presisi pada template median ui 1.5 dan median ui 1.6. Sebelum ke tutorial saya akan jelaskan sedikit tentang gambar awal atau first image.
Apa itu first image atau gambar awal ?
First image atau gambar awal adalah sebuah gambar pertama yang terletak paling atas dan untuk menggambarkan dari keseluruhan isi artikel
First image atau gambar awal ini di jadikan thumbnail di bagian homepage blog dan juga thumbnail ketika di share ke sosial media.
Kekurangan first image atau gambar awal di median ui
Dari website kecil hingga web besar secara umum menampilkan first image atau gambar awal di tampilkan dengan ukuran penuh hingga menyentuh garis samping layar.
Pengalaman saya yang bergonta - ganti template blog yang free hingga yang premium belum pernah menemukan kasus bahwa first image atau gambar awal tidak presisi. Tapi setelah saya memasang template median ui di blog saya, saya bingung dan saya rasa kaya ada yang aneh dan setelah saya cek - cek lagi ternyata saya menemukan kekurangan yaitu first image atau gambar awal tidak pas pada posisinya atau bisa di katakan agak geser ke kanan.
Memang terlihat hal yang bisa di anggap biasa atau sepele tapi hal sekecil ini sebenarnya bisa mengurangi rasa profesionalitas seorang blogger, lantas bagaimana gambar tersebut agar presisi atau pas pada tempatnya ? baik dsini saya akan membagikan tutorial agar gambar tersebut presisi untuk median ui 1.5 dan median ui 1.6.
Membuat first image atau gambar awal agar presisi pada median ui 1.6
- Silahkan masuk ke blog kalian lalu pilih edit html
- Cari kode /* Img and Ad */ .pS img
/* Img and Ad */ .pS img{display:inline-block;border-radius:3px;height:auto !important;}- Lalu tambahkan kode margin-left: -1em
/* Img and Ad */ .pS img{display:inline-block;border-radius:3px;height:auto !important;margin-left: -1em}- Simpan tema dan selesai
Membuat first image atau gambar awal agar presisi pada median ui 1.5
- Seperti biasa silahkan login ke blog kalian lalu pilih edit html
- Cari kode /* Article Style Responsive */
- Salin kode di bawah ini lalu letakan tepat di bawah kode /* Article Style Responsive */
@media screen and (min-width:480px) and (max-width:1920px){.postEntry img{margin-left:-1em}} - Simpan template anda dan selesai.