11 Cara Membuat Scroll Box Keren Di Postingan Blogger

komputerdia.com - Scroll Box merupakan sebuah kotak yang dilengkapi dengan fitur scroll (gulir) yang dapat difungsikan diberagam tempat, misalnya kalian akan menerapkan fitur ini disebuah postingan, sidebar atau bahkan footer sekalipun, namun umumnya scroll box ini biasanya digunakan pada bagain halaman posting artikel.

Fungsi utama dari scroll box ini adalah untuk meminimalkan sebuah tampilan teks atau tulisan agar terlihat lebih ramping, sehingga tidak terkesan panjang.

Dalam artikel kali ini, saya akan menunjukkan setidaknya 11 cara yang bisa kalian lakukan untuk membuat scroll box dengan tema yang berbeda-beda. Untuk lebih jelasnya silahkan kalian perhatikan langkah - langkah dibawah ini :

Baca Juga :

11 Cara Membuat Scroll Box Keren Di Postingan Blogger

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 bisa menjalankan script atau kode scroll box, kalian harus pindahkan area posting dari mode Compose ke mode html .
11 Cara Membuat Scroll Box Keren Di Postingan Blogger
  • Setelah kalian berada di halaman mode compose, silahkan kalian copy dan tempelkan salah satu kode 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 tulisan kalian yang akan menggunakan 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 tulisan kalian yang akan menggunakan 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 tulisan kalian yang akan menggunakan 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 tulisan kalian yang akan menggunakan 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 tulisan kalian yang akan menggunakan 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 tulisan kalian yang akan menggunakan 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 tulisan kalian yang akan menggunakan 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 tulisan kalian yang akan menggunakan 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 tulisan kalian yang akan menggunakan 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 tulisan kalian yang akan menggunakan 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 tulisan kalian yang akan menggunakan scroll box disini</div>
  • Kode berwarna Merah, silahkan kalian ganti dengan isi tulisan kalian
  • Kode berwarna Biru, silahkan kalian ganti dengan kode warna yang kalian inginkan
  • Kode berwarna Kuning, silahkan ganti dengan ukuran yang kalian inginkan
  • Setelah semua setelah telah kalian atur, silahkan kalian publikasikan artikel atau postingan kalian tersebut.
  • Selesai, semoga bermanfaat untuk kalian semuanya

.
.

Berlangganan Artikel terbaru (free):

Post a Comment