Cara Mudah Membuat Template Blogspot menjadi Responsive dengan Kode CSS

By Omegarion 28 Jun, 2019 1 comment

Era mobile Internet sudah bergulir dan akan terus semakin berkembang untuk beberapa tahun kedepan. Penggunaan smartphone, tablet, gadget- gadget yang selalu terkoneksi dengan internet serta mudah untuk dibawa, menjadi tren yang selalu meningkat dari tahun ke tahun. Diperkirakan, sekitar 100 juta orang di Indonesia, akan menjadi pengguna aktif smartphone yang terbesar keempat di dunia setelah Cina, India dan Amerika pada tahun 2018.

Sebagai seorang Blogger, Publisher ataupun pembuat konten, mau tak mau Anda harus mengikuti perkembangan yang terjadi agar apa yang sedang Anda bangun melalui Blog saat ini, tidak tertinggal dan ditinggalkan oleh pengunjung setia Blog Anda. Desain responsive merupakan salah satu solusi ampuh dari beberapa metode yang ditawarkan dalam mengantarkan konten kepada setiap pengunjung yang mengakses Blog anda melalui perangkat Mobile mereka.

APA ITU TEMPLATE RESPONSIVE ?

Responsive Web Design (RWD) adalah sebuah pendekatan untuk desain web yang bertujuan untuk menyusun situs untuk memberikan tampilan optimal dan interaksi pengalaman mudah membaca dan navigasi dengan minimal mengubah ukuran, panning, dan bergulir -di berbagai perangkat (dari desktop komputer monitor ke ponsel)-

Arti mudahnya, template yang kita gunakan di blog, harus bisa menyesuaikan ukuran secara otomatis kesegala macam bentuk dan ukuran layar yang digunakan oleh pengguna.

Apa keuntungan menggunakan desain template yang responsive ?

Blog Anda akan terlihat lebih bagus pada perangkat apapun yang digunakan pengguna.
Kemudahan bagi pengunjung karena mereka tidak perlu melakukan Zooming pada konten blog Anda
Pengalaman pengguna yang baik di blog Anda akan meningkatkan jumlah pageviews dan kunjungan kembali.
Semua halaman blog anda dapat diakses lebih mudah di setiap perangkat pengguna meskipun ukuran layar berbeda-beda.
Mudah dalam pengelolaan karena Anda hanya akan memiliki 1 URL domain untuk tampilan versi desktop dan mobile

Sebelum memulai untuk membuat template blog blogspot Anda menjadi Responsive, ada baiknya kita mengetahui beberapa hal dasar yang perlu dipahami dalam mendesain template responsive.

Struktur Dasar Template blog Blogspot

Sebagai landasan awal sebelum kita membuat template default bawaan Blogspot Anda menjadi responsive, disini Anda dituntut untuk memahami, setidaknya bahasa yang digunakan dalam template blogspot Anda.

Pada dasarnya, bahasa pembentuk template blogspot tidaklah jauh berbeda dengan beberapa bahasa pembentuk template blog lainnya. Terdiri dari 3 bahasa utama yaitu :

HTML
Cascading Style Sheet (CSS)
Javascript

Selain dari bahasa tersebut, Anda juga perlu mengetahui bagaimana layout (tata letak) dan widget-widget pada blogger itu sendiri. Secara umum ada sekitar 7 komponen penting yang perlu Anda kenali pada tata letak dan layout blogger yaitu:

Body
Wrapper (pembungkus)
Header
Main Column
Post
Body
Sidebar
Footer

2. Syarat membuat Template blogspot Responsive

Menggunakan tag meta viewport responsive
Menggunakan css media query

Pengaturan gambar dan teks menjadi responsive. Seperti kita sudah ketahui bersama bahwa dalam sebuah blog terdapat 3 bentuk media utama yang sering digunakan sebagai isi konten blog itu sendiri, adapun bentuk media-media tersebut adalah:

Media berbentuk tulisan (text)
Media berbentuk Gambar
Media berbentuk Video

Selain ketiga bentuk diatas, masih banyak bentuk media lain yang bisa di isikan kedalam blog Anda seperti game, animasi, tabel, dll. Semua bentuk media diatas perlu kita atur agar bisa menjadi responsive. Pengaturan ini dilakukan melalui kode CSS yang dibungkus oleh media queri untuk lebar tertentu. Begitu pula dengan widget pada tata letak / layout template blog itu sendiri. Masing-masing widget perlu diatur sedemikian rupa supaya bisa mengikuti perubahan layar. Khususnya, apabila pengguna menggunakan posisi layar yang berbeda yaitu ketika mereka melihat layar dengan posisi horizontal ataupun vertical. Inilah mengapa template blog yang responsive harus bisa memenuhi semua kondisi tersebut. OK, selanjutnya apa yang perlu dilakukan untuk membuat template Blogspot Anda menjadi responsive ?

