Cara Membuat Scroll Box Pada Blog




Disini saya akan membagikan bagaimana caranya membuat 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 bisa menjalankan script atau kode 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 kode 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 tulisan 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 tulisan 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 tulisan 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 tulisan 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 tulisan disini</div>

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

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

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

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

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

<div style="background-color: #ffa66f; border: 2px #6e2222 dashed; text-align: left; height: 30px; overflow: auto; padding: 10px; width: auto;">Masukkan tulisan 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.
Semoga bermanfaat...
Read Also
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://tankystreet.blogspot.com/. Terima kasih.
Newer Posts Newer Posts Older Posts Older Posts

More posts

Comments

Post a Comment

Blog Post Ads

Banner Anchor Ads