Cara Membuat Single Header Mobile di Template Linkmagz

Cara Membuat Single Header Mobile di Template Linkmagz


Coretancode.com - Pada kesempatan kali ini admin ingin berbagi lagi seputar dunia blogging yang pasti akan kalian sukai. Banyak sekali request yang saya terima agar membuat tutorial ini karena pada blog sebelumnya saya memang menggunakan template linkmagz yang sudah di redesign.

Membuat blog dengan tampilan yang menarik, unik dan minimalis tentu adalah sebuah idaman bagi seluruh blogger terutama admin. Tidak sedikit dari mereka yang menginginkan template hasil redesign admin hingga ingin membelinya.

Pada blog sebelumnya ataupun blog yang sekarang admin tetap mengutamakan tampilan pada mobile version, kenapa? hal ini karena admin sendiri masih mengelola blog menggunakan smartphone jadinya pada tampilan dekstop mungkin kurang optimal.

Untuk membuat single header mobile semacam ini sebenarnya sangatlah mudah, kalian hanya perlu menambahkan kode CSS apabila telah mengetahui semua struktur template yang sedang digunakan.

Bagi yang sudah penasaran dengan tampilan yang akan dihasilkan, kalian bisa cek gambar dibawah atau langsung menuju ke tombol yang menuju ke blog admin sebelumnya.

Demo Single Header

Oke langsung saja kita menuju ke tutorial, silahkan simak baik-baik setiap langkah-langkahnya.

Cara Membuat Single Header Mobile di Linkmagz

  1. Pastikan telah login ke Blogger.com
  2. Pada dashboard, silahkan pilih menu Template > Edit HTML
  3. Kemudian cari kode ]]></b:skin>
    Untuk mempermudah pencarian kode, silahkan gunakan tombol pintasan CTRL+F pada keyboard.
  4. Lalu salin kode berikut ini, dan letakkan diatas kode (langkah no.3)
    /* Single Header Redesign by Coretancode.com */
    @media only screen and (max-width:480px){#header,#header .widget .blog-title-wrap{margin:0px}#header,#social-button{max-width:50%}#header .widget p.title-description{margin-top:0px}#header,#social-button{text-align:right}#header-outer #header-content{padding:3px 20px}#social-button .social-icon{margin:3px 0;padding:3px}}@media only screen and (max-width:350px){#header .widget .blog-title-wrap{margin:0 auto}#header{max-width:100%;margin-bottom:10px}#header .widget p.title-descriptio{margin-top:8px}#header,#social-button{text-align:center}#header-outer #header-content{padding:22px 22px 12px}}
  5. Save Template.

Jika kalian paham dengan CSS, silahkan kreasikan sendiri sesuai keinginan. Apabila ada pertanyaan silahkan ajukan melalui kolom komentar dibawah artikel ini dan mohon dimaklumi jika ada salah kata atau penulisan.

Mungkin sekian dulu artikel tentang Cara Membuat Single Header Mobile di Template Linkmagz, semoga bermanfaat dan
Terima Kasih
Load comments