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 hybrid sebenarnya kami melakukan kesalahan desain: Yakni jika Judul ditulis agak panjang, maka akan kehilangan sebagian suku kata atau huruf tersembunyi pada prosentasi.
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 memberi aba aba melalui 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 contempo, yakni judul tidak mobile friendly.
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:
.bg-photo-overlay { display:none; }
Save template dan selesai!
 |
gambar tampilan judul blog sebelum dan sesudah diperbaiki |
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 contempo, yakni judul tidak mobile friendly.
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.
gan, untuk header blog contempo, untuk fixed sticky header di halaman depan gimana gan? thanks
BalasHapusMaksudnya Fixed baik pada homepage (halaman depan) maupun pada saat konten di buka dan ketika halaman di scroll kebawah dan keatas, header atau menu navigasi tetap berada diatas, bukan sticky bukan? Karena contempo telah di built up secara default dengan header sticky terutama pada saat konten dibuka.
HapusAgan lihat blog editblogtema ini adalah contempo? Mengapa headernya yang sekaligus menjadi menu navigasi menjadi fixed?
Karena saya merombaknya. Saya buang widget atau gadget header h1 dan menggantinya menjadi <h1> Judul </h1> dan berfungsi sebagai Menu Navigasi. Semua tutorialnya telah saya sediakan secara lengkap di blog ini