Cara Membuat Widget Gambar berada di Tengah & Responsive

Di dalam tutorial cara membuat template Blogger menjadi responsive, terdapat kode CSS yang digunakan untuk membuat gambar menjadi responsive. Namun kode 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 asli lebar gambar.

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

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

Cara membuat gambar pada widget Blog responsive
Ketika kita menggunakan gadget gambar untuk mengunggah gambar dengan ukuran lebar asli lebih dari 300px tanpa disusutkan ukurannya. Kemungkinan besar gambar tersebut akan melebar kesamping. Untuk mengatasinya, kita perlu menambahkan kode CSS agar gambar widget menjadi responsive.

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

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

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

1. Silahkan masuk ke Edit HTML pada template Blog yang ingin Anda edit.
2. Cari kode widget gambar Anda, kemudian salin kode berwarna merah, lalu letakkan kode tersebut sesuai dengan pola 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 kode 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 agar di tengah.

Penting!!!
Jika Anda pernah mengikuti tutorial cara membuat thumbnail dan snippet pada halaman utama (part 2) sebelum tanggal 21 Januari 2018, baik itu model satu, dua, atau tiga. Kemungkinan besar ada masalah pada tampilan gambar saat menggunakan gadget gambar, khususnya untuk halaman utama dan setipe-nya. Hal ini disebabkan karena penggunaan nama class Image yang digunakan untuk gambar thumbnail pada Homepage. Untuk itu saya minta maaf, hal itu sungguh diluar keinginan saya.

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

Atau Anda bisa melihat langsung pada halaman yang telah diperbaharui

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

Sekian dan terima kasih.