Skip to content Skip to sidebar Skip to footer

Cara Merubah Tampilan Header Mobile di Template Linkmagz

Cara Merubah Tampilan Header Mobile di Template Linkmagz
AmbyarBlog - Pada kesempatan kali ini saya ingin berbagi tutorial redesign. Banyak sekali yang request 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 saya.

Jaman sekarang semua orang kebanyakan menggunakan smartphone, jadi saya fokuskan untuk mengoptimalkan tampilan mobile tapi tidak lupa juga dengan tampilan destopnya.

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

Bagi yang penasaran dengan tampilannya seperti apa sobat bisa lihat tampilan header mobile pada blog ini. Oke, tanpa basa basi lagi kita langsung saja ke caranya.

Merubah Tampilan Header Mobile

1. Buka dashboard Blogger Anda.
2. Pilih menu Tema > Edit HTML.
3. Kemudian cari kode ]]></b:skin>.
4. Tambahkan kode CSS dibawah atau tambahkan melalui pengaturan CSS yang terletak di menu Tata Letak. Apabila sobat menggunakan template Linkmagz versi terbaru.
/* Header Mobile Redesign by Ambyarblog.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. Simpan.

Demikianlah cara merubah tampilan header mobile di template Linkmagz yang dapat saya bagikan, semoga bermanfaat dan apabila ada pertanyaan silahkan komen dibawah. Sekian dan terima kasih.

Post a Comment for "Cara Merubah Tampilan Header Mobile di Template Linkmagz"

close