Request tutorial blogspot - Direquest oleh sahabat blogger Renaldi Ardiansyah
Gimana ya caranya supaya judul blog bisa menyesesuaikan dengan versi mobile ? Biar lebih enak aja gitu diliatnya.
Bingung mau mgasih judul apa, tapi tenang pasti saya jawab. Jawabannya adalah penyesuaian panjang yaitu dengan penambahan poperti pada CSS selector
Nah gimana caranya kita lihat dulu selectornya klik saja gambarnya klik kanan Inspeksi Elemen (saya menggunakan Firefox Bahasa Indonesia, oke coba lihat gambar berikut ini.
Perhatikan kode HTML pada panah warna merah itu yang akan kita berikan style pada gambarnya, kemudian perhatikan panah yang hijau sebelum kita edit coba kita style di itu dengan cara klik satu kali saja dan tulislah poperti, coba lihat gambar berikut.
Kemudian saya coba menambahkan poperti
Nah buat yang belum tau apa fungsi poperti CSS yang saya tambahakan itu, ne buat nambah ilmu bagi yang belum tau untuk
Nah kita sudah tau kode yang harus kita pakai. Langsung saja masuk ke Blogger → Template → Klik Edit HTML
Cari kode CSS
Hasil edit lewat Inspeksi Elemen lihat gambar di atas, kalau masih bingung bisa tanyakan di komentar, semoga membantu terima kasih.
Gimana ya caranya supaya judul blog bisa menyesesuaikan dengan versi mobile ? Biar lebih enak aja gitu diliatnya.
Bingung mau mgasih judul apa, tapi tenang pasti saya jawab. Jawabannya adalah penyesuaian panjang yaitu dengan penambahan poperti pada CSS selector
img pada judul blog dan lebih tepatnya di header. Oke kita itip dulu blognya kita lihat permasalahannya biar lebih detail.Nah gimana caranya kita lihat dulu selectornya klik saja gambarnya klik kanan Inspeksi Elemen (saya menggunakan Firefox Bahasa Indonesia, oke coba lihat gambar berikut ini.
Perhatikan kode HTML pada panah warna merah itu yang akan kita berikan style pada gambarnya, kemudian perhatikan panah yang hijau sebelum kita edit coba kita style di itu dengan cara klik satu kali saja dan tulislah poperti, coba lihat gambar berikut.
Kemudian saya coba menambahkan poperti
max-width: 100%; dan height: auto; 
Nah buat yang belum tau apa fungsi poperti CSS yang saya tambahakan itu, ne buat nambah ilmu bagi yang belum tau untuk
max-width: 100%; itu artinya panjang maksimal 100% dan height: auto; berfungsi agar saat penyesuai panjang pada gambar maka lebar kita buat otomatis mengikuti panjang gambar jadi kelihatan lebih rapi gambarnya tidak melebar. Nah buat yang mau belajar tentang poperti CSS max-width disini dan height disini.Nah kita sudah tau kode yang harus kita pakai. Langsung saja masuk ke Blogger → Template → Klik Edit HTML
Cari kode CSS
#header-inner img { Biar cepat tekan Ctrl+F pada Edit HTML untuk menampikan form pencarian setelah itu tambahkan poperti max-width: 100%; dan height: auto; kemudian Klik Save TemplateHasil edit lewat Inspeksi Elemen lihat gambar di atas, kalau masih bingung bisa tanyakan di komentar, semoga membantu terima kasih.
Wah, mantap gan.. makasih sudah di respon... nanti akan saya coba, semoga aja berhasil ya :)
ReplyDeletegan itu naro kode max-width: 100%; dan height: auto; dibawah #header-inner img { kan ??
ReplyDeleteBegini gan
Delete#header-inner img {
max-width: 100%;
height: auto;
}
oke gan, berhasil ternyata. thx ya :)
DeleteSiip
DeleteOke gan ane dah ngerti, makasih gan
ReplyDeletewah saya perlu coba ini caranya
ReplyDeleteKalau mau coba silahkan namun tergantung kode yang di pakai di template nya ya.
Deletekalau buat wp ada engga gan ?
ReplyDeleteWP dalam intinya kan sama saja gan pakai CSS juga, perbedaan mungkin pada stuktur HTML nya pakai php.
Deleterequest cara mwmbuat komentar kayak di blogmu gan :D
ReplyDelete