Cara Dan Metode Menciptakan Template Bawaan Blogger Jadi Responsive

cara Dan Teknik Membuat Template Bawaan Blogger Kaprikornus Responsive (Mobile Friendly).

POSTING me-responsive-kan template default blogger ini sebetulnya sudah ada di posting cara Dan Teknik Modifikasi Template Blog Bawaan Blogger.

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

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

Artinya, dengan memakai template bawaan blogger, maka blog Anda bebas link credit, alasannya ialah yang memodifikasi Anda sendiri.

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

Untuk Apa Dibuat Responsive?

Menjadikan tampilan Blog Responsive atau Mobile Friendly dimaksudkan biar blog kita lebih gampang terindeks mesin pencari Google (SEO Friendly).

Tampilan blog responsive juga biar blog ramah pengguna (user friendly) alasannya ialah lebih banyak didominasi pengguna internet kini memakai HandPhone/SmartPhone atau Mobile Devices untuk internetan.

Selengkapnya: 7 Alasan Harus Menggunakan Template Responsive

CARA #1 AKTIFKAN MOBILE TEMPLATE

Bagi blog platform Blogger, jan cubo cubo khawatir soal responsive desain ini, alasannya ialah Blogger milik Google ini sudah menyediakan template versi mobile.

Jika Anda memakai templata bawaan blogger, contohnya template Simple, aktifkan saja versi mobilenya dengan cara Template > klik Gear > Choose Mobile template, ibarat 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 dibentuk tahun 2013 ke atas sudah responsive, apalagi yang dibentuk taun 2015 ke atas ibarat di Galeri Template CB.

Jika Anda memakai 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 Dan Teknik Mengaktifkan Template Responsive.

CARA #3 RESPONSIVE-KAN TEMPLATE BAWAAN BLOGGER

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

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

Anggap saja Anda sudah menciptakan blog gres dengan memilih pilih template Simple seperti ini:

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

cara Dan Teknik Membuat Template Bawaan Blogger Kaprikornus Responsive

1. Nonaktifkan Navbar Blogger

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

2. Membuat Gambar Postingan Kaprikornus Reponsive
Cari instruksi di bawah ini:

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

Ganti instruksi tersebut dengan instruksi di bawah ini:

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

3. Cari instruksi 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 instruksi di bawah ini

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

4. Simpan instruksi CSS Responsive berikut ini di atas instruksi </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 balasannya di Mobile Friendly Test di atau Troy Responsive Tester.

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

Sumber http://www.contohblog.com/

Artikel Terkait

Cara Dan Metode Menciptakan Template Bawaan Blogger Jadi Responsive

4/ 5

Oleh Unknown

Unknown Juni 24, 2016