Cara Membuat Kotak Script Di Posting Blogspot

Cara Membuat Kotak Script Dalam Posting Blog.

Hai....Ketemu lagi dengan saya Mas Bambang, kali ini saya akan mengajak anda untuk membahas bagaimana cara membuat Kotak Script di dalam posting blog. Sebelum kita masuk pada pembahasan yang lebih lanjut, mari kita ketahui dulu apa sih yang di maksud dengan kotak script itu??dan apa fungsinya??

( Baca Juga Cara Membuat Header Blog Menggunakan Logo/Gambar )

I. Berikut penjelasannya......
Kotak Script adalah sebuah tempat atau wadah yang berbentuk Kotak dan berguna untuk memasukan kode-kode script ke dalam postingan agar terlihat rapi dan tidak memakan banyak tempat.

Banyak para blogger menggunakan kotak dalam postingannya untuk menempatkan informasi-informasi penting, salah satunya adalah script HTML, Java dan sebagainya. Namun kotak yang disematkan dalam postingan ini tidak disediakan defauld oleh blogspot, oleh karena itu kita dituntut untuk membuatnya sendiri.

Kotak Script juga Banyak bentuknya seperti kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll dan lain sebagainya. Kotak script pun bisa diberi warna dibagian backgroundnya dan juga border yang berbentuk kotak, bisa diatur bentuknya.

( Baca Juga Cara Membuat Read More/Baca Selanjutnya Di Blog )

II. Langkah-langkah Membuatnya :
Untuk membuatnya, mari anda ikuti langkah-langkah berikut ini :

1. Pertama anda login ke Blogger milik anda dan pilih entri baru.

2. Selanjutnya buatlah tulisan seperti dibawah ini.

3. Selanjutnya Klik HTML dan masukan kode berikut, dibawah tulisan cara membuat kotak script.

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

Untuk jelasnya lihat gambar di bawah ini :

4. Sekarang anda Klik Compose, maka akan ada kotak script. Contoh gambar:

5. Selanjutnya Klik di dalam kotak tersebut dan hapus tulisan kode script Sobat di sini.

6. Dan langkah terakhir, Masukan kode script yang ingin anda masukan, didalam kotak itu. Selesai.

( Baca Juga Cara Membuat Sitemap Otomatis Dan Keren Di Blogger SEO Friendly )

Keterangan Pada Kode :
<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>

1. border: 3px = ketebalan kotak script. dan #eeeeee = warna kotak script.

2. solid; = Bentuk kotak, bisa diganti dengan,

• dashed
• dotted
• Double
• Groove
• inset
• outset
• ridge

3. Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.

4. background-color:#cccccc; = warna dalam kotak.

5. Dan text-align:left; = posisi tulisan didalam kotak di kiri.

( Baca Juga Cara Buat Artikel Terkait Dibawah Posting Blogspot )

Berikut beberapa script yang mungkin berguna untuk anda:

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">Kode Script Anda Di Sini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border radius: 10px; padding: 10px; t-align: left;">Kode Script Anda 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;">Kode Script Anda 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;">Kode Script Anda 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;">Kode Script Anda 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;">Kode Script Anda Disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;">Kode Script Anda Disini</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini</div>

Dengan cara :
- Copy script box code dari beberapa jenis tampilan di atas.
- Paste pada Menu Tab HTML Artikel Entri.
- Ganti kode yang bertulisan (Kode Script Anda Disini) dengan script yang anda inginkan.

( Baca Juga Cara Membuat Judul Blog Berada Di Tengah )

Selamat mencoba ya jangan lupa dishare klo berhasil... Semoga Bermanfaat......Terimakasih....