Cara mudah Membuat Kotak scoll Bebagai variasi di dalam postingan Blog

Kotak scrollbar biasa digunakan untuk meletakkan kode HTML dalam tulisan yang terlalu panajng. Dengan adanya scrollbar ini, tulisan sobat di blog jadi lebih ringkas. Sehingga scrool bar juga bisa disebut peringkas tulisan

Berikut cara memasang kotak scroll bar di postingan blog sobat;

Pertama: Buka dashboar blog sobat - pilih Entri baru- Pilih penulisan HTML ya ...

Kedua, Copy kode yang akan dipaparkan di bawah ini lalu pastekan ke Laman postingan HTML sobat.

Ketiga, kembali ke compose (kotak disebelah HTML) dan lihat hasilnya.

Berikut Tampilan dan kodenya

1. Sroll Vertikal

Tulisan sobat di sini
Tulisan sobat di sini
Tulisan sobat di sini
Tulisan sobat di sini
Tulisan sobat di sini
Tulisan sobat di sini
Tulisan sobat di sini
Tulisan sobat di sini
Tulisan sobat di sini
Tulisan sobat di sini

Kodenya:

<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;overflow: auto; height: 100px; width: 300px;text-align: left;">ganti tulisan ini sesuka sobat </div>

kode berwarna biru digunakan untuk memberi warna pada Border dan backgroun kotak. Sobat bisa mengganti warnanya sesuai keinginan sobat. Cek kode warna disini.

Kode Warna merah untuk mengatur tinggi (height) kotak dan lebar (width) kotak. Ganti angkanya sesuai selera sobat. Untuk mengatur lebar agar atomatis menyesuaikan lebar laman, ganti angka pada widht dengan auto, sehingga kodengan menjadi width: auto .

2. Scroll Horizontal

Tulisan sobat di sini ..... Tulisan sobat di sini ...... Tulisan sobat di sini ....... Tulisan sobat di sini ..... Tulisan sobat di sini ...... Tulisan sobat di sini .......

Tulisan sobat di sini ..... Tulisan sobat di sini ...... Tulisan sobat di sini ...... Tulisan sobat di sini .......

Kodenya:

<div style="border:1px solid black;width:auto ;height:50px;overflow-y:hidden;overflow-x:scroll;">

<p style="width:2500%;">

Ganti Tulisan ini sesuka sobat
</p>
</div>

Kode warna biru digunakan untuk membuat bingkai setebal 1 px (ubah sesuai keinginan dengan mengannti angkanya.) dan warna bingkainya hitam (ubah black dengan nama warna dalam bahasa inggris untuk mengubah warna bingkai, Contoh: blue = biru, red= merah)

Kode warna merah untuk mengatur lebar (width) dan tinggi (heigh) kotak. Dalam kode di atas, auto berarti berarti lebar kotak akan mengikuti lebar laman postingan sobat. Sobat bisa mengatur lebar kotak sesuai selera dengan cara mengganti auto dengan lebarpx (lebar=angka)

Untuk mengatur tinggi, sobat tinggal mengganti angka heightnya.

3. Scroll Vertikal dan Horizontal

Tulisan sobat di sini ..... Tulisan sobat di sini ...... Tulisan sobat di sini ....... Tulisan sobat di sini ..... Tulisan sobat di sini ...... Tulisan sobat di sini .......

Tulisan sobat di sini ..... Tulisan sobat di sini ...... Tulisan sobat di sini ....... Tulisan sobat di sini ..... Tulisan sobat di sini ...
... Tulisan sobat di sini .......
Tulisan sobat di sini ..... Tulisan sobat di sini ...... Tulisan sobat di sini ....... Tulisan sobat di sini ..... Tulisan sobat di sini ...... Tulisan sobat di sini .......

Kodenya:

<div style="border:1px solid blue;width:auto;height:100px;overflow-y:scroll;overflow-x:scroll;"><p style="width:2500%;">Ganti tulisan ini sesuka sobat</p></div>

Kode warna biru digunakan untuk membuat bingkai setebal 1 px (ubah sesuai keinginan dengan mengannti angkanya.) dan warna bingkainya biru (ubah blue dengan nama warna dalam bahasa inggris untuk mengubah warna bingkai, Contoh: black = hitam, red= merah)

Untuk mengatur tinggi, sobat tinggal mengganti angka heightnya.

Demikian tutorial cara membuat tulisan di dalam kotak scroll dari Nahayuka.

Jika tulisan sobat tak terlalu panjang, sobat bisa mencoba meletakkan tulisan di dalam kotak tanpa scroll.

Ini tampilan kotaknya;

Ganti tulisan ini sesuka sobat.

Warna kotak bisa diganti sesuai selera sobat. Untuk lebih jelasnya, baca tutorial Cara Mudah Membuat Tulisan blog di Dalam Kotak Berwarna di sini

_Nahayuka_