Cara Membuat Kotak Script Dalam Postingan Blogger dan 24+ Pilihan Kotak Script

Cara Membuat Kotak Script Dalam Postingan Blogger
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 dibuat, 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 Anda pilih dibawah ini:

Tikus Males 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 Anda di Sini.</div>

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

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

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

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

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

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

Standar
<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
Isi dengan tulisan Anda 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 Anda 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 Anda 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 Anda di Sini.
</div>

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

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

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

Itu dia 24 pilihan kode script yang dapat Anda gunakan, untuk mempercantik blog Anda.

Sebagian Referensi: www.blogooblok.com

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel