August 23, 2016

Cara Membuat Responsive Template Asli Bawaan Blogger

Cara Membuat Responsive Template Bawaan Blogger (Simple Default Blogger Template)

MENJADIKAN
Tampilan Blog Responsive atau Mobile Friendly dimaksudkan agar blog kita lebih mudah terindeks mesin pencari Google (SEO Friendly).

Tampilan blog responsive juga agar blog ramah pengguna (user friendly) karena mayoritas pengguna internet sekarang menggunakan HandPhone/SmartPhone atau Mobile Devices untuk internetan.

Tips edit atau modifikasi template bawaan blog menjadi responsuve ini di-share oleh Kompi Ajaib.

Langkah Pertama
Nonaktifkan navbar Blogger: Layout (Tata Letak) > edit gadget "Navbar" > pilih option "OFF" untuk menonaktifkan navbar.

Langkah Kedua
Cari kode di bawah ini:

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

Ganti kode tersebut dengan kode di bawah ini:

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

Langkah Ketiga
Cari kode di bawah ini:

    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>

Ganti dengan kode di bawah ini

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

Langkah Keempat
Simpan kode CSS Responsive berikut ini di atas kode </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 {height0!important;}
.footer-inner {padding30px 0px!important;}
}

@media screen and (max-width: 603px){
.main-inner .columns {padding-right0!important;}
.main-inner .column-right-outer {width100%!important;margin-right0!important;}
}
</style>

Langkah Kelima: Save! Simpan Template!
Kini template default blogger yang Anda gunakan sudah responsive.

Karena template blog Anda kini sudah responsive, maka sebagaimana umumnya setting responsive blogger template, setting template Anda menjai begini:

setting template responsive

Save! Kini silakan cek di Mobile-friendly test Google dan di Am I Responsive.*

2 comments:

  1. wahh, baru tahu dan perlu dicoba nih

    ReplyDelete
    Replies
    1. Ya, itulah Cara Membuat Responsive Template Asli Bawaan Blogger

      Delete

Contact Form

Name

Email *

Message *