Kotak Scrool

 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.. ^^

Membuat Scroll Box Dengan Judul

<div align="center"> <table width="250" border="1"> <tr> <th colspan="100%" scope="col"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden; font-size: 22px; font-family: calibri;">JUDUL ARTIKEL</th> </tr> <tr><td><div style="font-family: arial; font-size: 12px; overflow: scroll;width: 550px; height: 100px;"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden;">Silahkan sobat isi artikel, script atau apa saja disini. Semakin banyak teks yang diisikan dari tinggi kotaknya, otomatis akan membentuk scroll box, sehingga dapat menghemat tempat.</div></div></td></tr> </table> </div>

Silahkan sobat ganti :

Warna : Dengan judul artikel/script/apa saja sesuai dengan isi Scroll Box

Warna : Untuk ukuran font tulisan pada Scroll Box

Warna : untuk ukuran lebar Scroll Box

Warna : Untuk ukuran Tinggi Scroll Box, (Semakin banyak tulisan dari kotak Scroll Box nya, Otomatis Scroll-nya akan terlihat).

Warna : Memposisikan tulisan Scroll Box, jika sobat ingin Rata kiri ganti “Center”, Menjadi “Left” atau rata kanan “Right”

Warna : Sobat ganti tulisan tersebut dengan sesuka sobat

Untuk Copy Paste Script tadi Contohnya seperti gambar dibawah.

4. Lalu pilih lagi mode “Compose” untuk melihat hasilnya, seperti gambar dibawah.

Share :