Melanjutkan postingan Mas Sugeng sebelumnya, Mengaktifkan Fitur Custom Mobile Template , kali ini saya akan coba tuliskan tutorial baga...
Melanjutkan postingan Mas Sugeng sebelumnya, Mengaktifkan Fitur Custom Mobile Template, kali ini saya akan coba tuliskan tutorial bagaimana mengedit CSS Template Seluler Blogspot agar tampilannya responsive atau bisa menyesuaikan dengan layar ponsel.
Untuk membuat template menjadi responsive kita perlu mereset semua elemen yang memiliki lebar fixed. Elemen tersebut biasanya adalah Wrapper, Header, Navigasi, Kotak Posting, Sidebar, dan Footer. Nah, dikarenakan hampir semua template memiliki kode CSS yang berbeda-beda, maka biar mudah saya akan gunakan Template Simple Faster V2 sebagai contohnya. Jadi saya harap bagi sobat yang menggunakan template selain Simple Faster V2 bisa mengambil inti sari dari tutorial yang saya tulis ini. Atau biar nggak ribet, gunakan saja template Simple Faster v2. Bisa didownload di sini.
Sebelumnya mereset semua elemen tadi, kita harus menambahkan sedikit kode pada tag <body>.
Cari kode <body>, hapus kode tersebut dan ganti dengan <body expr:class='"loading" + data:blog.mobileClass'>
Penting! khusus di dalam template Simple Faster v2 terdapat dua kode <body>. Pilih yang kedua, bukan yang pertama.
Fungsi dari kode tersebut adalah untuk menambahkan class CSS khusus pada template seluler yaitu .mobile. Jadi nanti saat kita mereset elemen, kode CSSnya kurang lebih seperti ini:
Setelah kita menambahkan kode tersebut, sekarang waktunya kita mereset elemen-elemen yang memiliki lebar fixed..mobile #header { width:bla..bla..bla..;}.mobile #kontent { bla..bla..bla..;}
Copy kode CSS di bawah ini:
Setelah di-Copy, taruh atau pastekan di atas kode ]]></b:skin> dan Save template/* Custom Mobile Template by Mas Sugeng */ /* menghilangkan iframe yg dihasikan script sharethis */ .mobile #kepala-kiri, .mobile #stSegmentFrame, .mobile #stwrapper {
display:none !important;
}
/* Reset Elemen */ .mobile #wrapper {
margin:0 auto !important;
width:auto !important;
max-width:600px !important;
}
.mobile #kepala {
background:#fff;
width:auto;
max-width:100% !important;
margin:0px !important;
padding:0px !important;
}
.mobile #kepala-kanan {
height:auto;
padding:6px;
margin:0px;
width:auto;
max-width:100%;
}
.mobile #posting, .mobile #sidebar {
margin:0 auto !important;
float:none !important;
width:auto !important;
max-width:100% !important;
}
.mobile #kotak-posting {
padding:6px !important;
border-right:medium none !important;
font-size:13px;
}
.mobile #kotak-sidebar {
margin:6px !important;
font-size:13px;
}
.mobile #navigasi {
display:none;
}
Sedikit penjelasan dari kode CSS di atas. Kode CSS di atas saya gunakan untuk mereset semua elemen menjadi max-width:600px; atau kalo diterjemahkan artinya memiliki lebar maksimal 600 pixel. Dan saya juga menyembunyikan bagian Navigasi karena menurut saya navigasinya kurang pas jika ditampikan di template seluler.
Kurang lebih tampilan blog sobat jika diakses via perangkat seluler akan menjadi seperti ini:
Nah, sekarang tinggal bagaimana kreatifitas sobat dalam mempercatik template seluler tersebut. Saya yakin sobat sudah tahu caranya. Jadi intinya saat ingin mengedit CSS template seluler selalu tambahkan class .mobile.
Oh ya, sekali lagi saya tekankan, kode CSS yang saya tulis di atas adalah khusus untuk template Simple Faster v2 yang saya gunakan sebagai contoh pada tutorial ini. Seperti yang sudah saya sebutkan di atas, bahwa hampir semua template memiliki kode CSS yang berbeda-beda. Jadi saya harap sobat bisa menyesuaikan dengan template yang sobat pakai.
Mungkin hanya segitu saja yang bisa saya tulis. Bila apa yang saya tulis di atas kurang bisa dipahami, saya mohon maaf yang sebesar-besarnya. Karena sejujurnya saya kurang begitu bisa dalam membuat artikel tutorial.
Created By Mas Sugeng
