24+ Pilihan Kotak Script Dan Cara Memasangnya Ke Dalam 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

4 Responses to "24+ Pilihan Kotak Script Dan Cara Memasangnya Ke Dalam Blog"

  1. Mantap raja tips ini tulisannya lengkap sekali.. Semangat menulis kang.. Nanti akan saya coba praktekan..

    BalasHapus
    Balasan
    1. Makasih mba, hehe sekarang udah ganti ke tuansiput mba soalnya domain id kemahalan wkwk

      Hapus
  2. Nah ini dia Mas yang saya cari selama ini!! Akhirnya ketemu secara tidak sengaja, makasih banyak ya Mas!!

    BalasHapus
    Balasan
    1. Sama-sama mbas, silahkan di terapkan di blognya mas ;)

      Hapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel