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

39 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
  4. This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article. Obat wasir

    BalasHapus
  5. Hey Thanks for sharing this valuable information with us. I will come back to your site and keep sharing this information with us.
    Best Regards - www.office.com/setup
    www.office.com/setup
    www.office.com/setup

    BalasHapus
  6. This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information.
    www.norton.com/setup

    BalasHapus
  7. www.office.com/setup
    Learn how to download and setup & Microsoft office software For Windows and Mac OS PC/Laptop

    BalasHapus
  8. This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information.
    www.norton.com/setup

    BalasHapus
  9. Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is fantastic, let alone the content!
    norton.com/setup

    mcafee.com/activate

    office.com/setup

    BalasHapus
  10. If you are't know how to setup norton antivirus, how to activate mcafee antivirus and office product, then just visit our website...
    Mcafee.com/activate
    norton.com/setup
    office.com/setup

    BalasHapus
  11. http://azzam10.blogspot.com/2012/09/cara-menyembunyikan-scroll-bar-dengan-css.html

    BalasHapus
  12. Great article quite informative, We provide support for office at:
    office.com/setup
    www.office.com/setup
    setup office

    BalasHapus
  13. Great article quite informative, We provide support for office at:
    office.com/setup
    www.office.com/setup
    setup office

    BalasHapus
  14. Great article quite informative, We provide support for office at:
    office.com/setup
    www.office.com/setup
    setup office

    BalasHapus
  15. All of the activities and organizations contained inside the office setup are staggeringly significant and lift benefit. People who work in colossal associations know the benefits of office.com/setup incredibly well.

    BalasHapus
  16. While getting a norton setup on the web or disengaged, a key called as norton.com/setup thing scratch is something fundamental you have to control. This key will be required at the time of establishment what's more to sign in your Norton account at Norton.com/setup.

    BalasHapus
  17. Hi, the post which you have provided is fantastic, I really enjoyed reading your post, and hope to read more. Thank you so much for sharing this post, I appreciate your work.
    norton.com/setup | norton.com/setup | office.com/setup | office.com/setup | office.com/setup | mcafee.com/activate

    BalasHapus
  18. Office.com/setup.com is an efficiency suite that is utilized by a many individuals on a wide extent of contraptions, for example, Windows PC, Mac PCs, workstations, Android telephones, iOS handhelds, and so on.Office Setup suite is capable at dealing with the staggering bit of work.
    http://office-comofficeoffice.com/

    BalasHapus
  19. Norton.com/setupinstall online security apparatuses guarantee that the individuals who manage delicate information do as such without dread of bargaining touchy data. Keep your documents, information, and applications running easily and your hard drive clean when you buy Norton 360 download.
    http://norton-wwwnorton.com/

    BalasHapus
  20. Are you using HP devices and facing the technical hiccups related this? So get ready to makes you trouble-free with various support way. Those customers who are not aware of these supports, kindly follow this post to know more help about HP customer service number.

    BalasHapus
  21. [mcafee.com/activate - Find your 25-digit alphanumeric product key in the activation section. Follow the steps for downloading, installing and activating McAfee setup from www.mcafee.com/activate.]
    [Setup your Norotn Antivirus with help from our hero's vist and install norton.com/setup.]
    [Coinbase is the world's largest Bitcoin exchange, so this is a common question. .... You must also keep your Coinbase login and account password safe.]
    [How to Setup Office. Go to office.com/setup and enter your product key. If you have a previous version of Office or existing Microsoft account, enter your email address and password, and click Sign in. Select the Country/Region and Language, and click Continue. On the www.office.com/myaccount page, select Install.]

    BalasHapus
  22. Its hard to find knowledgeable people on this topic, but you sound like you know what you?re talking about! Thanks ball games

    BalasHapus
  23. Norton.com/setup- Setup your Norton subscription now with the help of this link. Let’s get started with your Norton Security today so just Activate www.norton.com/setup Subscription to enjoy the services and too websites us and we are here to help you, visit on : office.com/setup

    BalasHapus
  24. For Downloading, Installing and activating the Office product, visit office.com/setup and Get Started with Office.

    If you want guided-solutions on how to download, install, and activate norton.com/setup and norton.com/nu16 that will help secure your device from threats.

    Add another email account to the Gmail app · Change your Gmail settings · Change email notifications visit : email support

    Bittrex is a global leader in the blockchain revolution. We operate the premier U.S.-based blockchain trading platform, which is designed for customers who demand lightning-fast trade execution, dependable digital wallets, and industry-leading security practices.

    bittrex support

    BalasHapus
  25. Thank you so much for sharing these amazing tips. I must say you are an incredible writer, I love the way that you describe the things. Please keep sharing.

    For more information visit on : mcafee.com/activate | mcafee.com/activate

    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 |