TRIK MODIFIKASI CSS TEMA CONTEMPO UNTUK HEADER (Bag 2)

TRIK MODIFIKASI CSS TEMA CONTEMPO UNTUK HEADER (Bag 2)

Pada postingan terdahulu dengan judul yang sama saya lupa menyertakan sebuah trik untuk merobah tampilan judul template contempo supaya terlihat "fit" di header blog pada saat tampil baik versi mobile maupun laptop. Karena pada desain contempo hybdrid sebenarnya kami melakukan kesalahan desain: Yakni jika Judul ditulis agak panjang, maka akan kehilangan sebagian suku kata atau huruf tersembunyi pada prosentasi.
gambar tampilan judul blog sebelum dan sesudah diperbaiki

Misalnya Judul blog kami ini adalah: "editblogtema.net" tampil seluruhnya pada saat dibuka dilayar lebar sebuah laptop atau PC desktop, akan tetapi pada saat dibuka melalui hape (mobile) judul blog ini hanya tampil: "editblogte.." sebagian huruf telah hilang kedalam persembunyian akibat kesalahan penulisan kode cssnya.

Untuk memperbaiki ini silahkan masuk ke pengaturan atau dasbor blog, masuk ke tema, lalu pilih opsi edit HTML:

Pada halaman HTML cari kode berikut: (cara paling mudah adalah dengan memasukan sebagian kode dibawah kedalam kotak pencarian halaman HTML yakni: tekan ctrl+f)

.widget.Header h1 {
overflow: hidden;
    height: 40px;
    font-size: 30px;
    line-height: normal;
}
#header {
    width: 60%;
}
nav {
    width: 40%;
}
}
.vieleftcredit {
    text-align: center;
}
div.blogger {
display: none;
}.googlezet{margin:15px auto;text-align:center}


Yang perlu sobat cari itu adalah kode css bawaan yang tidak kami robah, yakni kode yang kami sorot warna kuning diatas:

#header {
    width: 60%;
}
nav {
    width: 40%;
}

Sekali lagi kami jelaskan, 60% berbanding 40% itu adalah kode css bawaan blogger (default) yang tidak kami rombak dan ternyata berdampak langsung terhadap desain sebuah template.

Sobat ganti saja 60% menjadi 100%, demikian pula 40% ganti saja dengan 100% problem tersebut diatas segera teratasi dengan tuntas. Jika masih terdapat. Jika ada keraguan jangan sungkan bertanya melalui kolom komentar atau chat kami melalui chat pop up dibawah blog ini, kami dengan senang hati akan memberikan petunjuk.

MENGHILANGKAN LATAR WARNA PADA HEADER CONTEMPO

Masuk ke pengaturan blogger atau dasbor blog pilih tema, pilih sesuaikan, dan ketika sudah memasuki opsi Desainer Tema Blogger sobat pilih "lanjutan" pada list menu sobat scroll keatas sampai ketemu daftar paling bawah, yakni: "Tambahkan CSS" dan akan muncul kotak dialog sebagai berikut:
Dan, sobat copy kode aba aba CSS dibawah ini, lalu pastekan kedalam kotak dialog warna putih tersebut. 

.bg-photo-overlay { display:none; }

Save template dan selesai!

Beri Komentar ya..

0 Comments