Shizenku Blog

Informasi unik, populer dan menarik lainnya

Langkah-langkah menghilangkan sidebar di tampilan seluler

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.

Klik tombol pengaturan
Shizenku.blogspot.com

4. Kalian ubah pengaturan template seluler kalian yang semula berada pada settingan Default sekarang kalian ubah pengaturannya menjadi Khusus.

pilih pengaturan 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'>
<style type='text/css'>

#main {width:100%;margin:0 auto;float:none;}
#sidebar {display:none;}
</style>
</b:if>
  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.

  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%}
#main-wrapper {width:96%;margin:0 auto;float:none;}
#rsidebar-wrapper {display:none;}
  Untuk sobat yang bernama A Mahfuda ganti kode orange dengan kode berikut ini :
#outer-wrapper {width:98%;max-width:640px;padding-top:10px;}
#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;}
Jika tidak berhasil silahkan berkomentar nanti saya akan mengecek blog sahabat blogger semuanya.
Selesai.

Selamat mencoba kawan, jangan lupa jika sahabat suka dengan artikel ini silahkan klik tombol google plus di bawah artikel ini.

31 komentar : Langkah-langkah menghilangkan sidebar di tampilan seluler

Diposting oleh 

menarik infonya mas,,, tampilan seluler perlu diperhatikan, tapi saya coba ntar aja dech soalnya saya sdh terlalu banyak utak atik template bulan ini, ntar takut alexanya macet kalau terlalu sering diutak atik, hehehe :)
makasih sharenya mas, saya bookmark dulu ya, hehehe ^_^

Diposting oleh 
 · Admin mengatakan...

@Indri Lidiawati : wah, kalo yang ini wajib dicoba mbak indri, ,. he he
setahu saya ngedit template gx ada pengaruhnya sama rangking alexa mbak . . he he

kunjungan malam :)
Ikut nyimak aja mas. Thanks ya :)

Diposting oleh 

Berhasil gan, agan jenius!! gan kalau merubah ukuran lebar bidangnya gimana? maaf gan jadi ngrepotin!!!

Diposting oleh 
 · Admin mengatakan...

@Wahyu Eka Prasetiyarini : iya mbak, . makasih atas kunjungannya. he he

@Arif Subroto : bidang yang mana dulu nih. ., kan banyak ada outer-wrapper, header-wrapper, content-wrapper, main-wrapper, sidebar-wrapper, footer-wrapper dll. . tepatnya dibagian area mana : postingan, sidebar atau yg mana. .?

Diposting oleh 
 · Admin mengatakan...

@softandtrik : aku cek dulu ya gan. ,

Diposting oleh 

gimana gan?

Diposting oleh 
 · Admin mengatakan...

@Arif Subroto : cek email gan, ,. he he.

Diposting oleh 

saya sudah coba dua-duanya kog tetep nggak bisa... mohon bantuannya...

Diposting oleh 
 · Admin mengatakan...

@A Mahfuda : saya sudah mengecek blog agan, silahkan baca pada artikel di atas paling bawah. sudah saya update artikelnya .. ^_^
makasih kunjungannya gan, ..

Diposting oleh 

gan, saya pengen menghilangkan bagian yang ada di sebelah kiri blog saya, yang isinya Contact Form, DMCA, dan Privacy Policy...
tapi saya pengennya cuma pas versi mobile doang...

masalahnya adalah, template saya itu responsive... jadi susah nge-editnya.
tolong dibantu ya makasih :D

Diposting oleh 
 · Admin mengatakan...

@Raihan Jr : cari kode @media only screen and (max-width:319px) {
terus tambahkan di bawahnya kode berikut ini :
.menu {display:none;}

selamat mencoba gan,.. he he :D

Diposting oleh 

gan kalau blog ku menghilangkan topnav pada tampilan mobile gimana gan

Diposting oleh 
 · Admin mengatakan...

waduh,. kalo gak berhadapan langsung ama kode html, ane gak tahu gan,.. boleh minta email n paswordnya... :)

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

bisa kirimin email dan password ke pembela.allah@gmail.com entar aku editin.
susah kalo jelasin disini, takutnya ente kagak paham :Peace:

Diposting oleh 

Gan gimana caranya menghilangkan sidebar kiri, waktu dibuka view mobile...?

Diposting oleh 
 · Admin mengatakan...

boleh kasih tahu ke aku url blognya agan..?

Kalau punya saya gimana gan?
SIdebar masi muncul di tampilan mobile, kalo widgetya uda tidak nampak.

