24+ Pilihan Kotak Script dan Cara Memasangnya di Blog - Tuan Siput
Kotak script biasanya digunakan untuk meletakkan kote HTML maupun kode tertentu, serta dibuat untuk diletakkan text seperti informasi, note dan berbagai hal lainnya.

Kotak script sangat mudah untuk dipasang, memiliki banyak pilihan jenis dan tentu saja bebas untuk edit ukuran maupun warna.

Penggunaan kotak script tentu saja sangat membantu.

Dengan bentuk yang kotak akan membuat pengunjung memperhatikan isi yang ada dalam kotak tersebut sehingga akan mempermudah pengunjung dalam memahami maksud dari penulis.

Cara Pemasangan Kode Script di Postingan

1. Masuk ke "Blogger.com" > pilih "Postingan" > klik "Entri baru".

2. Setalah berada di menu "Compose", klik "HTML"

3. Masukan kode dibawah ini tepat didalam kotak postingan "HTML".

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.gomagz (ganti tulisan ini).</div>

4. Kemudian klik "Publikasikan"

5. Selesai...

Cara Pemasangan Kode Script di Widget

1. Masuk ke "Blogger.com" > pilih "Tata Letak" > klik "Tambahkan Gadget" > klik "HTML/JavaScript".

2. Copy kode dibawah ini kedalam kotak "HTML/JavaScript".

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.gomagz (ganti tulisan ini).</div>

3. Setelah itu klik "Simpan"

4. Selesai...

Itu dia cara untuk memasang kotak script kedalam postingan dan widget blog. Selain kode diatas ada 24 pilihan kode script  yang dapat kamu pilih dibawah ini:

Tuan Siput script
<div style="background: linear-gradient(135deg, #00BFFF 52%,#ff0036 100%); border: 3px #f6fdf6 double; padding: 20px; text-align: left;">
<span style="color: #ffffff;">Diupdate pada 31 Mei 2016</span></div>

(Dashed)
<div style="border: 3px #1780dd Dashed; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Dotted)
<div style="border: 3px #1780dd Dotted; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Groove)
<div style="border: 3px #1780dd Groove; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Inset)
<div style="border: 3px #1780dd Inset; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Outset)
<div style="border: 3px #1780dd Outset; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Ridge)
<div style="border: 3px #1780dd Ridge; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Solid)
<div style="border: 3px #1780dd Solid; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Blue and black
<div style="border-left: 4px #1499d2 groove; padding: 10px;background-color:#19abea;text-align: left;font-color:#fff;">Isi dengan tulisan Kamu di Sini.</div>

Blue and white
<div style="background-color: #19abea; border-left: 4px #1499d2 groove; padding: 10px; text-align: left;">
<span style="color: white;">Isi dengan tulisan Kamu di Sini.</span></div>

Standar
<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
Isi dengan tulisan Kamu di Sini.
</div>

Cocok untuk informasi Update
<div style="background-color: #d3f5d3; border: 3px #f6fdf6 double; padding: 20px; text-align: left;">
<span style="color: #159415;">Isi dengan tulisan Kamu di Sini.</span></div>

Warna 1
<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #dddddd; border-top: 20px solid #f4034c; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Isi dengan tulisan Kamu di Sini.
</div>

Warna 2
<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #ffffcc; border-top: 20px solid #ffff00; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Isi dengan tulisan Kamu di Sini.
</div>

Warna 3
<div style="background-color: #ccffff; border: 3px #ccff00 double; padding: 10px; text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 4
<div style="background-color: #ff99ff; border: 3px #ff33cc double; padding: 10px; text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 5
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 6
<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;">Isi dengan tulisan Kamu di Sini.</div>

Warna 7
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #33ff99; border-radius: 10px; border: 2px dashed #ffff99; padding: 10px; t-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 8
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white; border-radius: 10px; border: 4px double #ccff00; padding: 10px;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 9
<div style="border: 2px #ff0066 dashed; padding: 10px; background-color:#ffccff; tex>t-align: left;">Isi dengan tulisan Kamu di Sini.</div>

Warna 10
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #fffc9e; border-radius: 10px; border: 8px outset #D4771A; padding: 10px; t-align: left;">Isi dengan tulisan Kamu di Sini.</div>

Warna 11
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffccc9; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;"> Isi dengan tulisan Kamu di Sini.</div>

Warna12
<div 0.12="" 0.16="" 0="" 10px="" 2px="" 5px="" border-radius:="" box-shadow:="#" rgba="" style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #67fd9a; border-left: 5px solid #0000cc; border-radius: 10px; border-right: 5px solid #0000cc; padding: 10px;">Isi dengan tulisan Kamu di Sini.</div>

Sangat cocok untuk berbagai text
<div style="background-color: #148f77; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12); color: white; font-size: 14px; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; transition: 0.25s;"> Isi dengan tulisan Kamu di Sini.</div>

Itu dia 24 piliha kode script yang dapat kamu gunakan, untuk mempercantik blogmu.

Sebagian Referensi: www.blogooblok.com

