Mungkin sobat tertarik membuat header blog yang ringan tanpa JavaScript, saya jamin heading ini cukup dinamis dan tidak akan memberatkan loading karena murni menggunakan hanya elemen CSS. Dia memiliki h1 dan h2 yang valid.
Header blog sobat akan berganti ganti warna menurut ukuran layar, perhatikan gambar dibawah:
Save tema.
<h2 class='example'><center>Deskripsi blog sobat</center></h2>
www.editblogtema.net
Header blog sobat akan berganti ganti warna menurut ukuran layar, perhatikan gambar dibawah:
Pada gambar diatas warna header akan otomatis berganti pada:
- PC Desktop / Laptop = pink
- Tablet portrait = biru
- Tablet landscap = kuning
Warna header blog pada saat posisi tablet jadi landscap - Ponsel atau hape = abu abu
BAGAIMANA CARA MENERAPKANNYA?
Sobat hapus saja terlebih dahulu header bawaan blogspot untuk menghindarkan h1 menjadi ganda. Caranya:
- Masuk kepengaturan atau dasbor blogger
- Pilih tataletak
- Pilih Widget header dan hapus
Jika tidak ada opsi menghapus maka:
- Masuk kepengaturan blogger
- Pilih tema atau theme
- pilih editHTML
Pada bagian atas halaman editor HTML cari tool "Lompat ke Widget" klik dan pilih header, nah pada bagian (header) akan terdapat kode sebagai berikut:
<b:widget id='Header1' locked='true' title='NAMA BLOG SOBAT (Header)' type='Header'>
Ganti tulisan 'true' menjadi 'false' dan SAVE template. Refresh halaman pengaturan blogger lalu kembali:
- Masuk kepengaturan atau dasbor blogger
- Pilih tataletak
- Pilih Widget header dan hapus
Save Tema.
1. MENANMBAHKAN CSS
- Masuk kepengaturan blogger
- Pilih tema atau theme
- pilih editHTML temukan kode </head> dan letakan kode berikut diatasnya:
<style>
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: #C0C0C0;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
</style>
2. TAMBAHKAN HTML
- Masuk kepengaturan blogger
- Pilih tema atau theme
- pilih editHTML temukan kode <body> letakan diatasnya atau letakan saja dibawah kdoe </head> :
<h2 class='example'><center>Deskripsi blog sobat</center></h2>
BalasHapusSimple juga cara kerjanya ternyata yaa gan...Dan tidak seribet yang saya kira..😄😄
Ok gan akan saya coba untuk blog saya yang satunya.. Thanks nih sudah berbagi..😄
Benar, sebenarnya desain web itu secara teknis mudah. Kreatifitasnya yang kadang sedikit sulit.
HapusKarena ide tidak selalu muncul begitu saja.
Baca cara mengaturnya sih kelihatannya gampang banget .., karena dijabarkan runut.
BalasHapusTapiii... , giliran memasang kodenya puyeng wwwkkk
Tidak pakai puyeng ha ha ha...simpel aja kok itu hanya pelajaran dasar HTML kok.
Hapuswah keren juga ya tutorialnya, jadi pengunjung tidak bosan untuk berkujung di blog karena tampilan blog bisa menyesuaikan device yang mereka gunakan :D
BalasHapus