Baiklah kali ini saya akan share bagaimana cara membuat template blog jadi responsive. Sebelumnya saya ucapkan terimakasih telah berkunjung ke blog yang sederhana ini.
Menerapkan desain responsive pada template blogger bukanlah hal yang mudah.kita harus tahu dasar dasar html dan CSS untuk membuatnya.
Namun jika sobat ingin mempelajari atau mendalami html dan CSS sobat bisa mengunjungi www.w3schools.com disana kalian dapat mempelajari dasar untuk pengembangan web canggih.
Jadi mari kita mulai caranya sebagai berikut :
1. Mengatur ViewPort
Hal pertama yang perlu kita lakukan untuk membuat template blogger kita responsif adalah untuk mengatur meta tag viewport. Untuk mengatur viewport yang benar pada template blogger kita perlu menambahkan tag meta ini :
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
di atas kepala template kita. Meta tag viewport atas hanya mengatakan bahwa lebar viewport tata letak harus sama dengan lebar perangkat. Kami juga mengatur skala awal untuk 1 untuk menghindari beberapa IOS masalah format perangkat.
Cara Menambahkan Viewport Meta Tag di Blogger :
1. Pergi ke Blogger Dashboard
2. Klik tombol Template
3. Lalu ke Edit HTML dan cari kode ini <head>
4. Paste kode yang diberikan di bawah nya
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
2. Terapkan Layouts Fluid
Salah satu hal dasar yang harus kita lakukan untuk membuat template blogger kita responsif adalah tata letak cairan. tata letak cairan adalah desain dari bisa beradaptasi dengan ukuran layar yang berbeda. Contoh khas Tata Letak Fluida adalah ketika pengguna akan mengubah telepon dari portrait ke modus lansekap tetap menjaga proporsi elemen pada halaman. Menerapkan Tata Letak Fluida termasuk menggunakan em dan% sebagai unit Anda dari pengukuran bukan ukuran fix (px). Blogger Template terdiri dari unsur-unsur yang berbeda yang perlu beradaptasi dengan ukuran layar yang berbeda, terutama ukuran font, konten-wrapper, sidebar-wrapper dan header-wrapper. Untuk menerapkan tata letak cairan pada unsur-unsur ini kita harus mengubah unit pengukuran dari px ke em atau%.
Berikut kodenya untuk tutornya cari Mbah Google sob :
<style>
#outer-wrapper {width:960px; color: red}
#main-wrapper {width: 65%; color: green}
</style>
<div id="outer-wrapper">
<div id="main-wrapper">
</div>
3. Gunakan Media Query
Ada banyak jenis perangkat yang orang gunakan dalam berselancar di web seperti ponsel pintar dan tablet dengan ukuran layar yang berbeda. Dengan menggunakan Media Query kita dapat merancang blog kita, sesuai dengan ukuran layar yang berbeda karena masing-masing lebar perangkat memiliki pengalaman pengguna yang terbaik yang berbeda untuk dipertimbangkan. Pertanyaan Media benar-benar penting untuk desain web responsif, dan juga membantu kita untuk mengoptimalkan jalur render kritis pada template blog kita.
Saya sudah memberikan CSS sederhana Media Query, Anda harus meletakkannya setelah kode ini ]]></b:skin> pada template blogger Anda. Melihat kode di bawah, max-width hanya mengatakan bahwa setiap perangkat yang memiliki kurang dari atau sama dengan max-width browser akan menggunakan CSS dalam dua tanda kurung.
Berikut kodenya :
/* For Desktops and Laptops*/
@media only screen and (max-width : 1280px) {
/* If device width is less than or equal to 1280px */
}
/* For Tablets*/
@media only screen and (max-width : 1024px) {
}
/* For Small Tablets*/
@media only screen and (max-width : 768px) {
}
/*For iPhones */
@media only screen and (max-width : 640px) {
}
/* Mobiles */
@media only screen and (max-width : 480px) {
}
/* Small Mobiles */
@media only screen and (max-width : 320px) {
}
Tips 1: Dalam coding desain blog Anda dalam Media Query tertentu menerapkan Desain Fluid adalah suatu keharusan.
Tip 2: Cobalah untuk menggunakan alat pengembang Chrome dalam merancang blog Anda. Posting ini mungkin bisa membantu Menyesuaikan Blogger Template Menggunakan Alat Pengembang Chrome.
Tip 3: Buka blog Anda pada perangkat mobile untuk melihat apa kesalahan yang mungkin terjadi pada blog Anda. Anda dapat menggunakan situs ini: www.mobiletest.me untuk menguji blog Anda pada perangkat mobile yang berbeda kemudian menerapkan Tip # 2.
Tip 4: Cobalah untuk menghindari membuat kode CSS diulang. Sebagai contoh: di Media Query CSS di max-width: 768px Anda telah mengatur font-size: 1.2em maka Anda tidak harus menempatkan lagi kode yang sama untuk max-width: 480px. Selalu diingat kata max-width.
Nah demikian beberapa cara agar template blog jadi lebih responsive sob , semoga info ini bermanfaat untuk sobat sekalian.
Cara Membuat Template Blog Lebih Responsive
4/
5
Oleh
Unknown
