Tips Tutorial Cara Menciptakan Widget Gambar Berada Di Tengah & Responsive

Di dalam tutorial cara menciptakan template Blogger menjadi responsive, terdapat arahan CSS yang dipakai untuk menciptakan gambar menjadi responsive. Namun arahan itu hanya berfungsi pada gambar yang ada di dalam artikel, sedangkan untuk gambar yang dimuat pada widget Blog, entah itu di sidebar, header, atau footer gambar yang diunggah akan tetap melebar ketika ruang yang tersedia lebih kecil dari ukuran orisinil lebar gambar.

Meskipun pada widget gambar terdapat fitur untuk menyusutkan ukuran gambar, namun hal itu tidak menimbulkan gambar tersebut menjadi responsive. Gambar selalu berada pada sisi kiri dan terdapat ruang kosong yang menciptakan tampilan terasa kurang simetris.

Untuk itu pada postingan kali ini, aku akan coba untuk melengkapinya. Berikut cara menciptakan supaya widget gambar diBlog menjadi responsive dan posisinya berada ditengah (center).

Cara menciptakan gambar pada widget Blog responsive
Ketika kita memakai gadget gambar untuk mengunggah gambar dengan ukuran lebar orisinil lebih dari 300px tanpa disusutkan ukurannya. Kemungkinan besar gambar tersebut akan melebar kesamping. Untuk mengatasinya, kita perlu menambahkan arahan CSS supaya gambar widget menjadi responsive.

Tambahkan arahan CSS berikut, letakkan di atas arahan ]]></b:skin>

.widget img{     max-width:100%;     height:auto;}

Agar posisi gambar widget Blog berada di tengah Sidebar
Jika ukuran orisinil lebar gambar yang diunggah pada gadget gambar / widget gambar terlalu kecil atau mungkin Anda menentukan untuk menyusutkan gambar, maka tampilan gambarnya menjadi tidak simetris. Karena setelan default widget gambar Blogger mempunyai rataan kiri. Untuk itu Anda perlu melaksanakan sedikit perubahan arahan HTML widget gambar pada template Anda.

1. Silahkan masuk ke Edit HTML pada template Blog yang ingin Anda edit.
2. Cari arahan widget gambar Anda, kemudian salin arahan berwarna merah, kemudian letakkan arahan tersebut sesuai dengan teladan di bawah.

<b:widget id='Image1' locked='false' title='' type='Image' version='1'> <b:includable id='main'> .... .... <div class='widget-content'> <div class='separator' style='clear: both; text-align: center;'>  ....  ....  </div> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

Tips:
Untuk memudahkan pencarian arahan HTML widget gambar, sebaiknya beri nama/judul pada widget tersebut. Setelah diedit, terserah Anda, mau dihapus atau tidak nama widget gambar tersebut.

Pelajari juga: Cara mengubah letak judul widget supaya di tengah.

Penting!!!
Jika Anda pernah mengikuti tutorial cara menciptakan thumbnail dan snippet pada halaman utama (part 2) sebelum tanggal 21 Januari 2018, baik itu model satu, dua, atau tiga. Kemungkinan besar ada duduk kasus pada tampilan gambar ketika memakai gadget gambar, khususnya untuk halaman utama dan setipe-nya. Hal ini disebabkan lantaran penggunaan nama class Image yang dipakai untuk gambar thumbnail pada Homepage. Untuk itu aku minta maaf, hal itu sungguh diluar cita-cita saya.

Silahkan ubah nama untuk class='Image'
Misal
<div class='Image'> menjadi <div class='Image-thumb'>
Kemudian sesuaikan juga arahan CSS nya
.Image menjadi .Image-thumb
.Image img menjadi .Image-thumb img

Atau Anda sanggup melihat pribadi pada halaman yang telah diperbaharui

• Homepage model 1
• Homepage model 2
• Homepage model 3

Sekian dan terima kasih.