-->

Cara agar blog responsif dan tangguh disemua perangkat

 cara membuat / mengubah templat standar / default Blogger menjadi tangguh di segala medan (layar) alias responsif.

Cara membuat blog responsif

Sebenarnya Blogger sudah menyediakan fitur untuk tampilan seluler, hanya saja masih tetap sederhana dan rasanya kurang mendukung dalam menampilkan iklan. Lantas bagaimana cara agar template blog / web menjadi responsif tanpa mengaktifkan tampilan seluler?

Memang sudah banyak tutorial cara membuat template blog menjadi responsif, baik cara membuat template responsif sendiri maupun cara - cara lain, tetapi apa yang akan saya bagikan ini termasuk cara baru membuat blog template responsif (Blogger). Yang dihasilkan bisa langsung Anda lihat di blog ini (menggunakan ponsel / smartphone).

Sebelum mengikuti tutorial ini, coba backup / cadangkan terlebih dahulu templat Anda, atau buat blog baru sebagai bahan percobaan. Baca dan ikuti langkah - langkahnya dengan seksama, AWAS !!! Jangan sampai kamu salah kamar ok.

Silakan ikuti tutorial cara membuat default template Blogger responsif tanpa mengaktifkan tampilan seluler.

1. Cari kode berikut ini, masukkan ada di dalam tag head.

Hapus dan ganti dengan kode di bawah ini.

2. Hapus kode berikut atau yang ditampilkan <b:template-skin>.

"Sekedar Mengingatkan !!!"
Setelah membuat template Blogspot responsif, ada beberapa hal yang perlu dilakukan untuk mendukung tampilan blog responsif, atau meminta membuat template lebih SEO.
 name='viewport'/>

2. Hapus kode berikut atau yang ditampilkan <b:template-skin>.

"Sekedar Mengingatkan !!!"
Setelah membuat template Blogspot responsif, ada beberapa hal yang perlu dilakukan untuk mendukung tampilan blog responsif, atau meminta membuat template lebih SEO.
Cara mengubah halaman utama menjadi cuplikan dan thumbnail
Cara membuat menu halaman (pagelist) dropdown responsif pada tampilan seluler
Cara membuat / mengubah tombol halaman berikutnya Blogspot menjadi angka
Tag heading modifikasi h1 dinamis pada Blogspot
Cara membuat video YouTube responsif di blogspot .
Cara membuat widget gambar di tengah dan responsif.

Cari kode seperti di bawah ini (ada ada di dalam <b:template-skin>)


Nilai width (main inner)di atas dapat diganti sesuai dengan selera Anda, dengan catatan jumlah total tidak boleh melebihi 100% (kurang boleh lebih tidak). Untuk menentukan nilai leftdan rightdengan cara 100% menentukan nilai width (main inner).

4. Salin kemudian pastekan kode css diikuti tepat di atas kode ]]></b:skin>.
.separator a{margin-left:0px!important;margin-right:0px!important;}
.post img{max-width:100%;height:auto;}

Gambar ini berfungsi agar gambar tidak melebar kesamping.

5. Salin kemudian pastekan kode css selanjutnya tepat di atas kode ]]></b:skin>, silakan pilih kode css sesuai jenis templat yang digunakan untuk

Templat Sederhana dan Templat Perjalanan gunakan kode css di bawah ini

Untuk Template PT Keren Sekali gunakan kode css di bawah ini

Untuk Templat Jendela Gambar gunakan css di bawah ini

Untuk Templat Tanda Air dan Kelembutan kodenya sama dengan Templat Jendela Gambar tapi hapus kode angka 9 (sembilan) lalu ganti dengan kode berikut
.main-inner .column-center-inner{padding:0}
.main-inner column-left-inner {padding:20px}

6. Simpan Template
Setelah template tersimpan, selanjutnya klik Kembali, kemudian non aktifkan tampilan selulernya. Lihat blog Anda.

Kunjungi Mobile Friendly Test - Google untuk mengetahui Apakah blog / web Anda Mobile friendlytanpa harus mengaktifkan tampilan seluler?

Kunjungi pula situs pemeriksa web responsif untuk melihat tampilan blog pada setiap layar.

Catatan:
Pada dasarnya kode css inti untuk semua jenis template Blogger sama, yang ditentukan pada css padding sidedanmargin sidedari masing-masing template memiliki nilai dan lokasi yang berbeda - berbeda, penulis hanya melakukan percobaan pada template pertama dari masing-masing jenis template. Jika hasil yang diinginkan tidak sesuai (khusus pada layar 320 piksel).
           

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1


lihat juga: info menarik

Iklan Tengah Artikel 2

Iklan Bawah Artikel


lihat juga: webdonlot