Cara Mudah Mengedit Template Agar Lebih Responsive: Web-Responsive? pernahkah kamu mendengar kata itu?, tentu pernah bukan jika anda menggeluti sebuah bidang Web Devloper pasti kata ini sudah tidak asing lagi jika terdengar di telinga 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 digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan 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 dapat melihat tampilan website kita pada layar mobile device.
Cara Mudah Mengedit Template Agar Lebih Responsive
Jika anda ingin menjadikan layout template anda lebih responsive untuk lebih mudah mengetahui ukuran untuk layar berapa yang masih belum responsive anda bisa 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 adalah gambar sebagai contoh mana tampilan sebelum dan sesudah responsive dari layar ukuran 384px blog ini. Bisa anda lihat tampilan gambar blog sebelum dan sesudah Responsive di atas, lihat perbedaanya di mana kedua tampilan box homepagenya berbeda.
Tampilan blog yang blom responsive mungkin akan terlihat lebih ke acak-acakan jika di lihat dalam mode tampilan tertentu baik menggunakan desktop dengan ukuran layar tertentu maupun tampilan mobile dengan ukuran tertentu juga.
Nah bagaimana cara agar blog/website kita bisa Responsive di semua tampilan? mudah sekali kok anda hanya perlu memahami kode CSS responsive di bawah ini dengan teliti. lalu mencoba mempraktekannya.
2. Nah sekarang silahkan anda buka Blogger>Theme>Edit Html.
Strukture kode CSS akan terlihat seperti 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 bisa menggunakan IE/Inspect Element untuk mengedit template (Tidak Permanent Hanya Sementara) pada IE anda bisa melihat astribut element tertentu dengan mudah dan juga bisa langsung mengeditnya, sayang di blog ini belum ada tutorial untuk cara menggunakan inspect element, namun anda bisa mencari di stus lain kemungkinan banyak yang membahasnya.Pada kode CSS di atas yang saya tandai itu penjelasannya sebagai berikut:
.astributclass yang di maksud adalah contoh kecil <div class='astributclass'> jika element menggunakan astribut class maka pada kode css silahkan tambahkan titik di depannya .astributclass {Max-width:100%;width: auto;}
#astributId Sedangkan element yang menggunakan astribut Id sebagai contoh 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 bisa melihat langsung bisa juga mengedit template tampa takut terjadinya error tapi hanya bersifat sementara. Diatas adalah cara mudah setting untuk penerapan CSS Responsive.
Untuk mengetahui berapa ukuran layar tampilan yang belum responsive silahkan anda lihat di bagian bawah tampilan Responsinator.
Contoh penerapan lebih jelas ukuran layar pada css responsive ⇛ Jika ukuran layar yang di tentukan adalah 340px maka penulisan css akan seperti ini @media only screen and (min-width : 340px) jika ukuran layar 1224px maka penulisan css responsive seperti ini @media only screen and (min-width : 1224px).
Untuk menyesuaikan ukuran element astribut agar 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 agar terlihat lebih rapi. Jangan lupa jika ingin menerapkan kode di atas silahkan anda terapkan di atas kode]]><b:skin/>atau di atas </style>
Wah lumayan susah juga ya gan? wkwkwk saya saja pusing melihatnya hehehehe tapi kalo anda serius mau belajar pasti 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 karena saya sendiri terbilang baru/Newbie.