Cara Praktis Mengedit Template Agar Lebih Responsive: Web-Responsive? pernahkah kau mendengar kata itu?, tentu pernah bukan jikalau anda menggeluti sebuah bidang Web Devloper pasti kata ini sudah tidak abnormal lagi jikalau terdengar di indera pendengaran kalian. nah adakah yang sudah tau apa itu pengertian dari kata Web-Responsive?, bagi yang belum tau disini saya akan coba mengartikan kata dari Responsive ini.
Web-Responsive Design adalah Sebuah teknik yang dipakai untuk menciptakan layout website beradaptasi dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Makara tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang memakai teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah sanggup melihat tampilan website kita pada layar mobile device.
Cara Praktis Mengedit Template Agar Lebih Responsive
Jika anda ingin mengakibatkan layout template anda lebih responsive untuk lebih gampang mengetahui ukuran untuk layar berapa yang masih belum responsive anda sanggup gunakan tools online yang sudah menyediakan fitur canggihnya yaitu Responsinator situs ini menyediakan tools canggihnya untuk mengecek tampilan website/blog pada ukuran tampilan tertentu.1. Pertama silahkan anda kunjungi terlebih dahulu situs Responsinator lalu check tampilan blog anda dengan cara memasukan url blog anda. selanjutnya akan muncul tampilan blog/website anda dengan ukuran tampilan berbeda sesuai dengan ukuran pada masing-masing tampilan baik dari ukuran tampilan desktop maupun ukuran mobile.
Di atas yaitu gambar sebagai tumpuan mana tampilan sebelum dan sehabis responsive dari layar ukuran 384px blog ini. Bisa anda lihat tampilan gambar blog sebelum dan sehabis Responsive di atas, lihat perbedaanya di mana kedua tampilan box homepagenya berbeda.
Tampilan blog yang blom responsive mungkin akan terlihat lebih ke berantakan jikalau di lihat dalam mode tampilan tertentu baik memakai desktop dengan ukuran layar tertentu maupun tampilan mobile dengan ukuran tertentu juga.
Nah bagaimana cara supaya blog/website kita sanggup Responsive di semua tampilan? gampang sekali kok anda hanya perlu memahami instruksi CSS responsive di bawah ini dengan teliti. kemudian mencoba mempraktekannya.
2. Nah kini silahkan anda buka Blogger>Theme>Edit Html.
Strukture instruksi CSS akan terlihat ibarat ini
*Smartphones (portrait and landscape) ———– */ @media only screen and (min-width : 320px) and (max-width : 480px) { .astributclass {Max-width:100%;width: auto;} #astributId {Max-width:100%;width: auto;} /* Smartphones (landscape) ———– */ @media only screen and (min-width : 321px) { .astributclass {Max-width:100%;width: auto;} #astributId {Max-width:100%;width: auto;} /* Smartphones (portrait) ———– */ @media only screen and (max-width : 320px) { .astributclass {Max-width:100%;width: auto;} #astributId {Max-width:100%;width: auto;} /* iPads (portrait and landscape) ———– */ @media only screen and (min-width : 768px) and (max-width : 1024px) { .astributclass {Max-width:100%;width: auto;} #astributId {Max-width:100%;width: auto;} /* iPads (landscape) ———– */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { .astributclass {Max-width:100%;width: auto;} #astributId {Max-width:100%;width: auto;} /* iPads (portrait) ———– */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {.astributclass {Max-width:100%;width: auto;} #astributId {Max-width:100%;width: auto;} /* Desktops and laptops ———– */ @media only screen and (min-width : 1224px) { .astributclass {Max-width:100%;width: auto;} #astributId {Max-width:100%;width: auto;} /* Large screens ———– */ @media only screen and (min-width : 1824px) {.astributclass {Max-width:100%;width: auto;} #astributId {Max-width:100%;width: auto;} Cara Setting Kode CSS Responsive
Nah mempermudah anda sanggup memakai IE/Inspect Element untuk mengedit template (Tidak Permanent Hanya Sementara) pada IE anda sanggup melihat astribut element tertentu dengan gampang dan juga sanggup eksklusif mengeditnya, sayang di blog ini belum ada tutorial untuk cara memakai inspect element, namun anda sanggup mencari di stus lain kemungkinan banyak yang membahasnya.Pada instruksi CSS di atas yang saya tandai itu penjelasannya sebagai berikut:
.astributclass yang di maksud yaitu tumpuan kecil <div class='astributclass'> jikalau element memakai astribut class maka pada instruksi css silahkan tambahkan titik di depannya .astributclass {Max-width:100%;width: auto;}
#astributId Sedangkan element yang memakai astribut Id sebagai tumpuan kecil <div id='astributId'> untuk menerapkan css anda tambahkan tanda pagar (#) di depannya #astributId {Max-width:100%;width: auto;}
Pada IE/inspect element disana anda sanggup melihat eksklusif sanggup juga mengedit template tampa takut terjadinya error tapi hanya bersifat sementara. Diatas yaitu cara gampang setting untuk penerapan CSS Responsive.
Untuk mengetahui berapa ukuran layar tampilan yang belum responsive silahkan anda lihat di bab bawah tampilan Responsinator.
Contoh penerapan lebih terang ukuran layar pada css responsive ⇛ Jika ukuran layar yang di tentukan yaitu 340px maka penulisan css akan ibarat ini @media only screen and (min-width : 340px) jikalau ukuran layar 1224px maka penulisan css responsive ibarat ini @media only screen and (min-width : 1224px).
Untuk menyesuaikan ukuran element astribut supaya lebih responsive anda hanya harus merubah ukuran width/lebar astribut misal astributclass ukuran width:56% silahkan ubah menjadi Width:97% sesuai dengan keingginan anda sendiri atau saya luruskan sesuaikan dengan ukuran tampilan layar supaya terlihat lebih rapi. Jangan lupa jikalau ingin menerapkan instruksi di atas silahkan anda terapkan di atas kode]]><b:skin/>atau di atas </style>
Wah tidak mengecewakan susah juga ya gan? wkwkwk saya saja pusing melihatnya hehehehe tapi kalo anda serius mau berguru niscaya anda akan tanggap dengan cepat.
Nanti dech kalo sinyal udah mulai normal saya akan coba buatkan vidio tutorialnya biar makin jelas, biar gak kelewatan info-info dunia blogging dari situs blog ini jangan lupa Subscribe yahh!!!
Jika ada yang masih kurang atau salah dalam penulisan saya ini mohon di maklumi alasannya saya sendiri terbilang baru/Newbie.
