Table of Content

Beranda
Template

Cara Membuat Header Blog Satu Baris pada Template LinkMagz

Modifikasi header LinkMagz jadi satu baris di ponsel. Hemat ruang, tampilan lebih rapi. Optimalisasi pengalaman pengguna.

Bagi pengguna template LinkMagz yang ingin memodifikasi header supaya terlihat lebih rapi saat dibuka dari ponsel seperti pada blog Iskandar.blog, tampilan header pada mode selular konsisten satu baris.

Saat di mode desktop, tampilan header LinkMagz biasanya terdiri dari dua kolom: satu untuk judul blog dan satu lagi untuk ikon media sosial. Namun, ketika dibuka dari ponsel selular, tampilan tersebut bisa memakan lebih banyak ruang, bahkan terkadang menjadikan header terbagi menjadi tiga baris karena ukuran layar yang lebih sempit.

Tampilan Header LinkMagz Satu Baris

Namun, jangan khawatir! Dengan sedikit penyesuaian pada kode template LinkMagz, kalian dapat mengatur agar header tetap terlihat rapi dalam satu baris saat dibuka dari ponsel selular. Ikuti langkah-langkah di bawah ini ya!

  1. Langkah pertama adalah masuk ke dashboard blog kalian.
  2. Setelah masuk ke dashboard, buka menu Tema. Kemudian pada tombol SESUAIKAN, klik tanda panah bawah dan pilih Edit HTML.
  3. Di Editor HTML, tekan kombinasi tombol CTRL + F untuk membuka fitur Find. Ketikkan /b:skin pada kotak pencarian dan tekan ENTER untuk menemukan bagian yang diperlukan.
  4. Salin kode berikut dan tempelkan tepat di atas kode /b:skin yang sudah ditemukan sebelumnya: 
      
        /*! Header LinkMagz by Iskandar.blog */
@media only screen and (max-width:480px){
  #header .widget img{margin:0}
  #social-button a, #social-button .social-icon{margin:0;padding:3px}
  #header, #social-button{text-align:right;max-width:50%}
  #header, #header .widget .blog-title-wrap{margin:0px}
  #header, #header .widget .blog-title-wrap{margin:0px}
  #header .widget p.title-description{display:none;margin-top:0px}
  #header, #social-button{text-align:right}
  #header .widget p.title-description{display:none;margin-top:0px}
  #header, #social-button{text-align:right}
}

  5. Setelah menambahkan kode tersebut, jangan lupa klik ikon SAVE untuk menyimpan perubahan yang sudah dilakukan.
  6. Terakhir, buka blog kalian melalui ponsel selular dan lihat hasilnya! Header sekarang seharusnya sudah terlihat lebih rapi dengan hanya satu baris.

Sekarang kalian telah berhasil memodifikasi header blog kalian agar terlihat lebih rapi dan sesuai dengan tampilan yang diinginkan saat dibuka dari ponsel selular. Selamat mencoba! Jika ada pertanyaan, jangan ragu untuk bertanya. Semoga berhasil!

Mari kita saling terhubung dan berbagi cerita.

11 komentar

  1. wah jadi lebih hemat space dan fokus ke ruang artikel yang lebih banyak. nice tutorial.
    1. Iya mas, biar gak numpuk di header.
  2. Wah keren jg ya... jd lbh simpel ya mas, trs loading jd cpt.
    1. Template bawaannya juga udah cepet loadingnya mas, cuma pengen custom aja.
  3. Terima kasih mas sangat bermanfaat
  4. Next desain template wuzz sugeng mas
    1. Baru bahas tipis-tipis mas, Template Blogger Wuzz: Kecepatan Loading dan Fitur Lengkap!
  5. Keren, deskripsi artikelnya muncul di bawah judul postingan.
    1. Templatenya di edit-edit sedikit.
  6. Kalau mau mindahkan logo ke header saat di scroll gimana mas dan menambahkan guide list dalam postingan ? terimakasih.
    1. Nanti coba dibuatkan caranya mas.