Bukan hanya melalui laptop/PC, semua orang dengan mudahnya dapat mengakses internet untuk mencari informasi melalui gadget-gadget canggih yang mereka miliki. Oleh karena itu, sebagai seorang Blogger mau tidak mau harus tunduk dan mengikuti perkembangan yang terjadi agar apa yang anda usahakan melalui blog yang dimiliki, tidak tertinggal dan ditinggalkan oleh pengunjung atau pembaca setia blog.
Cara terbaik dari beberapa metode yang ditawarkan dalam mengantarkan konten-konten blog kepada setiap pengunjung yang mengakses blog melalui perangkat seluler atau mobile adalah penggunaan design template responsive ramah smartphone (Mobile Friendly) ke blog. Tampilan blog yang responsive adalah hal yang sangat penting. Responsive scale menjadi tumpuan bagi sebuah blog agar mendapat predikat "mobile friendly" ketika muncul pada hasil pencarian search engine. Ini berarti blog tersebut dapat dinikmati 100% tanpa kekurangan jika diakses melalui perangkat mobile.
Baca juga : Membuat Menu Navigasi Plus Kotak Pencarian Responsive
Banyak template responsive gratis maupun berbayar bertebaran di internet. Namun bagaimana jika pemilik blog tidak mau mengganti template yang digunakan dengan template responsive mobile friendly, karena template yang digunakan design tampilannya yang bagus dan sudah terlanjur sayang dengan template tersebut tapi belum mobile friendly atau responsive. Tentu saja jika blog menggunakan template yang belum responsive mobile friendly akan mempengaruhi jumlah visitor blog yang akan semakin berkurang. Sedangkan apabila anda berfikir untuk mengganti template blog dengan template responsive, tapi belum faham cara mengganti template, silahkan baca artikel berjudul Cara Mengganti Template Blog di Blogger
Untuk mengetahui apakah template blog atau website yang digunakan sudah responsive atau belum cek di situs berikut.
https://search.google.com/test/mobile-friendly
Apabila design template favorite yang anda gunakan ternyata belum responsive atau mobile friendly, silahkan simak dan ikuti langkah-langkah berikut dengan seksama.
Pertama yang harus dilakukan, silahkan login ke akun blogger anda, pilih blog yang templatenya belum responsive. Pilih menu Tema atau Template, lalu tekan tombol Backup/Pulihkan yang berada di pojok kanan atas layar. Hal ini dilakukan untuk berjaga-jaga jika terjadi kesalahan saat melakukan edit HTML pada kode template dan anda adalah seorang pelupa.
Jika sudah silahkan tutup dan klik tombol Edit HTML untuk membuka editor kode template. Pastikan pada kode template sudah terdapat kode berikut
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Biasanya kode tersebut terletak diantara kode <head>.......</head>, jika belum ada, copy paste kode tersebut tepat di bawah kode <head>.
Layout Responsive
Langkah selanjutnya yang harus dilakukan adalah menggunakan CSS media query. Dengan media query anda bisa mengatur kolom header, main, footer, atau sidebar tanpa mengubah atau mengedit kode CSS aslinya. Caranya, silahkan tambahkan kode berikut ini di atas kode </head>
<style>
Untuk laptop
@media only screen and (max-width:1024px){
selector/class/id{
property:value
property:value
}
}
Untuk tablet
@media only screen and (max-width:768px){
selector/class/id{
property:value
property:value
}
}
Untuk phablet
@media only screen and (max-width:580px){
selector/class/id{
property:value
property:value
}
}
Untuk Handphone android crappy
@media only screen and (max-width:330px){
selector/class/id{
property:value
property:value
}
}
</style>
Catatan :
- Nilai max-width pada kode media query di atas bisa diubah sesuai dengan target ukuran perangkat.
- Selector/class/id merupakan nama elemen id pada kode template, contoh #outer-wrapper, #main-wrapper, #footer-wrapper, #sidebar-wrapper, .post-body, .post, .breadcrumbs dan lain-lain. Nama elemen id terkadang berbeda-beda tergantung template, jadi silahkan disesuaikan saja dengan kode template anda dan mencobanya satu persatu.
- Property:value merupakan kode CSS yang digunakan untuk merubah nilai lebar tinggi, tampil atau tidak tampil dan sebagainya.
Contoh penerapan :
#outer-wrapper {width:900px;}
#main-wrapper, #sidebar-wrapper {width:510px;margin:0 10px 0 0;float:left;}
@media screen and (max-width:330px){
#outer-wrapper {width:95%;}
#main-wrapper, #sidebar-wrapper {width:100%;margin:0 auto;float:none;}
}
</style>
Penjelasan :
- Jika di resolusi layar di bawah 330px maka outer-wrapper mempunyai lebar 95% dari ukuran layar perangkat hardware. sedangkan jika di atas 330px outer-wrapper mempunyai lebar 900px.
- Jika di resolusi layar di bawah 330px maka main dan sidebar mempunyai lebar 100% atau memenuhi outer-wrapper, margin:0 auto, float:none. sedangkan jika di atas 330px main dan sidebar mempunyai lebar 510px, margin:0 10px 0 0, float:left.
- Mungkin ada yang masih bingung di resolusi pas 330px ukuran lebar outer-wrapper nya 900px atau 95%. Jawabannya adalah 900px. karena media-query mengatur resolusi di bawah 330px.
- Kode margin:0 auto;float:none; digunakan di resolusi kecil supaya menjadi satu kolom. Sedangkan di resolusi besar seperti 800px tidak perlu dipakai.
- Di atas merupakan contoh untuk outer, main, sidebar wrapper sedangkan untuk pengaturan yang lainnya seperti header, menu navigasi, post, comment, footer, dan lain-lain anda atur sendiri sesuai template masing-masing.
Gambar Responsive
img{ height:0 auto; width:0 auto; max-width:100% }
Video Responsive
Untuk video responsive, berikut kode yang bisa anda gunakan untuk disisipkan ke dalam media query.
.respmedia { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .respmedia iframe, video, object, embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Font Responsive
Untuk font ini biasanya terletak pada ukuran font yang terlalu besar jika blog diakses melalui seluler sehingga tampilan font terlihat penuh. Nah anda bisa mengatasi hal ini dengan memasukkan kode seperti contoh di bawah ini tergantung font mana yang ingin diubah ukurannya menjadi lebih kecil apakah :
- body {font: nilai ukuran font;} untuk mengubah ukran font secara keseluruhan
- #hedaer {font: nilai ukuran font;} untuk mengecilkan ukuran judul blog
- .post-body {font: nilai ukuran font atau font-size:nilai ukuran font;} untuk mengecilkan ukuran font postingan
- .post-title {font-size:nilai ukuran font;} untuk mengecilkan ukuran font judul postingan
Semuanya tergantung kode pada kode template blog yang anda miliki.
Sebagai contoh saya ingin mengecilkan ukuran font judul postingan, berikut kode yang saya gunakan untuk saya sisipkan ke kode media queries
.post-title {font-size:1.7em;}
Bagaimana sobat sangat memusingkan kepala bukan? Tetapi kalau anda terus berusaha keras dan terus belajar pasti bisa anda lakukan. Tidak perlu mendalami ilmu CSS terlalu dalam, anda hanya cukup memahaminya dengan mematokkan kode-kode elemen id serta kode CSS yang digunakan di dalam template kesayangan anda. Untuk menghindari hal-hal yang tidak diinginkan gunakan blog lain dengan template yang sama untuk anda melakukan eksperimen.
Dengan memodifikasi atau mengubah template kesayangan anda menjadi template responsive atau mobile friendly, maka blog anda akan terlihat lebih profesional di mata para pengunjung.
Template yang saya gunakan di blog ini merupakan template jadul yang belum mengikuti jaman alias belum mobile friendly atau responsive, sehingga saya harus bersusah payah mencari elemen id template blog saya untuk mengubahnya menjadi responsive. Menu navigasinya pun saya ganti dengan menu navigasi yang responsive mobile friendly. Walau tampilan blog secara keseluruhan blum terlalu soft atau lembut.
Demikian tutorial sederhana walau sebenarnya sangat ribet dan membuat kepala saya pusing dan terkadang saya ingin menyerah, tapi saya harus tetap semangat dan akhirnya berhasil sesuai dengan keinginan walau mungkin hasilnya tidak sesuai di mata para master blogger. Semoga bermanfaat and " Happy Blogging "
Related Posts :
Silahkan
klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG
8 komentar:
sipp tutorialnya, blog sekarang memang harus mobile friendly
Mantap artikelnya 👍.
Kalau boleh tanya, aku pengin tau tentang sebetulnya boleh dan bisa tidaknya jika blog sudah dimonetisasi ...,diganti template ?.
Ada keinginan pengin ganti template agar beda tampilan, blog ku sudah responsive cuma ingin ganti tampilan saja.
Ada yang bilang katanya bikin kode adsense jadi hilang, ada yang bilang bisa atau boleh.
Jadi bingung wkkwwkk ..
@Wong Crewchild, iya sob untuk mengikuti perkembangan teknologi yang makin hari makin lebih banyak digunakan oleh penyuka teknologi.
@Himawan sant, Sebenarnya bisa, kalau urusan kode iklan hilang itu karena kode yang dipasang pada kode template, untuk solusinya bisa dipasang kembali dengan mengambil kode pada akun adsense
Oh begitu, mas.
Jadi bisa diganti template.
Terimakasih penjelasannya ya, mas Harman.
@Himawan Sant, sama-sama mas hima
mantap nih artikelnya kak sangat membantu dan bermanfaat sekali hehehe.
btw, jangan lupa kunjungi balik blog aku yah.
di : www.monitasaki.com
belajar ngeblog dari gak bisa sampai bisa :)
Terima kasih tutorialnya lumayan memusingkan sob
Post a Comment
...... Terima kasih telah berkunjung, silahkan berkomentar dengan baik sopan sesuai dengan tema konten dan tidak mengandung unsur Sara ......