24+ Pilihan Kotak Script dan Cara Memasangnya di Blog

Kotak script biasanya digunakan untuk meletakkan kote HTML maupun kode tertentu, serta dibuat untuk diletakkan text seperti informasi, note dan berbagai hal lainnya.

Kotak script sangat mudah untuk dipasang, memiliki banyak pilihan jenis dan tentu saja bebas untuk edit ukuran maupun warna.

Penggunaan kotak script tentu saja sangat membantu.

Dengan bentuk yang kotak akan membuat pengunjung memperhatikan isi yang ada dalam kotak tersebut sehingga akan mempermudah pengunjung dalam memahami maksud dari penulis.

Cara Pemasangan Kode Script di Postingan

1. Masuk ke "Blogger.com" > pilih "Postingan" > klik "Entri baru".

2. Setalah berada di menu "Compose", klik "HTML"

3. Masukan kode dibawah ini tepat didalam kotak postingan "HTML".

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.gomagz (ganti tulisan ini).</div>

4. Kemudian klik "Publikasikan"

5. Selesai...

Cara Pemasangan Kode Script di Widget

1. Masuk ke "Blogger.com" > pilih "Tata Letak" > klik "Tambahkan Gadget" > klik "HTML/JavaScript".

2. Copy kode dibawah ini kedalam kotak "HTML/JavaScript".

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.gomagz (ganti tulisan ini).</div>

3. Setelah itu klik "Simpan"

4. Selesai...

Itu dia cara untuk memasang kotak script kedalam postingan dan widget blog. Selain kode diatas ada 24 pilihan kode script  yang dapat kamu pilih dibawah ini:

Tuan Siput script
<div style="background: linear-gradient(135deg, #00BFFF 52%,#ff0036 100%); border: 3px #f6fdf6 double; padding: 20px; text-align: left;">
<span style="color: #ffffff;">Diupdate pada 31 Mei 2016</span></div>

(Dashed)
<div style="border: 3px #1780dd Dashed; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Dotted)
<div style="border: 3px #1780dd Dotted; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Groove)
<div style="border: 3px #1780dd Groove; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Inset)
<div style="border: 3px #1780dd Inset; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Outset)
<div style="border: 3px #1780dd Outset; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Ridge)
<div style="border: 3px #1780dd Ridge; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Solid)
<div style="border: 3px #1780dd Solid; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Blue and black
<div style="border-left: 4px #1499d2 groove; padding: 10px;background-color:#19abea;text-align: left;font-color:#fff;">Isi dengan tulisan Kamu di Sini.</div>

Blue and white
<div style="background-color: #19abea; border-left: 4px #1499d2 groove; padding: 10px; text-align: left;">
<span style="color: white;">Isi dengan tulisan Kamu di Sini.</span></div>

Standar
<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
Isi dengan tulisan Kamu di Sini.
</div>

Cocok untuk informasi Update
<div style="background-color: #d3f5d3; border: 3px #f6fdf6 double; padding: 20px; text-align: left;">
<span style="color: #159415;">Isi dengan tulisan Kamu di Sini.</span></div>

Warna 1
<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #dddddd; border-top: 20px solid #f4034c; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Isi dengan tulisan Kamu di Sini.
</div>

Warna 2
<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #ffffcc; border-top: 20px solid #ffff00; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Isi dengan tulisan Kamu di Sini.
</div>

Warna 3
<div style="background-color: #ccffff; border: 3px #ccff00 double; padding: 10px; text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 4
<div style="background-color: #ff99ff; border: 3px #ff33cc double; padding: 10px; text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 5
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 6
<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;">Isi dengan tulisan Kamu di Sini.</div>

Warna 7
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #33ff99; border-radius: 10px; border: 2px dashed #ffff99; padding: 10px; t-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 8
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white; border-radius: 10px; border: 4px double #ccff00; padding: 10px;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 9
<div style="border: 2px #ff0066 dashed; padding: 10px; background-color:#ffccff; tex>t-align: left;">Isi dengan tulisan Kamu di Sini.</div>

Warna 10
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #fffc9e; border-radius: 10px; border: 8px outset #D4771A; padding: 10px; t-align: left;">Isi dengan tulisan Kamu di Sini.</div>

Warna 11
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffccc9; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;"> Isi dengan tulisan Kamu di Sini.</div>

Warna12
<div 0.12="" 0.16="" 0="" 10px="" 2px="" 5px="" border-radius:="" box-shadow:="#" rgba="" style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #67fd9a; border-left: 5px solid #0000cc; border-radius: 10px; border-right: 5px solid #0000cc; padding: 10px;">Isi dengan tulisan Kamu di Sini.</div>

Sangat cocok untuk berbagai text
<div style="background-color: #148f77; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12); color: white; font-size: 14px; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; transition: 0.25s;"> Isi dengan tulisan Kamu di Sini.</div>

Itu dia 24 piliha kode script yang dapat kamu gunakan, untuk mempercantik blogmu.

Sebagian Referensi: www.blogooblok.com