Cara Membuat Header Blog Satu Baris pada Template LinkMagz

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!

Penulis

Salam dari saya
Hai. Nama saya Randi Iskandar, dan saya senang sekali bisa berbagi cerita dan pengalaman melalui blog ini.
Komentar