Cara Mudah Membuat Kotak Script Scroll Responsive di Blog

Mungkin ada yang bertanya-tanya apa itu kotak script scroll, kotak script scroll di buat untuk postingan khusus atau penting seperti kode html, javascript, css dll. Pada kesempatan kali ini saya akan membahas bagaimana kita membuatnya.

1.Login ke Blogger>Pos>Entri Baru pilih HTML jangan Compose lihat gambar

2.Copykan kode dibawah

<div style="background-color: #cccccc; border: 3px #eeeeee solid; height: 100px; overflow: auto; padding: 10px; text-align: left; width: 520px;">
kode script Sobat di sini</div>

3.Kembali pada Compose dan masukan text yang mau di masukan ke dalam kotak script

4.Save atau simpan dan publikasikan

Berikut contoh kotak script yang bisa anda gunakan

<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #dddddd; border-top: 20px solid #f4034c; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Kode Script Sobat Disini
</div>



 <div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #ffffcc; border-top: 20px solid #ffff00; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Kode Script Sobat Di sini
</div>



 <div style="background-color: #ccffff; border: 3px #ccff00 double; padding: 10px; text-align: left;">
Kode Script Sobat Disini</div>



 <div style="background-color: #ff99ff; border: 3px #ff33cc double; padding: 10px; text-align: left;">
Kode Script Sobat Disini</div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Kode Script Sobat Disini</div>


 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Kode Script Sobat Disini</div>

<div style="background-color: #cccccc; border: 3px #eeeeee solid; height: 100px; overflow: auto; padding: 10px; text-align: left; width: 520px;">
kode script Sobat 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;">Kode Script Sobat Disini</div>

Note :

• Sobat Bisa mengkreasikan warna dari setiap Kotak Script Yang ada dengan cara merubah kode warna html nya.
• Untuk merubah warna background sobat bisa merubah kodenya seperti background-color:#ffccff (Ganti kode merah tersebut dengan kode warna yang sobat inginkan)
• Untuk merubah warna garis bordernya silahkan ganti kode border: #cccccc (Ganti kode yang berwarna merah)
  

Sekian pembahasan tentang cara membuat kotak script pada blog, semoga artikel ini dapat membantu dan bermanfaat. Terimakasih telah membaca postingan ini sampai selsai.

Baca juga Cara Membuat Video Youtube Responsive di Blog

• Baca