Cara Membuat Template Blog Kamu Jadi Responsive 2017

Cara Membuat Template Blog Kamu Jadi Responsive 2017 seperti kalian tahu bahwa template yang default yang disediakan oleh blogger itu belum responsive, karena template bawaan dari  Blogger masih memakai versi yang mobile buat device-device kecil. Sedangkan Google sendiri yang notabene ialah si empunya Blogger menganjurkan buat menggunakan template yg responsive.


blog yang responsive adalah blog yang mengikuti tampilan device yg sering digunakan oleh pengunjung. device itu yang dimaksud macam desktop kayak komputer , laptop gitulah , tablet, smartphone yang tentu memiliki ukuran yang berbeda-beda. Hal dasar yang perlu diketahui pada menghasilkan template responsive adalah membarui satuan pixel menjadi satuan persen.

sebenarnya blogger telah menyediakan fitur untuk tampilan seluler, hanya saja tampilannya masih terlalu sederhana serta cita rasanya kurang mendukung pada menampilkan iklan. Lantas bagaimana cara agar template blog / web menjadi responsive tanpa mengaktifkan tampilan seluler.

berakibat tampilan Blog Responsive atau Mobile Friendly dimaksudkan agar blog kita lebih simpel terindeks mesin pencari Google.

BERIKUT CARA MUDAH MEMBUAT TEMPLATE BLOG RESPONSIVE

pertama kamu pergi ke blog kamu dulu
lalu kamu non activkan navbar nya dulu di template kamu.
lalu kamu , pergi ke menu template == > edit template
tekan ctrl f /g untuk mencari code nya , 
kamu cari code cssnya atau code di bawah ini .

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

kemudian anda ganti dengan code di bawah ini.

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

langkah selanjutnya kamu cari code di bawah ini lagi di template kamu.

<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>

selanjutnya kamu ganti dengan code di bawah ini.

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

langkah terakhir , kamu cari code </head>

kamu tambahkan code di bawah ini tepat di atas code </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>

kemudian kamu simpan template kamu dan lihat hasil nya

"Kode di atas by kompiajaib"

sekian dari saya tentang cara membuat template blog jadi responsive default , salam blogger anda see you next time.


EmoticonEmoticon