Cara Membuat Kotak Script Di Posting Blogspot

Cara Membuat Kotak Script Dalam Posting Blog.

Hai....Ketemu lagi dengan saya Mas Bambang, kali ini gue 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 yaitu sebuah kawasan atau wadah yang berbentuk Kotak dan berkhasiat untuk memasukan kode-kode script ke dalam postingan biar terlihat rapi dan tidak memakan banyak tempat.

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

Kotak Script juga Banyak bentuknya ibarat kotak sederhana, ada juga yang berbentuk kotak dengan pelengkap scroll dan lain sebagainya. Kotak script pun mampu diberi warna dibagian backgroundnya dan juga border yang berbentuk kotak, mampu 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 goresan pena ibarat dibawah ini.

3. Selanjutnya Klik HTML dan masukan isyarat berikut, dibawah goresan pena 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 isyarat 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;">

isyarat script Sobat di sini</div>

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

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

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

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

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

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

( Baca Juga Cara Buat Artikel Terkait Dibawah Posting Blogspot )

Berikut beberapa script yang mungkin berkhasiat 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 isyarat 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....