Membuat Blog Menjadi Responsive Mobile Friendly
Cara Membuat atau Memodifikasi Template Blog Menjadi Responsive Mobile Friendly - Seiring dengan bergulirnya perkembangan zaman, produk-produk teknologi juga ikut berkembang dengan pesat. Penggunaan smartphone, tablet, gadget-gadget yang selalu terkoneksi dengan internet serta gampang untuk dibawa, menjadi tren yang selalu meningkat dari tahun ke tahun. Dengan perkembangan dan meningkatnya penggunaan gadget secara pribadi maka akan sangat besar lengan berkuasa dalam dunia blogger.
Bukan hanya melalui laptop/PC, semua orang dengan mudahnya sanggup mengakses internet untuk mencari warta melalui gadget-gadget canggih yang mereka miliki. Oleh alasannya itu, sebagai seorang Blogger mau tidak mau harus tunduk dan mengikuti perkembangan yang terjadi biar 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 ialah penggunaan design template responsive ramah smartphone (Mobile Friendly) ke blog. Tampilan blog yang responsive ialah hal yang sangat penting. Responsive scale menjadi referensi bagi sebuah blog biar menerima predikat "mobile friendly" ketika muncul pada hasil pencarian search engine. Ini berarti blog tersebut sanggup dinikmati 100% tanpa kekurangan jikalau diakses melalui perangkat mobile.
Baca juga : Membuat Menu Navigasi Plus Kotak Pencarian Responsive
Banyak template responsive gratis maupun berbayar bertebaran di internet. Namun bagaimana jikalau pemilik blog tidak mau mengganti template yang digunakan dengan template responsive mobile friendly, alasannya template yang digunakan design tampilannya yang anggun dan sudah terlanjur sayang dengan template tersebut tapi belum mobile friendly atau responsive. Tentu saja jikalau blog memakai template yang belum responsive mobile friendly akan menghipnotis 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.
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 sajian Tema atau Template, kemudian tekan tombol Backup/Pulihkan yang berada di pojok kanan atas layar. Hal ini dilakukan untuk berjaga-jaga jikalau terjadi kesalahan dikala melaksanakan edit HTML pada arahan template dan anda ialah seorang pelupa.
Jika sudah silahkan tutup dan klik tombol Edit HTML untuk membuka editor arahan template. Pastikan pada arahan template sudah terdapat arahan berikut
Biasanya arahan tersebut terletak diantara arahan <head>.......</head>, jikalau belum ada, copy paste arahan tersebut sempurna di bawah arahan <head>.
Layout Responsive
Langkah selanjutnya yang harus dilakukan ialah memakai CSS media query. Dengan media query anda sanggup mengatur kolom header, main, footer, atau sidebar tanpa mengubah atau mengedit arahan CSS aslinya. Caranya, silahkan tambahkan arahan berikut ini di atas arahan </head>
Catatan :
- Nilai max-width pada arahan media query di atas sanggup diubah sesuai dengan sasaran ukuran perangkat.
- Selector/class/id merupakan nama elemen id pada arahan template, pola #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 diubahsuaikan saja dengan arahan template anda dan mencobanya satu persatu.
- Property:value merupakan arahan CSS yang digunakan untuk merubah nilai lebar tinggi, tampil atau tidak tampil dan sebagainya.
Contoh penerapan :
Penjelasan :
- Jika di resolusi layar di bawah 330px maka outer-wrapper mempunyai lebar 95% dari ukuran layar perangkat hardware. sedangkan jikalau 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 jikalau di atas 330px main dan sidebar mempunyai lebar 510px, margin:0 10px 0 0, float:left.
- Mungkin ada yang masih resah di resolusi pas 330px ukuran lebar outer-wrapper nya 900px atau 95%. Jawabannya ialah 900px. alasannya 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 menyerupai 800px tidak perlu dipakai.
- Di atas merupakan pola untuk outer, main, sidebar wrapper sedangkan untuk pengaturan yang lainnya menyerupai header, sajian navigasi, post, comment, footer, dan lain-lain anda atur sendiri sesuai template masing-masing.
Gambar Responsive Untuk gambar mempunyai perbedaan antara gambar responsive dengan gambar tidak responsive. Maka gambar pun harus dimasukkan ke dalam media query biar menjadi responsive. Berikut arahan yang harus digunakan biar gambar yang ada pada blog menyerupai di dalam postingan menjadi responsive.
Video Responsive
Untuk video responsive, berikut arahan yang sanggup anda gunakan untuk disisipkan ke dalam media query.
Font Responsive
Untuk font ini biasanya terletak pada ukuran font yang terlalu besar jikalau blog diakses melalui seluler sehingga tampilan font terlihat penuh. Nah anda sanggup mengatasi hal ini dengan memasukkan arahan menyerupai pola 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 arahan pada arahan template blog yang anda miliki.
Sebagai pola saya ingin mengecilkan ukuran font judul postingan, berikut arahan yang saya gunakan untuk saya sisipkan ke arahan media queries
Bagaimana teman sangat memusingkan kepala bukan? Tetapi kalau anda terus berusaha keras dan terus mencar ilmu niscaya sanggup anda lakukan. Tidak perlu mendalami ilmu CSS terlalu dalam, anda hanya cukup memahaminya dengan mematokkan kode-kode elemen id serta arahan CSS yang digunakan di dalam template kesayangan anda. Untuk menghindari hal-hal yang tidak diinginkan gunakan blog lain dengan template yang sama untuk anda melaksanakan 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 sajian navigasi yang responsive mobile friendly. Walau tampilan blog secara keseluruhan blum terlalu soft atau lembut.
Demikian tutorial sederhana walau bergotong-royong sangat ribet dan menciptakan kepala saya pusing dan terkadang saya ingin menyerah, tapi saya harus tetap semangat dan kesudahannya berhasil sesuai dengan impian walau mungkin hasilnya tidak sesuai di mata para master blogger. Semoga bermanfaat and " Happy Blogging "
Sumber https://harmansh.blogspot.com/
Bukan hanya melalui laptop/PC, semua orang dengan mudahnya sanggup mengakses internet untuk mencari warta melalui gadget-gadget canggih yang mereka miliki. Oleh alasannya itu, sebagai seorang Blogger mau tidak mau harus tunduk dan mengikuti perkembangan yang terjadi biar 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 ialah penggunaan design template responsive ramah smartphone (Mobile Friendly) ke blog. Tampilan blog yang responsive ialah hal yang sangat penting. Responsive scale menjadi referensi bagi sebuah blog biar menerima predikat "mobile friendly" ketika muncul pada hasil pencarian search engine. Ini berarti blog tersebut sanggup dinikmati 100% tanpa kekurangan jikalau diakses melalui perangkat mobile.
Baca juga : Membuat Menu Navigasi Plus Kotak Pencarian Responsive
Banyak template responsive gratis maupun berbayar bertebaran di internet. Namun bagaimana jikalau pemilik blog tidak mau mengganti template yang digunakan dengan template responsive mobile friendly, alasannya template yang digunakan design tampilannya yang anggun dan sudah terlanjur sayang dengan template tersebut tapi belum mobile friendly atau responsive. Tentu saja jikalau blog memakai template yang belum responsive mobile friendly akan menghipnotis 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 sajian Tema atau Template, kemudian tekan tombol Backup/Pulihkan yang berada di pojok kanan atas layar. Hal ini dilakukan untuk berjaga-jaga jikalau terjadi kesalahan dikala melaksanakan edit HTML pada arahan template dan anda ialah seorang pelupa.
Jika sudah silahkan tutup dan klik tombol Edit HTML untuk membuka editor arahan template. Pastikan pada arahan template sudah terdapat arahan berikut
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Biasanya arahan tersebut terletak diantara arahan <head>.......</head>, jikalau belum ada, copy paste arahan tersebut sempurna di bawah arahan <head>.
Layout Responsive
Langkah selanjutnya yang harus dilakukan ialah memakai CSS media query. Dengan media query anda sanggup mengatur kolom header, main, footer, atau sidebar tanpa mengubah atau mengedit arahan CSS aslinya. Caranya, silahkan tambahkan arahan berikut ini di atas arahan </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 arahan media query di atas sanggup diubah sesuai dengan sasaran ukuran perangkat.
- Selector/class/id merupakan nama elemen id pada arahan template, pola #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 diubahsuaikan saja dengan arahan template anda dan mencobanya satu persatu.
- Property:value merupakan arahan 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 jikalau 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 jikalau di atas 330px main dan sidebar mempunyai lebar 510px, margin:0 10px 0 0, float:left.
- Mungkin ada yang masih resah di resolusi pas 330px ukuran lebar outer-wrapper nya 900px atau 95%. Jawabannya ialah 900px. alasannya 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 menyerupai 800px tidak perlu dipakai.
- Di atas merupakan pola untuk outer, main, sidebar wrapper sedangkan untuk pengaturan yang lainnya menyerupai header, sajian 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 arahan yang sanggup 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 jikalau blog diakses melalui seluler sehingga tampilan font terlihat penuh. Nah anda sanggup mengatasi hal ini dengan memasukkan arahan menyerupai pola 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 arahan pada arahan template blog yang anda miliki.
Sebagai pola saya ingin mengecilkan ukuran font judul postingan, berikut arahan yang saya gunakan untuk saya sisipkan ke arahan media queries
.post-title {font-size:1.7em;}
Bagaimana teman sangat memusingkan kepala bukan? Tetapi kalau anda terus berusaha keras dan terus mencar ilmu niscaya sanggup anda lakukan. Tidak perlu mendalami ilmu CSS terlalu dalam, anda hanya cukup memahaminya dengan mematokkan kode-kode elemen id serta arahan CSS yang digunakan di dalam template kesayangan anda. Untuk menghindari hal-hal yang tidak diinginkan gunakan blog lain dengan template yang sama untuk anda melaksanakan 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 sajian navigasi yang responsive mobile friendly. Walau tampilan blog secara keseluruhan blum terlalu soft atau lembut.
Demikian tutorial sederhana walau bergotong-royong sangat ribet dan menciptakan kepala saya pusing dan terkadang saya ingin menyerah, tapi saya harus tetap semangat dan kesudahannya berhasil sesuai dengan impian walau mungkin hasilnya tidak sesuai di mata para master blogger. Semoga bermanfaat and " Happy Blogging "
Sumber https://harmansh.blogspot.com/