Membuat Tampilan Gambar Header Template Blogspot Responsif

Cara Praktis Membuat Tampilan Gambar Header Template Blogspot Responsif

Hallo teman-teman blogger semua !!!

Terima kasih telah berkunjung di blog gudang-pengetahuanmu.blogspot.com .

Sesuai dengan judul artikel diatas " Cara Praktis Membuat Tampilan Gambar Header Template Blogspot Responsif " , termasuk salah satu ilmu blogger yang pernah saya cari kemana-mana untuk meningkatkan performa tampilan blog gudang-pengetahuanmu.blogspot.com yang saat ini teman-teman blogger kunjungi menjadi lebih responsif. Terutama saat ada pengunjung yang mengakses blog melalui HP / Smartphone dengan layar yang bisa dibilang tidak selebar layar komputer tetapi akan tetap mendapatkan performa dan kunjungan yang nyaman dengan tampilan blog yang telah dibuat responsif dan rapi.

Berdasarkan pengalaman yang pernah saya temukan saat mencari cara untuk membuat tampilan gambar header template blogspot responsif , hal utama dan sulit yang saya temukan yaitu mencari kode div header yang satu ini ( #header-wrapper ) . Karena disetiap tutorial cara yang saya temukan untuk merubah tampilan template blog menjadi responsif selalu berhubungan dengan kode div header tersebut. Tetapi saat kode tersebut saya cari berulang-ulang pada barisan kode di template blog yang saya kelola tetap saja saya tidak menemukan kode div yang satu ini ( #header-wrapper ) . 

Sampai akhirnya saya pernah hampir putus asa dan terpikir untuk berhenti mencoba membuat tampilan blog yang responsif, tetapi disaat itupulah saya terfikir pasti banyak diantar teman-teman blogger lainnya yang bertemu dengan persoalan yang sama seperti ini saat ingin menjadikan tampilan blog yang dikelola responsif dan tentunya juga teman-teman blogger juga menunggu tutorial baru yang dapat memberikan solusi terbaik untuk memecahkan persoalan template blogspot responsif. Disaat itu juga saya termotifasi untuk mencari solusinya dengan berpatokan pada  blog profesional lain yang bisa lolos tahap responsif ini lalu mengapa blog saya tidak dapat responsif seperti itu juga.

Langsung saja teman-teman blogger simak dan coba tutorial cara membuat tampilan gambar header template blogspot responsif yang ada berikut ini :

1. Jika blog teman-teman blogger menggunakan Navbar pada tampilan blog yang dikelola, silahkan teman-teman blogger menonaktifkan navbar blogger pada blog terlebih dahulu untuk kelancaran tutorial yang akan kita gunakan selanjutnya. Untuk menonaktifkan Navbar silahkan teman-teman blogger masuk ke menu layout atau tata letak kemudian pilih edit gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.

2. Untuk melakukan editing template blog, silahkan teman-teman blogger masuk ke pengaturan template blog. Bisa dengan memilih menu Template >> Pilih Edit HTML . Selanjutnya pada tampilan editing template blog silahkan cari kode dibawah ini, bisa dengan bantu fitur Search : dengan cara klik disembarang tempat pada barisan kode HTML yang terdapat pada Editing Template kemudian tekan tombol kombinasi CTRL + F untuk menampilkan kotak pencarian / Search : . Pada kotak Search : yang tampil silahkan teman-teman manfaatkan untuk mencari barisan kode berikut ini :

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

Kemudian silahkan ganti kode di atas dengan kode di bawah ini :

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

3. Lanjutkan dengan mencari kode dibawah ini :

<b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>

Kemudian gantikan dengan kode di bawah ini :

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

4. Silahkan Copy kode yang ada dibawah ini, kemudian paste atau letakkan diatas kode </head>

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}

@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>

5. Selanjutnya langkah terakhir untuk mengatur agar semua gambar dan header pada blog menjadi responsif, silahkan teman-teman blogger copy kode CSS yang ada dibawah ini. Kemudian paste atau letakkan diatas kode ]]></b:skin>

.header-outer{
left:0px;
width:100%;
height:100%;
bottom:0px;
}.separator a{margin-left:0px !important;margin-right:0px !important;}
.post img{max-width:100%;height:auto;}

6. Klik Simpan Template

7. Agar tampilan blog lebih responsif saat dibuka melalui HP / Smartphone, silahkan teman-teman aktifkan template seluler pada blog yang dikelola. Buka menu Template pada blog  >> Klik ikon Roda Gigi yang ada pada bagian template Seluler >> Pilih ( Ya. Tampilkan template seluler di perangkat seluler. ) pada menu Pilih Template Seluler, ubah pilihan Default menjadi Khusus . Terakhir klik Simpan, dan silahkan teman-teman blogger uji coba hasilnya.


Sekian artikel tentang " Cara Praktis Membuat Tampilan Gambar Header Template Blogspot Responsif " , semoga dapat memberikan tutorial dan solusi terbaik untuk teman-teman blogger yang ingin membuat tampilan blog menjadi responsif .

Tweet