Cara Membuat Kotak Scroll Pada Postingan Blog dengan 11 Macam Bentuk Dan Banyak Pilihan Warna

Assalamu’alaikum..

            Meletakkan script pada posting artikel memanglah tak bisa di pungkiri oleh seorang blogger, apalagi blog yang bercerita tentang tutorial yang penuh dengan script. Tidak ada salahnya jika meletakkan script dalam postingan diletakkan didalam kotak script scroll agar lebih menarik.

            Kotak script dengan scroll ini juga berguna untuk menghemat tempat ketika sobat ingin meletakkan script yang panjang dalam postingan agar posting sobat tidak terlalu panjang hanya cuma untuk script saja.

            Beberapa waktu lalu pun saya pernah Berbagi Pengetahuan tentang membuat Kotak Script  pada postingan dengan Scroll ini, namun ketika itu kotak script scroll tersebut hanya simple, yaitu hanya ber-background putih.

            Nah sekarang saya ingin berbagi pengetahuan Membuat Kotak Scroll Pada Postingan dengan 11 Macam Bentuk Dan Banyak Pilihan Warna, penasaran ? yuks simak :

1. Login ke blogger sobat. Disini

2. Pada Dashboard blog sobat, klik “New Entry/Posting Baru (yang bergambar pensil)” – pilih mode HTML (sebelah mode compose)

3. Pilih sesuai selera sobat script dibawah - lalu Copy Paste script dibawah pada mode HTML.

<div style="background-color: #ffa66f; border: 2px #6e2222 dashed; text-align: left; height: 30px; overflow: auto; padding: 10px; width: auto;">Letakkan Kode Script Sobat Disini</div>

<div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>

<div style="background-color: #82cafa; border: 3px #6E2222 double; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>

<div style="background-color: #6eb76a; border: 2px #6E2222 inset; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>

<div style="background-color: #c2c2c2; border: 2px #6E2222 ridge; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>

<div style="background-color: #d9da81; border: 2px #6E2222 solid; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat 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;">Letakkan Kode Script Sobat 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;">Letakkan Kode Script Sobat 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;">Letakkan Kode Script Sobat 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;">Letakkan Kode Script Sobat 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;">Letakkan Kode Script Sobat Disini</div>

NB : silahkan sobat bisa ganti pada :

* background-color:#... (untuk mengganti latar kotaknya)

* text-align: … (untuk mengatur letak tulisannya)

* height: …px (untuk mengatur tinggi kotak, jika tidak ingin memakai scroll, hapus saja kode ini)

* span style="color: …;" (untuk warna tulisan)

* solid #... (untuk warna batas kotaknya)

* Ganti “Letakkan Script Sobat Disini” dengan script-nya.

Seperti gambar dibawah :

4. Silahkan sobat kreasikan sendiri yaa.. Selamat mencoba ^^

            Bagaimana mudah kan sob ? mungkin itu saja berbagi pengetahuan tentang Cara Membuat Kotak Scroll Pada Postingan dengan 11 Macam Bentuk Dan Banyak Pilihan Warna. Mohon Maaf apabila ada kata yang salah dan kurang berkenan. Terima kasih.. ^^

Wassalamu’alaikum…


Baca Juga : Cara Membuat Kotak Script Keren dengan Adanya Judul Di Atas Kotaknya Pada Postingan Blog

Tweet

Jika Menyukai Artikel di blog ini, Silahkan masukkan email sobat. Akan dapat Update artikel dari blog ini, "GRATISS!!"