Diposting oleh 
 · Admin mengatakan...

udah aku cek blog punya agan yang rezadistorsi,... udah berhasil tuh kayaknya.. sidebarnya gak tampil di versi seluler.. :D

Diposting oleh 

kalau pengaturan template selulernya ane pilih yg "khusus" koq malah kacau tampilannya yaa gan? jadi terpaksa cuma bisa pilih yg "default"

Diposting oleh 
 · Admin mengatakan...

kalo setelah diubah jadi "khusus" kok menjadi kacau,.. itu berarti settingan css untuk tampilan mobile belum diatur gan..
jadi yg diatur baru tampilan web nya saja sedangkan di versi mobile belum diatur..
coba cek blog ini ditampilan web shizenku.blogspot.com dan ditampilan mobile shizenku.blogspot.com/?m=1
pasti hasilnya berbeda tampilannya.. itu karena saya sudah mengatur kode css nya... :)

Diposting oleh 

Ini yg saya cari

Diposting oleh 

okelah kalo begitu... sippp... ! :D

Diposting oleh 

Gan ane malah menyimpang dari topik artikel nih.Gimana ya caranya nampilin Sidebar kanan di template saya dan juga menghilangkan Widget "View Web Version" di Template saya nih blognya www.lintasjalur.com

Diposting oleh 
 · Admin mengatakan...

untuk nampilin widget di tampilan mobile,. caranya yaitu tambahin kode mobile='yes'
contoh :
-semula <b:widget id='HTML1' locked='false' title='Widgets' type='HTML'>
-ganti jdi <b:widget id='HTML1' locked='false' mobile='yes' title='Widgets' type='HTML'>

trus untuk menghapus view web version tinggal cari kode <div class="mobile-desktop-link"> lalu hapus beserta isinya sampai kode penutupnya </div>

Diposting oleh 

Sya pasang yg ini :
#outer-wrapper {width:98%;max-width:640px;padding-top:10px;}
#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;}

dipasang diblog saya kok sidebar versi mobile dan web,, sidebar menghilang semua.
solusinya gmana ya? blog saya: http://okeradio.blogspot.co.id/
makasih

Diposting oleh 
 · Admin mengatakan...

cari kode :
@media only screen and (max-width:319px) {
#outer-wrapper .isi {
width:100%;
}
}


trus kalau ingin ditampilan dibawah 319px, sidebar tidak tampil, caranya :
ganti kode diatas dengan kode :
@media only screen and (max-width:319px) {
#outer-wrapper .isi, #main-atas {
width:100%;
}
#sidebar-wrapper {
display: none;
}
}

Diposting oleh 

Ini Postingan Yang Lagi Aku Cari, kebetulan lagi pengen Nampilin Fanspage di Sidebar.

Diposting oleh 
 · Admin mengatakan...

oke gan.. good luck brother.. :D

gan help gan mungkin caranya seperti ini tapi masalah yang saya alami agak bebeda
Masalah :
di versi dekstop saya memiliki gambar di belakang judul blog nah saya ingin menghilangkan gambar tersebut di versi mobilenya gimana gan helpppp
atau kalau bisa pas di versi mobilenya di bikin background solid code warna #333

mohon bantuanya gan
site : www.riocellmarunda.net atau www.riocellmarunda.blogspot.com ( sama aja )

Posting Komentar : Langkah-langkah menghilangkan sidebar di tampilan seluler

Baca dulu Peraturan Berkomentar di Blog Ini ! Supaya komentar anda tak sia-sia. Admin sangat senang jika tidak ada komentar yang mengandung spam :)

.::Peraturan Berkomentar::.

• Gunakan bahasa dan kata-kata yang sopan dan tidak menyinggung semua pihak manapun, baik ketika dilihat anak kecil maupun orang dewasa.
• Usahakan untuk tidak menggunakan kata-kata yang menyinggung RAS, SARA, dan berbau P*RNO.
• Dilarang menaruh link Aktif di dalam kotak komentar.
• Berkomentar Out Of Topic atau Oot saya perbolehkan apabila komentar tersebut berupa pertanyaan penting, asalkan tidak berlebihan dan tidak berbau SPAM!

Komentar akan dibalas paling lambat 3 hari kemudian. Terimakasih atas perhatiannya.
Widgets
Copyright © 2012 . Simo Responsive Template Design oleh . Publisher oleh Shizenku Blog.
Powered by Blogger and AMP ⚡ HTML