Cara Membuat Header Blog Satu Baris pada Template LinkMagz

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."
Tampilan Header LinkMagz Satu Baris

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.

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!

Randi Iskandar
Randi Iskandar Tetap terhubung di Iskandar.blog! Terima kasih sudah membaca.

Bagikan Artikel Ini

11 komentar untuk "Cara Membuat Header Blog Satu Baris pada Template LinkMagz"

Comment Author Avatar
wah jadi lebih hemat space dan fokus ke ruang artikel yang lebih banyak. nice tutorial.
Comment Author Avatar
Iya mas, biar gak numpuk di header.
Comment Author Avatar
Wah keren jg ya... jd lbh simpel ya mas, trs loading jd cpt.
Comment Author Avatar
Template bawaannya juga udah cepet loadingnya mas, cuma pengen custom aja.
Comment Author Avatar
Terima kasih mas sangat bermanfaat
Comment Author Avatar
Keren, deskripsi artikelnya muncul di bawah judul postingan.
Comment Author Avatar
Templatenya di edit-edit sedikit.
Comment Author Avatar
Kalau mau mindahkan logo ke header saat di scroll gimana mas dan menambahkan guide list dalam postingan ? terimakasih.
Comment Author Avatar
Nanti coba dibuatkan caranya mas.
Pasang iklan di sini