Cara Membuat Kotak Script dan 24+ Pilihan Kotak Script

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

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

Cara Membuat Kotak Script dan 24+ Pilihan Kotak Script


Penggunaan kotak script tentu saja sangat membantu blogger dalam meletakan kode ataupun informasi yang jelas kepada para pembaca.

Dengan bentuk yang kotak dan warna yang mencolok 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


Jika Anda ingin meletakan kotak script di postingan bisa ikuti cara di bawah ini.

1. Masuk ke Blogger.com > pilih Postingan > klik Entri baru. > kemudian klik tab HTML.

2. Masukan kode dibawah ini tepat di dalam kotak postingan pada tab HTML.

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

3. Kemudian klik "Publikasikan"

4. Selesai...

Cara Pemasangan Kode Script di Widget


Jika Anda ingin memasang kotak script di widget, bisa ikut panduan di bawah ini.

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:

24+ Pilihan Kotak Script yang Dapat Anda Pilih


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
Tulis Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel