Cara mengubah template bawaan blogger menjadi resvonsive

TUTORIAL : Cara mengubah template bawaan blogger menjadi resvonsive
Label : WEBSITE tutorial

Next!

Hi gan :v kembali lagi ama ane kan :v ok di postingan kali ini ane mau sharing cara membuat atau mengubah template bawaan blogger menjadi resvonsive :v Bosen kan sama template bawaan blogger yang di sarankan sama blogger.com ? edit tema nya kayak gini deh gan! di jamin pengunjung bakalan betah sama blog agan :v wkwkwkw.

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:

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

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:

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.

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!

Nah gitu gan kira kira tutorial kali ini :v cukup sampe sini aja ya gan :v maaf kalo ada kata kata menyinggung gimana gitu :v thanks to : Allah swt.

SEMOGA BERMANFAAT! Silahkan Cek SUMUR