Cara Membuat Scroll Box Pada Blog | Tips Baru

Pada kesempatan kali ini saya akan membagikan cara Membuat Scroll Box Pada Blog atau web site, hal ini biasanya di gunakan untuk meposting kode script atau yang lain. Saat copy kode tersebut tidak ke artikel yang lain, namun juga bisa berfungsi untuk merapikan artikel pada postingan tersebut.



Pemasangan kode box pada blog atau web site ini hanya di Postingan dengan mode HTML saja.

Kalau saya sendiri scroll box ini saya gunakan untuk menaruh kode script agar terlihat rapi, nyaman di lihat dan pastinya agar terasa nyaman untuk pengunjung blog saya ini yakan hehehe....

Kali ini saya juga akan membuat Cara Mudah Membuat Efek Scroll di Blog

Apa saja yang harus di persiapkan dalam membuat secroll box 
  • Buat postingan lalu pilih mode HTML, lalau copy paste kode script yang sudah saya sediakn di bawah
  • Save atau Post, lihat hasilnya
  • Selesai

Kode script yang harus di pasnag pada blog atau web site 

Cara Membuat Scroll Box Keren dan Responsive Di Postingan Blogger

NB. Kalin bisa merubah wara background dan yang lainya sesui dengan kesukaan kalian 

Hasil kode scroll box yang sudah di pasang

Box 1

<div style="overflow:auto;width: auto;height:250px;padding:7px;border:2px solid #eee">

Isi  content anda disini, bisa link, script HTML, tulisan biasa, atau gambar

</div>

Box 2

<div style="overflow:auto;max-height: 300px;background: #f7f7f7;border: 1px solid #DDD;padding: 10px;"> Isi dengan tulisan atau kode yang ingin anda masukkan pada scroll box </div>

Box 3

<div style="background-color: #ffa66f; border: 2px #6e2222 dashed; text-align: left; height: 30px; overflow: auto; padding: 10px; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

Box 4
<div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

Box 5
<div style="background-color: #82cafa; border: 3px #6E2222 double; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

Box 6
<div style="background-color: #6eb76a; border: 2px #6E2222 inset; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

Box 7
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

Box 8
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

Box 9
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

Box 10
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

Box 11
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

Box 12
<div style="border: 2px solid black; height: 145px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 250%;">
<div style="height: 250%;">
Masukkan tulisan kalian disini
</p>
</div>


Semoga panduan cara membuat box scroll atau scroll box pada blogger atau web site bisa bermanfaat buat kalin, jangan lupa tinggalkan jejak terima kasih.

0 Comments:

Post a Comment