Cara Mengedit CSS Template Seluler Blogspot
Cari kode
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.
Copy kode CSS di bawah ini:
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.
Sumber
<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:
.mobile #header { width:bla..bla..bla..;}.mobile #kontent { bla..bla..bla..;}Setelah kita menambahkan kode tersebut, sekarang waktunya kita mereset elemen-elemen yang memiliki lebar fixed.
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.
Sumber
Ok Makasih Dah Berkunjung Di Blog Ini :D
ReplyDelete