Cara Membuat Scroll Horizontal Dan Vertical Pada Postingan - GISTECHINDO
  • About
  • Kontak
  • Disclaimer
  • Sitemap
  • Pasang Iklan
  • Follow DuniaKompi
GISTECHINDO

  • SEO
  • Desain
  • Templates
  • AdSense
  • Tutorial
    • Membuat Blog
    • Ganti Template
    • Kode Warna
    • Tag Kondisional
    • Awesome Font
  • Layanan Premium
  • Blog Tools
    • Parse HTML
    • CSS Compressor
    • Image Optimizer
    • HTML Compressor
  • Galeri Template
MENU
Home » Trik Blog » Cara Membuat Scroll Horizontal Dan Vertical Pada Postingan

Hai sobat sekalian ketemu lagi dengan ane pada kali ini ane pang share lagi dulu ane perna share tentang Cara membuat scroll pada Blogarchive dan pada kali ane juga masih membahas seputar scroll. Namun kali ini yang ane akan share yaitu tutorial bagaimana cara membuat scroll horizontal dan vertical pada postingan, dengan menggunakan scroll juga dapat menghemat halaman posting juga, jadi tidak memakan banyak tempat. 

Berikut ini pengertian dari scroll : Scrollbar adalah sesuatu yang dapat ditarik ke atas dan ke bawah atau digulung kekanan ke kiri atau ke atas ke bawah sehingga kita dapat menemukan isi yang tersembunyi.  Scroll merupakan fitur penting ketika memakai komputer. Dengan scroll memudahkan kita untuk menaikkan dan menurunkan halaman pada Window explorer ataupun halaman suatu website. 

Mungkin sobat pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog sobat tidak seperti itu, di tips kali ini saya akan menjelaskan cara membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog.
Scroll dibagi menjadi 2, yaitu scroll vertikal dan scroll horizontal. Scroll Vertikal yaitu scroll yang bisa atau dapat ditarik ke atas dan ke bawah sedangkan Scroll horizontal merupakan scroll mendatar yang bisa ditarik ke kiri dan ke kanan. 

Scroll Vertikal dan Horizontal


Berikut ini merupakan contoh kode dari scrollbar Horizontal

<div style="border:1px solid white;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;"><p style="width:250%;">
Dengan menggunakan overflow-x, kita dapat membuat scroll bar ketika kontent pada div ini lebih lebar dari pada kotakan yang kita buat. Dengan menyeting paragraf menjadi 250%, maka hal ini akan membuat content lebih lebar 250% daripada kotakannya - akibatnya hal ini akan memaksakan terjadinya overflow ( menyebabkan munculnya scroll bar ).
</p>
</div>

Atau Bisa juga Pakai script dibawah ini

o   <div  style=”height:150px; width:300px; border:solid 2px orange;overflow:scroll; overflow-y:hidden;overflow-x:scroll;”>
o   <p style="width:250%;"> Masukan text sobat <p/>
o   </div>

Nb : orange yaitu warna bordernya

Berikut ini adalah contoh dari scroll Horizontal:


Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Mungkin anda pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog anda tidak seperti itu, di tips kali ini saya akan menjelaskan cara menghilangkan sesak tersebut dengan membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog. Mau tau caranya? Berikut kode untuk membuat scrollbar: Anda dapat mengatur lebar dan tinggi scrollbar tersebut dengan merubah nilai pada width:80px; height:80px;. Gimana? Sangat mudahkan? Selamat mencoba…


Anda juga bisa mengatur warna kotak, tinggi, serta lebar (Lihat Tulisan berwarna tersebut diatas).
Mudahkan caranya cukup simple kok, kode tersebut sobat pastekan pada postongan sobat pilih tab html jika sudah maka kembali ke tab text lagi. Demikianlah scroll vertical pada postingan selamat berexperiman dan mencoba.

