June 24, 2016

Cara Membuat Template Bawaan Blogger Jadi Responsive

June 24, 2016

Cara Membuat Template Bawaan Blogger Jadi Responsive
Cara Membuat Template Bawaan Blogger Jadi Responsive (Mobile Friendly).

POSTING me-responsive-kan template default blogger ini sebenarnya sudah ada di posting Cara Modifikasi Template Blog Bawaan Blogger.

CB repost supaya fokus ke cara Membuat Template Bawaan Blogger Jadi Responsive atau meresponsivekan default blogger template.

Dengan trik ini, pengguna template bawaan blogger, khususnya template Simple, tidak usah bingung lagi mencari template responsive yang bebas credit link selain yang premium.

Artinya, dengan menggunakan template bawaan blogger, maka blog Anda bebas link credit, karena yang memodifikasi Anda sendiri.

Tulisan Powered by Blogger atau Diberdayakan oleh Blogger boleh dihapus, boleh juga dibiarkan. (Baca: Cara Menghapus Powered by Blogger).

Untuk Apa Dibuat Responsive?

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.

Selengkapnya: 7 Alasan Harus Menggunakan Template Responsive

CARA #1 AKTIFKAN MOBILE TEMPLATE

Bagi blog platform Blogger, jangan khawatir soal responsive desain ini, karena Blogger milik Google ini sudah menyediakan template versi mobile.

Jika Anda menggunakan templata bawaan blogger, misalnya template Simple, aktifkan saja versi mobilenya dengan cara Template > klik Gear > Choose Mobile template, seperti pada gambar di bawah ini:

Cara Membuat Responsive Template Bawaan Blogger

Save!


CARA #2 GUNAKAN TEMPLATE RESPONSIVE

Ini cara lebih baik, yaitu gunakan template custom yang sudah responsive. Umumnya template yang dibuat tahun 2013 ke atas sudah responsive, apalagi yang dibuat taun 2015 ke atas seperti di Galeri Template CB.

Jika Anda menggunakan template responsive (responsive blogger template), maka setting di atas tidak berlaku, melainkan yang disetting begini: pilih "No. Show desktop template on mobile devices".

setting template responsive

Lihat juga: Cara Mengaktifkan Template Responsive.

CARA #3 RESPONSIVE-KAN TEMPLATE BAWAAN BLOGGER

Jika Anda bersikukuh menggunakan template bawaan blogger, namun ingin menjadikannya sebagai template responsive, maka lakukan langkah edit atau modifikasi berikut ini, seperti dishare oleh Kompi Ajaib yang banyak direpost juga oleh blogger lain --sebagian tidak mencantumkan sumber :)

Demonya, hasil penerapan tips Membuat Template Bawaan Blogger Jadi Responsive ini, bisa dilihat di CB Theme --Free Template tuh!

Anggap saja Anda sudah membuat blog baru dengan memilih pilih template Simple seperti ini:

Template Bawaan Blogger Simple



Nah, template tersebut kita akan jadikan responsive alias mobile friendly (Lihat Demo lainnya). Cara me-responsive-kannya sebagi berikut.


Cara Membuat Template Bawaan Blogger Jadi Responsive


1. Nonaktifkan Navbar Blogger
Klik Layout (Tata Tetak) > Edit Gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.

menonaktifkan navbar



2. Membuat Gambar Postingan Jadi Reponsive
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 {padding: 0;width:auto;max-width:100%;height:auto;}

3. 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'/>


4. 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 {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>



5. Save! Simpan Template!

Kini template default blogger yang Anda gunakan sudah responsive. Silakan cek hasilnya di Mobile Friendly Test di atau Troy Responsive Tester.

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

22 comments on Cara Membuat Template Bawaan Blogger Jadi Responsive

  1. ngasih ilmunya setengah setengah, ngak fokus.

    ReplyDelete
    Replies
    1. Sudah dikasih tiga cara masih ngeluh, nggak syukur nikmat ente :)

      Delete
    2. DIa itu Iq200 Om..hehehehe

      Delete
  2. gambar headernya gk ngikut gan, alias hilang setengah, gimana cara ngaturnya?

    ReplyDelete
  3. Siap-siap blog kita mankin keren di PC dan di Mobile ne

    ReplyDelete
  4. Ini yang saya cari selama iniiii. Berhasil mas. Makasih ya :D

    ReplyDelete
  5. gan, gak muncul kodenya edit html. jd gk bisa diganti

    ReplyDelete
  6. Om cb, script no 3 tidak ketemu, apa tutor ini masih work? Untuk template sederhana . Terima kasih

    ReplyDelete
  7. Saya pakai template download. apakah itu responsive gan?

    ReplyDelete
  8. Ngikutin semua step yang ada akhirnya work. Terima kasih tutorialnya :)

    ReplyDelete
  9. kalo blog bawaan yaitu simple bisa gak om di edit di tambahin navigasi menu?

    mohon pencerahannya

    ReplyDelete
    Replies
    1. SEMUA template blogger bisa ditambahin navigasi menu. Template simple yang diksih nav menu misalnya cbtheme.blogspot.com

      Delete
  10. Ternyata pada dasarnya mudah ya gan, baru paham setelah baca ini.
    Makasih gan.

    ReplyDelete
  11. CB kenapa ya tampilan blog ku jauh sekai, Kudu di Double click kalo mo Responsif.

    ReplyDelete
  12. makasih kodenya gan. :)
    izin ambil kode, sekalian mau belajar desain template.

    ReplyDelete
  13. thanks salam kenal from new blogger

    ReplyDelete
  14. mantap abang...artikelnya menarik untuk di coba..mengingat saya blogger pemulan dari timur

    ReplyDelete
  15. Terimakasih..sangat membantu sekali..ternyata ini cara yang langsung bisa diterapkan setelah browsing sana..sini..semoga sukses selalu buat contoh blog

    ReplyDelete
  16. halo gan, tolong bantuin, ini tampilan mobile kok pas ada image/gambarnya jadi melebar kemana-mana ya, jadi error ini. mohon bantu ya

    ReplyDelete
  17. Template yg bagus untuk traveling cucuknya ap

    ReplyDelete

Contact Form

Name

Email *

Message *