Trik membuat header blog berganti ganti warna menurut ukuran layar perangkat

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:
dibuat tanpa java script hanya elemen HTML CSS saja
Pada gambar diatas warna header akan otomatis berganti pada:
  1. PC Desktop / Laptop = pink
  2. Tablet portrait = biru
  3. Tablet landscap = kuning
    warna header berubah jadi kuning
    Warna header blog pada saat posisi tablet jadi landscap
  4. Ponsel atau hape = abu abu
BAGAIMANA CARA MENERAPKANNYA?
Sobat hapus saja terlebih dahulu header bawaan blogspot untuk menghindarkan h1 menjadi ganda. Caranya:
  1. Masuk kepengaturan atau dasbor blogger
  2. Pilih tataletak
  3. Pilih Widget header dan hapus
Jika tidak ada opsi menghapus maka:
  1. Masuk kepengaturan blogger
  2. Pilih tema atau theme
  3. 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:
  1. Masuk kepengaturan atau dasbor blogger
  2. Pilih tataletak
  3. Pilih Widget header dan hapus
Save Tema.

1. MENANMBAHKAN CSS
  1. Masuk kepengaturan blogger
  2. Pilih tema atau theme
  3. 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>

Save tema.

2. TAMBAHKAN HTML
  1. Masuk kepengaturan blogger
  2. Pilih tema atau theme
  3. pilih editHTML temukan kode <body> letakan diatasnya  atau letakan saja dibawah kdoe </head> :
<h1><center>NAMA BLOG SOBAT</center></h1>
<h2 class='example'><center>
Deskripsi blog sobat</center></h2>

Save template.

Dan LIHAT DEMO

www.editblogtema.net


Comments


  1. Simple 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..😄

    ReplyDelete
    Replies
    1. Benar, sebenarnya desain web itu secara teknis mudah. Kreatifitasnya yang kadang sedikit sulit.

      Karena ide tidak selalu muncul begitu saja.

      Delete
  2. Baca cara mengaturnya sih kelihatannya gampang banget .., karena dijabarkan runut.
    Tapiii... , giliran memasang kodenya puyeng wwwkkk

    ReplyDelete
    Replies
    1. Tidak pakai puyeng ha ha ha...simpel aja kok itu hanya pelajaran dasar HTML kok.

      Delete
  3. wah keren juga ya tutorialnya, jadi pengunjung tidak bosan untuk berkujung di blog karena tampilan blog bisa menyesuaikan device yang mereka gunakan :D

    ReplyDelete

Post a Comment

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan

Popular Minggu ini:

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

AUTODIDACT, WHY YOU FAIL TO PERFORM IT

INI DIA UKURAN GAMBAR TERBARU YANG IDEAL UNTUK KONTEN BLOG AMP