Berikut ini adalah kode scroll Untuk Scroll Vertikal Lihat dibawah ini :

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid white">
Jika tanpa Setingan "paksaan" di tag paragraf <p>, maka cukup mudah untuk membuat scroll bar vertikal seperti ini.
</div>

Berikut ini contoh dari scroll Vertikal : 


Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Mungkin anda pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog anda tidak seperti itu, di tips kali ini saya akan menjelaskan cara menghilangkan sesak tersebut dengan membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog. Mau tau caranya? Berikut kode untuk membuat scrollbar: Anda dapat mengatur lebar dan tinggi scrollbar tersebut dengan merubah nilai pada width:80px; height:80px;. Gimana? Sangat mudahkan? Selamat mencoba…

Itulah tadi kode dari scroll horizontal atau scroll yang mendatar, scroll horizontal bisa di jadikan alternative scroll jika kita tidak mau menggunakan scroll vertical atau scroll berdiri. Selamat mencobanya semoga berhasil yaa
Demikianlah postingan Tentang Cara Membuat ScrollHorizontal Dan Vertical Pada Postingan Semoga bermanfaat bagi sobat sekalian. Dengan memanfaatkan scroll pada postingan akan lebih menghemat sebuah halaman juga mempercepat loading pada halaman website atau blog.  Sehingga blog kita terasa dinamis dan nyaman bagi para pengujung  sekalian.

Berakhirlah sudah pada postingan ini akhir kata semoga sobat sukses selalu. Aamiin . . . .
KANG GAWE February 10, 2014 DK Blogger Indonesia

Cara Membuat Scroll Horizontal Dan Vertical Pada Postingan

Posted by KANG GAWE on Feb 10, 2014


Hai sobat sekalian ketemu lagi dengan ane pada kali ini ane pang share lagi dulu ane perna share tentang Cara membuat scroll pada Blogarchive dan pada kali ane juga masih membahas seputar scroll. Namun kali ini yang ane akan share yaitu tutorial bagaimana cara membuat scroll horizontal dan vertical pada postingan, dengan menggunakan scroll juga dapat menghemat halaman posting juga, jadi tidak memakan banyak tempat. 

Berikut ini pengertian dari scroll : Scrollbar adalah sesuatu yang dapat ditarik ke atas dan ke bawah atau digulung kekanan ke kiri atau ke atas ke bawah sehingga kita dapat menemukan isi yang tersembunyi.  Scroll merupakan fitur penting ketika memakai komputer. Dengan scroll memudahkan kita untuk menaikkan dan menurunkan halaman pada Window explorer ataupun halaman suatu website. 

Mungkin sobat pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog sobat tidak seperti itu, di tips kali ini saya akan menjelaskan cara membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog.
Scroll dibagi menjadi 2, yaitu scroll vertikal dan scroll horizontal. Scroll Vertikal yaitu scroll yang bisa atau dapat ditarik ke atas dan ke bawah sedangkan Scroll horizontal merupakan scroll mendatar yang bisa ditarik ke kiri dan ke kanan. 

Scroll Vertikal dan Horizontal


Berikut ini merupakan contoh kode dari scrollbar Horizontal

<div style="border:1px solid white;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;"><p style="width:250%;">
Dengan menggunakan overflow-x, kita dapat membuat scroll bar ketika kontent pada div ini lebih lebar dari pada kotakan yang kita buat. Dengan menyeting paragraf menjadi 250%, maka hal ini akan membuat content lebih lebar 250% daripada kotakannya - akibatnya hal ini akan memaksakan terjadinya overflow ( menyebabkan munculnya scroll bar ).
</p>
</div>

Atau Bisa juga Pakai script dibawah ini

o   <div  style=”height:150px; width:300px; border:solid 2px orange;overflow:scroll; overflow-y:hidden;overflow-x:scroll;”>
o   <p style="width:250%;"> Masukan text sobat <p/>
o   </div>

Nb : orange yaitu warna bordernya

