Cara Menciptakan Scroll Box Pada Blog




Disini saya akan membagikan bagaimana caranya menciptakan kotak dengan scroll pada postingan blog.
Langkah pertama silahkan kalian masuk ke akun blogger.
Tekan tombol Entri Baru, dan kalian akan diarahkan ke halaman pembuatan artikel / posting.
Untuk dapat menjalankan script atau isyarat scroll box, kalian harus pindahkan area posting dari mode "Compose"  ke mode html.

# Scroll Box Keren Di Postingan Blogger

Setelah kalian berada di halaman mode "Compose" , silahkan kalian copy dan tempelkan salah satu isyarat scroll box style dibawah ini sesuai dengan gaya yang di inginkan.

<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;">Masukkan goresan pena 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;">Masukkan goresan pena 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;">Masukkan goresan pena 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;">Masukkan goresan pena 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;">Masukkan goresan pena disini</div>

<div style="background-color: #d9da81; border: 2px #6E2222 solid; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;"></div>Masukkan goresan pena disini</div>

<div style="background-color: #c2c2c2; border: 2px #6E2222 ridge; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Masukkan goresan pena disini</div>

<div style="background-color: #6eb76a; border: 2px #6E2222 inset; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Masukkan goresan pena disini</div>

<div style="background-color: #82cafa; border: 3px #6E2222 double; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Masukkan goresan pena disini</div>

<div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Masukkan goresan pena disini</div>

<div style="background-color: #ffa66f; border: 2px #6e2222 dashed; text-align: left; height: 30px; overflow: auto; padding: 10px; width: auto;">Masukkan goresan pena disini</div>

  • Kode berwarna Merah, silahkan kalian ganti dengan isi goresan pena kalian
  • Kode berwarna Biru, silahkan kalian ganti dengan isyarat 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.
Semoga bermanfaat...