Cara Mudah Membuat Responsive Template Default Blogger

Cara Mudah Membuat Responsive Template Default Blogger

Bola Hero Gawai

Cara Mudah Membuat Responsive Template Default Blogger

Cara Mudah Membuat Responsive Template Default Blogger
Seperti kita ketahui bahwa template default yang disediakan Blogger belum responsive, template bawaan Blogger masih menggunakan versi mobile untuk device-device kecil. Sedangkan Google sendiri yang notabene merupakan si empunya Blogger menganjurkan untuk menggunakan template yang responsive.

Nah bagi Anda yang menggunakan template default Blogger, saya kini akan share cara mudah membuat responsive template default Blogger. Hanya perlu beberapa langkah mudah yang saya yakin Anda bisa melakukannya. Silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama

Nonaktifkan navbar Blogger, silahkan masuk ke layout atau tata letak kemudian edit gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.

Langkah Kedua

Membuat gambar postingan menjadi reponsive. Silahkan cari kode di bawah ini.


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

Kemudian silahkan ganti kode di atas dengan kode di bawah ini


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

Langkah Ketiga

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

Kemudian 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

Silahkan simpan kode di bawah 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 {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>

Selesai...sekarang template default Blogger yang Anda gunakan sudah responsive, mudah bukan?

Untuk membuktikannya, saya sudah coba pada dua blog dengan template default Blogger yang berbeda. Silahkan coba dan lihat pada ke dua link di bawah ini.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

8 Comments Add Comment

mas adhy, template sy sudah responsive. tapi ada satu postingan yang tidak responsive shg tidak mobile friendly... sy tahu bahwa itu karena sy tulisi huruf yang panjang tanpa spasi... itu solusinya gimana mas...? Mohon pencerahannya...
ini satu postingan yg g mau responsive: http://pelitasantri.blogspot.co.id/2015/11/testing-postingan-bergambar-2.html

Balas

Bukan tulisannya yang tidak responsive tapi memang kerangka luarnya yang tidak responsive. Coba cari kode ini
@media (max-width: 992px)
.container-fluid, #satu, #dua, #tiga {
width: 97%;
}


Kemudian tambahkan kode di bawah ini pada css di atas.

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;


Lebih jelasnya simak di sini http://www.kompiajaib.com/2015/05/mengatur-lebar-100-pada-tag-input.html

Balas

tetep gak ada reaksi kang adhy...

Balas

Jadi penasaran pingin ngoprek blog ane juga, tunggu aku coba dulu nanti aku info hasilnya, thanks ilmunya mas :)

Balas

salam pak, saya udah coba.. berhasil.. tapi ga full responsive, tombol geser bawahnya masih ada(meskipun dikit)
dan tahap ke 3 saya lewatkan ga pak.. soalnya ga ada.. kira kira gimana cara perbaikinnya, pak?

Balas

Hallo Pak, saya mau tanya, untuk blog saya, header yang ada di blog kalau dibuka dari hp (tanpa mobile view), gambarnya jadi melebar. Apakah bisa dipakai kode di atas untuk membuat gambar headernya jadi susut ya? Link website saya ada di sini http://resensibukunisa.blogspot.co.id/?m=0

Balas

Coba dengan trik di atas agar responsive, kemudian matikan mobile template di dashboard > template > mobile > pilih NO.

Lalu tambahkan juga css ini agar gambar header menjadi responsive
#header-inner{
background-size: 100% 100%;
width:100%!important;
}

Balas

Saya nggak bisa nemu kode yang di postingan atas Pak, jadi nggak bisa edit html-nya.

Kode yang ini diletakkan di bagian yang mana ya Pak? Terima kasih

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×