Langkah Persiapan

Masuklah ke dashboard Blogspot Anda.
Pilih menu Layout, simpan semua kode dan script yang terdapat didalam gadget-gadget tambahan yang ada di template blog lama Anda ke dalam notepad.
Setelah Anda menyimpan semua script gadget yang ada di menu layout, silahkan Anda lanjutkan dengan masuk ke menu editor template.
Pilih menu template
Lakukan back up template terlebih dahulu sebelum kita melakukan perubahan.
Setelah Anda back up template, klik “edit HTML” untuk memulai perubahan.

Catatan I :

Template yang akan kita gunakan untuk dijadikan responsive kali ini adalah template tipe sederhana (simple) berwarna orange (oranye), dengan satu kolom sidebar disisi kanan.

LANGKAH 1

Menonaktifkan Navbar default blogspot

Sebagai awalan sebelum membuat template blog kita menjadi responsive, kita perlu menonaktifkan Navbar default Blogger. Navbar default Blogger selain tidak responsive karena ia menggunakan javascript, ia juga membuat blog Anda menjadi terlihat kurang menarik dan terkesan kurang profesional.

Ada 3 cara yang bisa Anda lakukan untuk menonaktifkan Navbar default Blogger ini, pilih saja salah satu langkahnya

1. Menambahkan Kode CSS penghilang Navbar

Cara pertama ini dilakukan dengan menambahkan kode css penghilang Navbar.

Masuk ke editor template blog Anda

Cari kode berikut ]]> gunakan ctrl+F untuk memudahkan pencarian.

Copy kode css dibawah berikut :

#navbar, #navbar-iframe{ height: 0px; visibility: hidden; display: none;}

Paste dan letakkan kode css diatas tepat diatas kode ]]>tadi.

Melalui Menu Layout

Masuklah kembali ke pilihan menu layout yang ada disamping kiri layar dashboard Blogspot Anda, kemudian pilih pada bagian navbar, lalu klik edit.

Setelah itu pilih OFF untuk menonatifkan navbar tersebut.

Perhatikan gambar dibawah berikut :

Melalui menu Editor Template ;

Masuklah kembali ke pilihan menu editor template yang ada disamping kiri layar dashboard Blogspot Anda, kemudian pilih pada bagian EDIT HTML. Setelah Anda masuk kedalam menu edit html, klik kiri didalam kotak tersebut untuk mengaktifkan editing .

Gunakan CTRL + F ,lalu cari kode seperti dibawah berikut :

Bla. . bla. . . bla . . .

Hapuslah seluruh kode tersebut dan simpan perubahan yang sudah dilakukan.

LANGKAH 2

Pemeriksaan meta viewport

Bentuk tag meta viewport responsive adalah sebagai berikut :

Tag meta viewport akan memberikan instruksi ke browser untuk mengatur dimensi dan skala blog. Nilai width=device-width, artinya lebar blog akan mengikuti lebar dari layar perangkat yang digunakan. Nilai inital-scale=1, artinya blog akan diberikan skala (zoom) menjadi 1 (normal).

Jika Anda menemukan tag meta viewport yang berbeda, maka lakukanlah penggantian tag meta viewport tersebut dengan tag meta viewport pada contoh diatas.

Perhatikan gambar di bawah ini :

LANGKAH 3

Menambahkan perintah CSS word-wrap

Word-wrap berfungsi untuk mengatur teks supaya otomatis mengikuti lebar media ditempat dimana ia diletakkan, tanpa memotong teks tersebut.

Properti dan value pada cssnya adalah seperti berikut:

.word-wrap : break-word;

Oleh karena kita akan membuat responsive seluruh bagian teks pada template, maka perintah css word-wrap ini akan kita letakkan pada kode css bagian body. Tujuannya adalah supaya semua teks dan tulisan yang ada didalam elemen body bisa menjadi responsive.

Perhatikan langkahnya dibawah berikut :

Buka kembali template editor blog Anda, lalu ikuti langkah berikut ini

Gunakan ctrl + F, cari kode css yang mirip dengan kode berikut:

/* Content----------------------------------------------- */

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

padding: 0 $(content.shadow.spread)

$(content.shadow.spread)$(content.shadow.spread);

$(body.background.override)

}

Tambahkan tanda ; (titik koma) pada bagian belakang

$(body.background.override) sehingga menjadi

$(body.background.override) ;

Lanjutkan dengan menambahkan kode css

.word-wrap : break-word;

Tepat setelah Anda menambahkan kode ; dilangkah B.
Sehingga hasil akhirnya akan sbb :

