24+ Pilihan Kotak Script Dan Cara Memasangnya Di Postingan Blog

Kotak script biasanya dipakai untuk meletakkan kote HTML maupun instruksi tertentu, serta dibentuk untuk diletakkan text menyerupai informasi, note dan banyak sekali hal lainnya.

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

Penggunaan kotak script tentu saja sangat membantu.

Dengan bentuk yang kotak akan menciptakan 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 hidangan "Compose", klik "HTML"

3. Masukan instruksi dibawah ini sempurna didalam kotak postingan "HTML".

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> .gomagz (ganti goresan pena 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 instruksi dibawah ini kedalam kotak "HTML/JavaScript".

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

3. Setelah itu klik "Simpan"

4. Selesai...

Itu ia cara untuk memasang kotak script kedalam postingan dan widget blog. Selain instruksi diatas ada 24 pilihan instruksi script  yang sanggup kau pilih dibawah ini:

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 goresan pena Kamu di Sini.</div>

(Dotted)

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

(Groove)

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

(Inset)

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

(Outset)

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

(Ridge)

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

(Solid)

<div style="border: 3px #1780dd Solid; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan goresan pena 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 goresan pena 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 goresan pena Kamu di Sini.</span></div>

Standar

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

Cocok untuk gosip Update

<div style="background-color: #d3f5d3; border: 3px #f6fdf6 double; padding: 20px; text-align: left;">
<span style="color: #159415;">Isi dengan goresan pena 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 goresan pena 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 goresan pena Kamu di Sini.
</div>

Warna 3

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

Warna 4

<div style="background-color: #ff99ff; border: 3px #ff33cc double; padding: 10px; text-align: left;">
Isi dengan goresan pena 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 goresan pena 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 goresan pena 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 goresan pena 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 goresan pena Kamu di Sini.</div>

Warna 9

<div style="border: 2px #ff0066 dashed; padding: 10px; background-color:#ffccff; tex>t-align: left;">Isi dengan goresan pena 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 goresan pena 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 goresan pena 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 goresan pena Kamu di Sini.</div>

Sangat cocok untuk banyak sekali 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 goresan pena Kamu di Sini.</div>

Itu ia 24 piliha instruksi script yang sanggup kau gunakan, untuk mempercantik blogmu.

Sebagian Referensi: www.blogooblok.com
Sumber https://www.tikusmales.com/