Cara Membuat Kota Script Dalam Post

" CARA MEMBUAT KOTAK SCRIPT "

Pada kesempatan kali ini saya akan memberikan sebuah trik untuk membuat kotak script yang ada pada artikel blog sobat. ini hanya sebagai pemanis tampilan saja , membuat tampilan blog kita lebih menarik. ada 2 macam kotak script yang pertama :

• Kotak Script biasa ( tanpa scroll)
• Kotak Script with scrol

Lebih jelasnya langsun kita praktekan saja . untuk tutorial pertama saya akan mengulas tentang cara membuat kotak script tanpa scroll.

1. Kotak Script Tanpa Scroll

• Log in ke blogger
• Pilih entri baru.
• Klik menu HTML, Kemudia masukan kode script berikut

<div style="background-color: white; border: 3px #1780dd double; padding: 10px; text-align: left;"> <br /></div> </div>

• Lebih jelasnya seperti gambar di bawah ini

• Setelah meletakan kode di atas, klik menu Compose , Akan tampak seperti gambar di bawah

• Masukan teks sesuka anda pada kolom tersebut.
• Untuk tampilan kotak scriptnya bisa anda rubah sendiri sesuai selera sobat semua. lebih jelasnya lihat di bawah ini

Double; padding

Dashed; padding

Dotted; padding

inset; padding

Outset; padding

Groove; padding

Solid; padding

Ridge; padding

Keterangan :

<div style="background-color: white; border: 3px #1780dd Dashed; padding: 10px; text-align: left;"> Dashed; padding</div> </div> 

• border: 3px : Untuk mengatur ketebalan kotak
• #1780dd       : Untuk mengatur warna kotak
• Dashed         : Untuk mengatur bentuk / tampilan kotak. seperti tampilan di atas.
• 10px             : Untuk mengatur lebarnya kotak

2. Kotak Script With Scroll

• Langkah-langkahnya seperti di atas .login kemudian buat entri baru . masukan kode script di bawah ini pada menu HTML seperti cara di atas tadi.

<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff; overflow: auto; height: 50px; width: 627px; text-align: left;"> .kode script disini.</div>

• Setelah menaruh kodenya akan muncul tampilan seperti di bawah ini.

<div style="border: 3px #1780dd solid; float: right; dan lain-lain. Kotak Posisi Kanan <div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff; overflow: auto; height: 50px; width: 600px; text-align: left;"> .kode script disini.</div>

Keterangan Tambahan

• Overflow: auto : Untuk fungsi scrollnya , Height ( tinggi kotak ) dan Widht ( lebar kotak ).

Mudah bukan ? jika sobat teliti dalam mengikuti tutorial yang saya berikan di atas pasti sobat akan berhasil menerapkanya pada blog sobat. jika tidak work coba ulangi sekali lagi.