Cara membuat scroll boks/box pada postingan blog

Cara membuat scroll box/Image : Peterwebs

Scroll box/boks berfungsi untuk meminimalkan teks pada sebuah postingan blog agar nampak lebih ringkas, simpel dan ramping sehingga tidak terkesan kepanjangan.

Ada beberapa contoh scroll boks yang bisa kamu coba di bawah ini.

Berikut cara membuat scroll box/boks :

• Langkah pertama silakan masuk ke akun blogger
• Tekan tombol Entri Baru
• Pindahkan ke mode HTML
• Lalu salin dan tempelkan salah satu kode scroll boks dibawah ini
• Pilih gaya yang kamu inginkan untuk dipasang di blog kamu

<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;">Ketik tulisanmu di sini</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;">Ketik tulisamu di sini</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;">Ketik tulisanmu di sini</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;">Ketik tulisanmu di sini</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;">Ketik tulisanmu di sini</div>

Lihat kode scroll boks lainnya di halaman berikutnya

<div style="background-color: #6eb76a; border: 2px #6E2222 inset; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Ketik tulisanmu di sini</div>

<div style="background-color: #c2c2c2; border: 2px #6E2222 ridge; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Ketik tulisanmu di sini</div>

<div style="background-color: #d9da81; border: 2px #6E2222 solid; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Ketik tulisanmu di sini</div>

<div style="background-color: #ffa66f; border: 2px #6e2222 dashed; text-align: left; height: 30px; overflow: auto; padding: 10px; width: auto;">Ketik tulisanmu di sini</div>

<div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Ketik tulisanmu di sini</div>

<div style="background-color: #82cafa; border: 3px #6E2222 double; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Ketik tulisanmu di sini</div>

• Kode berwarna Merah, silakan kamu ganti dengan isi tulisanmu
• Kode berwarna Biru, silakan kamu ganti dengan warna kesukaanmu
• Kode berwarna Kuning, silakan kamu ganti dengan warna kesukaanmu

Semoga bermanfaat!

Sumber kode : Komputerdia

Share this post