14 Januari 2016

CARA MEMBUAT KOTAK SCRIPT DALAM POSTINGAN BLOG

Menambahkan kotak script dalam sebuah postingan dimaksudkan selain untuk mempercantik tampilan artikel juga untuk memisahkan antara kalimat-kalaimat dalam artikel dengan kode-kode penting seperti kode html,script iklan ataupun kode yang lainnya.


Dengan menggunakan kotak script,artikel anda akan tampak lebih anggun dan rapih serta tampak lebih profesional.
Seperti contoh di bawah ini

Contoh kotak script by : frenaradea.blogspot.com

Untuk membuatnya tidak begitu sulit,anda tinggal copy saja code script di bawah ini kemudian pada saat anda membuat artikel paste kode tersebut pada menu HTML (bukan menu compose) di laman entri blog atau tempat menulis artikel.
Setelah di paste,silahkan kembali ke menu compose untuk melanjutkan menulis artikel yang akan anda publikasikan.
Silahkan copy kode script di bawah ini,kemudian ganti tulisan "contoh kotak script by : frenaradea.blogspot.com" dengan tulisan atau kode script yang akan anda masukan.

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> contoh kotak script by : frenaradea.blogspot.com</div>

Mudahkan membuatnya ?
Silahkan anda coba ketika menulis artikel yang memungkinkan anda menggunakan kotak script atau teks ini agar tampilan artikel anda terlihat lebih rapih dan menarik.

Beberapa pilihan model kotak script html atau teks selain contoh di atas.

1.
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Masukan kode script atau teks disini</div>

2.
<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;">Masukan kode script atau teks disini</div>

3.
<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;">Masukan kode script atau teks disini</div>

4.
<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;">Masukan kode script atau teks disini</div>

5.
<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;">Masukan kode script atau teks disini</div>

6.
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;">Masukan kode script atau teks disini</div>

7.
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Masukan kode script atau teks</div>

8.
<div style="background-color: transparent; border-radius: 30px; border: 4px solid #254779; box-shadow: 0px 0px 10px; padding: 10px; text-align: left;">Masukan kode script atau teks disini</div>

9.
<div style="padding:20px 30px;text-align:left; background: #999 no-repeat right; color: #fff;font-size: 16px;line-height: 1.4; border: 0;border-radius: 10px;margin: 0 30px 10px;display: block; box-shadow: 11px 10px 0px #555; ">Masukan kode script atau teks disini</div>

10.
<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;">
Masukan kode script atau teks disini</div>

11. Style scroll
<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">Masukan kode script atau teks disini</div>

Demikian artikel ini saya tulis,semoga bermanfaat untuk semuanya.
Sampai jumpa di postingan berikutnya dan terimakasih atas kunjungannya.

Tidak ada komentar:

Posting Komentar