Cara Menyembunyikan Scroll Bar Dengan CSS

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Menyembunyikan Scroll Bar Dengan CSS dan semoga artikel ini bermanfaat.



Cara Menyembunyikan Scroll Bar Dengan CSSCara Menyembunyikan Scroll Bar Dengan CSS, mungkin sobat sudah pada tau scroll bar dan sudah menggunakannya dan mungkin juga sobat sudah menggunakan scroll bar yang disembunyikan namun masih mempertahankan fungsinya. Pada kesempatan ini saya akan berbagi tutorial cara menyembunyikan scroll bar dengan CSS buat sobat yang belum menggunakan fungsi ini.
Pada prinsip kerjanya menyembunyikan scroll dengan CSS ini hanya menyembunyikan obyek yang menggunakan scroll sehingga scroll bar tersebut tidak kelihatan, adapun caranya yaitu dengan menambahkan kerangka atau wadah untuk menyimpan obyek tersebut yang ukuran lebarnya dikurangi ukuran scrollbar atu dengan memberikan margin kiri selebar scroll bar. lihat gambar disamping.

Adapun cara tersebut bisa menggunakan 2 cara yang biasa saya lakukan, yaitu dengan menggunakan CSS dan HTML yang terpisah atau dengan penambahan kode CSS langsung pada HTML. 
untuk cara pemasangan menggunakan CSS dan HTML yang terpisah bisa lihat contoh dibawah ini.

KODE CSS.
Ini bisa diletakan diatas kode  ]]></b:skin> atau apabila setelah kode ]]></b:skin> dengan menambahkan kode <style type='text/css'> CSS disini </style>.
#scroll-hide{
  width:100px;
  overflow:hidden;
  background:#000;
}
#scroll-hide .inner{
  width:80px;
  height:200px;
  overflow:auto;
  margin:20px;
  padding-right:20px;
  background:#404040;
}

KODE HTML.
Pada kode HTML sobat tinggal memasukan tag id atau class
<div id="scroll-hide">
<div class="inner">
Konten Disini
</div>
</div>

Lihat Contoh dibawah ini:

Jakarta
Karawang
Bandung
Bekasi
Cianjur
Sukabumi
Sumedang
Cirebon
Tasikmalaya
Garut
Ciamis
Subang
Kuningan
Majalengka
Banjar

Jakarta
Karawang
Bandung
Bekasi
Cianjur
Sukabumi
Sumedang
Cirebon
Tasikmalaya
Garut
Ciamis
Subang
Kuningan
Majalengka
Banjar
Jakarta
Karawang
Bandung
Bekasi
Cianjur
Sukabumi
Sumedang
Cirebon
Tasikmalaya
Garut
Ciamis
Subang
Kuningan
Majalengka
Banjar

Pada contoh pertama scroll belum disembunyikan atau masih secara default.
Pada contoh kedua itu merupakan ilustrasi scroll bar yang disembunyikan.(obyek diberi warna background berbeda, lihat kode background:#404040; pada CSS)

pada contoh ketiga kode  background :#404040; pada CSS dihilangkan.

Apabila mau memasang pada widget di sidebar maka sobat tinggal cari kode <div class='widget-content'> pada setiap kode widget. selanjutnya tinggal mengganti kode tersebut dengan.
<div class='widget-content' id='scroll-hide'>
<div class='inner'> 
-------
</div>
</div>

Contoh:
<b:widget id='HTML5' locked='false' title='title' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<div class='widget-content' id='scroll-hide'> 
<div class='inner'>
    <data:content/>
</div>
</div>
</b:includable>
</b:widget>

Selanjutnya cara menyembunyikan scroll bar secara langsung pada HTML, khususnya pada widget di sidebar namun cara selengkapnya tunggu ya pada postingan berikutnya.... biar lebih lengkap karena meletakan kode untuk menyembunyikan scroll bar pada sidebar tergantung pada widget yang digunakan sehingga perlu penjelasan satu-satu.

Buat Sobat yang mau mencoba mengedit sendiri kode CSSnya silahkan kunjungi di SINI

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Menyembunyikan Scroll Bar Dengan CSS kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered
feedburner

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 12:31

5 komentar :

  1. ternyata bisa ya,scroll bar disembunyikan dan fungsinya masih tetap ada.
    info yg bermanfaat,mksh infonya sob

    BalasHapus
  2. pasang aja begini

    overflow-y:hidden;
    overflow-z:hidden;

    di body{

    selesai haha

    BalasHapus
    Balasan
    1. itu sih memang nyembunyiin tapi scrollnyapun ga berfungsi bahkan scroll di browser mozilla juga hilang sekaligus ga berfungsi hehehehe....

      Hapus
  3. sy mau nanya gmn caranya isi elemen/body masuk keadalam klo scroll dikebawahin sprti website ini klo scroll dikebawahin akan masuk kdalam menu hompage...hihihihi

    BalasHapus
Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |