Di hari sabtu pagi yang cerah ini saya akan memberikan langkah-langkah cara menghilangkan sidebar di tampilan mobile. artikel ini merupakan permintaan dari seorang teman bernama Arif Subroto. Dia ingin sidebarnya hilang di tampilan mobile version seperti di blog shizenku ini. Yang harus di lakukan supaya sidebar tidak ditampilkan di tampilan seluler adalah dengan menambahkan beberapa kode css.
Alasan saya menghilangkan sidebar di tampilan mobile adalah karena sidebar di mobile version tidak terlalu penting dan juga bikin loading berat sehingga jika pengunjung membuka blog kita menggunakan handphone maka pulsa pengunjung juga akan cepat habis karena jumlah data yang besar, kalo hp-nya sudah didaftarkan paket internet mungkin tidak masalah tetapi bagaimana dengan pengunjung yang minim pulsa. apa kalian tidak kasihan jika pulsa mereka habis karena saat membuka blog kita dengan waktu yang sangat lama, sekitar 1-2 menit baru selesai loadingnya. dan juga saat loading belum selesai tetapi pulsa mereka sudah habis duluan. pasti mereka sangat kecewa sekali sebab tidak mendapatkan informasi yang dicari karena blog kita yang berat tadi. maka dari itu saya menyarankan di tampilan seluler, blog wajib dibuat responsive dan seminim mungkin agar tidak mempunyai ukuran data yang besar sehingga pengunjung yang membuka blog kita melalui hp hanya memerlukan sedikit pulsa.
Bagi kalian yang belum mengetahui cara membuat blog menjadi responsive kalian bisa membuka artikel saya yang terdahulu tentang Cara membuat blog menjadi full responsive 100% work. Sedangkan untuk langkah-langkah menghilangkan sidebar di tampilan seluler kalian bisa melihat panduan lengkapnya di bawah.
Berikut ini panduannya, baca dengan teliti jangan terburu-buru pahami dengan seksama apalagi jangan sampai salah :
1. Pertama kalian harus login terlebih dahulu ke Blogger
2. Setelah itu kalian pilih Template
3. Berikutnya kalian klik tombol pengaturan template seluler.
4. Kalian ubah pengaturan template seluler kalian yang semula berada pada settingan Default sekarang kalian ubah pengaturannya menjadi Khusus.
5. Lalu kalian tambahkan kode di bawah ini dan taruh tepat di bawahnya kode ]]></b:skin> atau </style>.
Berikut ini kodenya :
Sedangkan untuk teman saya tadi Arif Subroto, setelah saya cek blognya, kode sidebarnya adalah #rsidebar-wrapper. Jadi ganti kode orange di atas dengan kode di bawah ini :
Selesai.
Selamat mencoba kawan, jangan lupa jika sahabat suka dengan artikel ini silahkan klik tombol google plus di bawah artikel ini.
Alasan saya menghilangkan sidebar di tampilan mobile adalah karena sidebar di mobile version tidak terlalu penting dan juga bikin loading berat sehingga jika pengunjung membuka blog kita menggunakan handphone maka pulsa pengunjung juga akan cepat habis karena jumlah data yang besar, kalo hp-nya sudah didaftarkan paket internet mungkin tidak masalah tetapi bagaimana dengan pengunjung yang minim pulsa. apa kalian tidak kasihan jika pulsa mereka habis karena saat membuka blog kita dengan waktu yang sangat lama, sekitar 1-2 menit baru selesai loadingnya. dan juga saat loading belum selesai tetapi pulsa mereka sudah habis duluan. pasti mereka sangat kecewa sekali sebab tidak mendapatkan informasi yang dicari karena blog kita yang berat tadi. maka dari itu saya menyarankan di tampilan seluler, blog wajib dibuat responsive dan seminim mungkin agar tidak mempunyai ukuran data yang besar sehingga pengunjung yang membuka blog kita melalui hp hanya memerlukan sedikit pulsa.
Bagi kalian yang belum mengetahui cara membuat blog menjadi responsive kalian bisa membuka artikel saya yang terdahulu tentang Cara membuat blog menjadi full responsive 100% work. Sedangkan untuk langkah-langkah menghilangkan sidebar di tampilan seluler kalian bisa melihat panduan lengkapnya di bawah.
Berikut ini panduannya, baca dengan teliti jangan terburu-buru pahami dengan seksama apalagi jangan sampai salah :
1. Pertama kalian harus login terlebih dahulu ke Blogger
2. Setelah itu kalian pilih Template
3. Berikutnya kalian klik tombol pengaturan template seluler.
Shizenku.blogspot.com
4. Kalian ubah pengaturan template seluler kalian yang semula berada pada settingan Default sekarang kalian ubah pengaturannya menjadi Khusus.
Shizenku.blogsot.com
5. Lalu kalian tambahkan kode di bawah ini dan taruh tepat di bawahnya kode ]]></b:skin> atau </style>.
Berikut ini kodenya :
<b:if cond='data:blog.isMobile'>Perhatikan kode #sidebar {display:none;} di atas, kode inilah yang membuat sidebar tidak ditampilkan. beberapa template berbeda kodenya, ada yang menggunakan #sidebar-wrapper, .sidebar, .sidebar-wrapper, #r-sidebar, #sidebar-top, dan lain-lain. sedangkan kode #main {width:100%;margin:0 auto;float:none;} di atas fungsinya agar di tampilan seluler menjadi satu kolom.
<style type='text/css'>
#main {width:100%;margin:0 auto;float:none;}
#sidebar {display:none;}
</style>
</b:if>
Sedangkan untuk teman saya tadi Arif Subroto, setelah saya cek blognya, kode sidebarnya adalah #rsidebar-wrapper. Jadi ganti kode orange di atas dengan kode di bawah ini :
#outer-wrapper {width:100%}Untuk sobat yang bernama A Mahfuda ganti kode orange dengan kode berikut ini :
#main-wrapper {width:96%;margin:0 auto;float:none;}
#rsidebar-wrapper {display:none;}
#outer-wrapper {width:98%;max-width:640px;padding-top:10px;}Jika tidak berhasil silahkan berkomentar nanti saya akan mengecek blog sahabat blogger semuanya.
#main-wrapper {width:100%;margin:5px 10px;margin-left:0;margin-top:0;float:none;}
.post {margin:0 auto;padding:5px;padding-bottom:0;}
#sidebar-wrapper, #sidebar-wrapper2 {display:none;}
Selesai.
Selamat mencoba kawan, jangan lupa jika sahabat suka dengan artikel ini silahkan klik tombol google plus di bawah artikel ini.
Di hari sabtu pagi yang cerah ini saya akan memberikan langkah-langkah cara menghilangkan sidebar di tampilan mobile. artikel ini merupakan ...