/* Content ----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread)
$(content.shadow.spread)$(content.shadow.spread);
$(body.background.override);
.word-wrap : break-word;
}

Dengan menambahkan kode css tersebut, maka secara otomatis, panjang teks akan diatur sehingga akan selalu sesuai pada tempatnya tanpa memotong teks tersebut.

LANGKAH 4

Mengatur gambar dalam postingan menjadi responsive.

Seperti yang sudah saya jelaskan sebelumnya, media berbentuk gambar juga harus di buat menjadi responsive agar ia dapat mengikuti perubahan bentuk layar pengguna.

Berikut adalah contoh gambar yang belum responsive.

Pada gambar diatas bisa kita lihat bahwa batas kanan gambar lebih menjorok keluar sehingga bertumpukan dengan isi konten sidebar. Untuk itu, maka kita perlu mengatur kode css untuk gambar dalam postingan supaya tetap berada dalam pembungkus post body.

Karena gambar yang akan kita atur berada dalam post body, maka kita akan menambahkan kode css yang digunakan untuk gambar dalam post body tersebut, berikut langkahnya :

Buka editor template blog Anda kembali

Gunakan ctrl + F , cari kembali kode ]]>

Setelah Anda menemukan kode tersebut, copylah kode css di bawah berikut :

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

Pastekan kode css tersebut, tepat diatas kode ]]> tadi, kemudian simpan dan lihat hasilnya.

Gambar diatas menunjukkan bahwa width: 100% (lebar gambar di set pada 100%) didalam pembungkus post body, artinya lebargambar akan tetap full 100% persen sesuai dengan lebar layar yang digunakan.

LANGKAH 5

Mengatur lebar body template.

Supaya Lebar body template , widget konten dan isi konten dalam template blog Anda bisa menyesuaikan lebar perangkat secara otomatis, maka langkah selanjutnya adalah mengubah kode css body menjadi auto, ikuti langkahnya seperti dibawah berikut:

Pada editor template blog Anda, gunakan ctrl + F dan carilah kode dibawah berikut .

Didalam kode tersebut, cari kembali kode css body yang seperti ini :

body {
width: $(content.width);

Ganti nilai $(content.width); menjadi auto; , sehingga hasilnya akan menjadi seperti berikut :

body {
width: auto;
}

Simpan perubahan yang sudah dilakukan.

CATATAN II :

Sampai di tahap ini, template default blog Anda belumlah responsive, masih ada satu tahap lagi yaitu menambahkan kode css media query.

Kode css media query inilah yang akan berperan untuk membuat template blog kita menjadi responsive dan bisa kita atur sesuai dengan kebutuhan lebar layar yang akan digunakan.

LANGKAH 6

Menambahkan css media query.

Langkah terakhir untuk membuat template blog Anda menjadi responsive adalah dengan menambahkan css media query. Ikuti cara dan langkah menambahkan css media query berikut ini :

Buka editor template blog Anda.

Gunakan ctrl + F, kemudian cari kode

Setelah Anda menemukan kode

, copy paste css media query dibawah berikut :

Pastekan kode css media query tadi tepat diatas kode

Simpan dan lihat perubahannya.

Pada percobaan yang sudah saya lakukan, maka sampai di tahap ini template default blogspot Anda seharusnya sudah bisa menjadi template blog yang responsive.

LANGKAH PEMERIKSAAN

Saat ini, saya yakin bahwa Anda sudah berhasil untuk membuat template default blogspot Anda menjadi responsive. Untuk memastikannya ia dapat bekerja dengan baik, maka ikuti langkah langkah pemeriksaan selanjutnya seperti berikut.

Nonaktifkan mobile view template default

Untuk memastikan Template Blog Anda bekerja dengan system responsive, maka kita perlu menonaktifkan system mobile view bawaan Blogspot (default).

Langkah untuk menonaktifkannya adalah sebagai berikut :

Kembalilah ke awal menu editing template
Klik ikon roda gigi dibawah tampilan seluler
Pada Pop Up ( Jendela munculan Baru ) pilih dan klik
lingkaran pada tulisan “Tidak. Tampilkan template seluler di perangkat seluler.”
Klik simpan untuk menyimpan perubahan.

Tes dengan mobile friendly tester

Setelah Anda menonaktifkan tampilan seluler (mobile view) sekarang masuklah ke alamat URL ini.

https://www.google.com/webmasters/tools/mobile-friendly/

Ketik dan masukkan alamat URL blog Anda pada kotak yang tersedia, kemudian klik Analisa untuk memulai pengetesan. Perubahantemplate default blogspot menjadi responsive bisa dikatakan berhasil jika alat uji menampilkan “Mengagumkan ! Laman ini mobile friendly.”