11 Cara Menciptakan Scroll Box Keren Di Postingan Blogger
komputerdia.com - Scroll Box merupakan sebuah kotak yang dilengkapi dengan fitur scroll (gulir) yang sanggup difungsikan diberagam tempat, contohnya kalian akan menerapkan fitur ini disebuah postingan, sidebar atau bahkan footer sekalipun, namun umumnya scroll box ini biasanya dipakai pada bagain halaman posting artikel.
Fungsi utama dari scroll box ini yakni untuk meminimalkan sebuah tampilan teks atau goresan pena biar terlihat lebih ramping, sehingga tidak terkesan panjang.
Dalam artikel kali ini, saya akan mengatakan setidaknya 11 cara yang sanggup kalian lakukan untuk menciptakan scroll box dengan tema yang berbeda-beda. Untuk lebih jelasnya silahkan kalian perhatikan langkah - langkah dibawah ini :
Baca Juga Artikel Lainnya :
- Cara Membuat Postingan Blogger Menjadi Beberapa Bagian Dalam Satu Halaman .
- Cara Membuat Google Search Custom di Blog Untuk Menaikkan Earning Adsense .
- Cara Membuat Tombol Back To Top / Kembali Ke Atas Dengan Efek Cantik .
- Cara Membuat Gambar Berderet Horizontal Di Postingan Blog .
Cara Membuat Scroll Box (Kotak Gulir)
- Langkah pertama silahkan kalian masuk ke akun blogger
- Tekan tombol Entri Baru, dan kalian akan diarahkan ke halaman pembuatan artikel / posting.
- Untuk sanggup menjalankan script atau instruksi scroll box, kalian harus pindahkan area posting dari mode Compose ke mode html .
- Setelah kalian berada di halaman mode compose, silahkan kalian copy dan tempelkan salah satu instruksi scroll box style dibawah ini.
- Pilih gaya yang kalian inginkan untuk dipasang di blog kalian
<div style="background-color: #ffa66f; border: 2px #6e2222 dashed; text-align: left; height: 30px; overflow: auto; padding: 10px; width: auto;">Silahkan simpan goresan pena kalian yang akan memakai scroll box disini</div>
<div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan goresan pena kalian yang akan memakai scroll box disini</div>
<div style="background-color: #82cafa; border: 3px #6E2222 double; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan goresan pena kalian yang akan memakai scroll box disini</div>
<div style="background-color: #6eb76a; border: 2px #6E2222 inset; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan goresan pena kalian yang akan memakai scroll box disini</div>
<div style="background-color: #c2c2c2; border: 2px #6E2222 ridge; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan goresan pena kalian yang akan memakai scroll box disini</div>
<div style="background-color: #d9da81; border: 2px #6E2222 solid; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan goresan pena kalian yang akan memakai scroll box disini</div>
<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 goresan pena kalian yang akan memakai scroll box disini</div>
<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 goresan pena kalian yang akan memakai scroll box disini</div>
<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 goresan pena kalian yang akan memakai scroll box disini</div>
<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 goresan pena kalian yang akan memakai scroll box disini</div>
<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 goresan pena kalian yang akan memakai scroll box disini</div>
- Kode berwarna Merah, silahkan kalian ganti dengan isi goresan pena kalian
- Kode berwarna Biru, silahkan kalian ganti dengan instruksi warna yang kalian inginkan
- Kode berwarna Kuning, silahkan ganti dengan ukuran yang kalian inginkan
- Setelah semua sesudah telah kalian atur, silahkan kalian publikasikan artikel atau postingan kalian tersebut.
- Selesai, semoga bermanfaat untuk kalian semuanya