Berikut ini adalah contoh dari scroll Horizontal:


Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Mungkin anda pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog anda tidak seperti itu, di tips kali ini saya akan menjelaskan cara menghilangkan sesak tersebut dengan membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog. Mau tau caranya? Berikut kode untuk membuat scrollbar: Anda dapat mengatur lebar dan tinggi scrollbar tersebut dengan merubah nilai pada width:80px; height:80px;. Gimana? Sangat mudahkan? Selamat mencoba…


Anda juga bisa mengatur warna kotak, tinggi, serta lebar (Lihat Tulisan berwarna tersebut diatas).
Mudahkan caranya cukup simple kok, kode tersebut sobat pastekan pada postongan sobat pilih tab html jika sudah maka kembali ke tab text lagi. Demikianlah scroll vertical pada postingan selamat berexperiman dan mencoba.

Berikut ini adalah kode scroll Untuk Scroll Vertikal Lihat dibawah ini :

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid white">
Jika tanpa Setingan "paksaan" di tag paragraf <p>, maka cukup mudah untuk membuat scroll bar vertikal seperti ini.
</div>

Berikut ini contoh dari scroll Vertikal : 


Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Mungkin anda pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog anda tidak seperti itu, di tips kali ini saya akan menjelaskan cara menghilangkan sesak tersebut dengan membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog. Mau tau caranya? Berikut kode untuk membuat scrollbar: Anda dapat mengatur lebar dan tinggi scrollbar tersebut dengan merubah nilai pada width:80px; height:80px;. Gimana? Sangat mudahkan? Selamat mencoba…

Itulah tadi kode dari scroll horizontal atau scroll yang mendatar, scroll horizontal bisa di jadikan alternative scroll jika kita tidak mau menggunakan scroll vertical atau scroll berdiri. Selamat mencobanya semoga berhasil yaa
Demikianlah postingan Tentang Cara Membuat ScrollHorizontal Dan Vertical Pada Postingan Semoga bermanfaat bagi sobat sekalian. Dengan memanfaatkan scroll pada postingan akan lebih menghemat sebuah halaman juga mempercepat loading pada halaman website atau blog.  Sehingga blog kita terasa dinamis dan nyaman bagi para pengujung  sekalian.

Berakhirlah sudah pada postingan ini akhir kata semoga sobat sukses selalu. Aamiin . . . .

Tweet
Previous
« Prev Post
Next
Next Post »

Related Posts

Dunia Komputer
GISTECHINDO Updated at: February 10, 2014
Click to Comment!
Close Comment!

0 komentar:

Post a Comment

Jika anda Suka dengan Artikel ini Selahkan Berkomentarlah

PERHATIAN

1. Berkomentarlah dengan bijak
2. jangan berkomentar yang berisi isu sara, porno grafi/aksi

Labels

agama app av browser aplikasi cms design downapp editor global Hosting Ilmu sehat indonesia Internet java karya tulis Komputer linux mp3 obat OS pemrograman pengobatan Sosial network ss Trik Blog tt windows wp

Popular Posts

  • Cara Menghapus Subtitle Bawaan Video atau Film
  • Download MKV Software
  • Cara Aktivasi Windows 7 menjadi Asli permanen
  • CARA MENGGUNAKAN TURBO PASCAL
 

Labels

agama (1) app (27) av (1) browser aplikasi (3) cms (1) design (1) downapp (17) editor (1) global (5) Hosting (3) Ilmu sehat (7) indonesia (7) Internet (19) java (8) karya tulis (1) Komputer (44) linux (8) mp3 (1) obat (5) OS (10) pemrograman (7) pengobatan (7) Sosial network (14) ss (5) Trik Blog (26) tt (14) windows (3) wp (2)

DK Suport

d

Test Footer 2

Test Footer 1

Test Footer

Support : Blog Gado Gado | Indo Media Kita | Gistechindo | Wong Asli Cirebon
Copyright © GISTECHINDO. All rights reserved.
Template Modif by Dunia Komputer
powered by Blogger
Back To Top