Cara Membuat Template Blogger Responsive

Cara Membuat Template Blogger Responsive

>> Responsive Web Desain adalah suatu sebuah halaman web yang tampilannya dapat cocok dimana saja, contoh seperti laptop, smartphone , android, ios, nokia 110 masuk kali yah hihi.

nah jadi kalo di open any where tetap indah. dari resolusi tampilan dan lainya.

>> Tujuan Menjadikan Tampilan Blog Responsive atau Mobile Friendly , dan agar blog kita mudah di temukan atau mudah ter indeks oleh Google (SEO Friendly)

Baik Kali Ini akan berbagi untuk responsive di Blogger.

1. Buka Blogger kamu, Jika Sudah memilih Theme bawaan silahkan lanjut

2. Nonaktifkan Navbar Pada Blog Kamu

3. Buka Theme spt gambar di atas, lalu Edit HTML

4. Untuk Membuat Gambar Jadi Responsive

Cari Text Ini

.post-body img, .post-body .tr-caption-container { padding: $(image.border.large.size); }

Diganti dengan ini

.post-body img, .post-body .tr-caption-container {padding: 0;width:auto;max-width:100%;height:auto;}

5. Setelah itu cari Text Iini

<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>

dan diganti dengan inii

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

6. Letakan code CSS RESPONSIVE diatas </head>
<style type='text/css'> @media screen and (max-width:1024px){ body,.content-outer, .content-fauxcolumn-outer, .region-inner {width:100%!important;min-width:100%!important;padding:0!important} body .navbar {height: 0!important;} .footer-inner {padding: 30px 0px!important;} } @media screen and (max-width: 603px){ .main-inner .columns {padding-right: 0!important;} .main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;} } </style>

7. Jika sudah selesai , Maka SIMPAN TEMA!

Selanjutnya ada bisa mengecek di Mobile Friendly Test



jika berhasil maka tampilan seperti ini.

Happy Blogging.

SALAM