Cara Membuat Kotak Script Di Postingan Blog

Berbicara tentang kotak script apa itu kotak script?? Pernahkah sobat blogger memposting sebuah script didalam postingan sobat, ada sebuah kotak yang membatasi script tersebut, biasanya berupa background warna yang berbeda didalam postingan atau bisa juga bentuk kotak dengan border warna yang bervariasi. Tujuan pembuatan kotak script tersebut adalah agar pengunjung mudah membaca letak script tersebut.memudahkan orang lain dalam melihat batas postingan script itu dibuat. 

Nah kali ini admin akan membagikan sebuah tutorial bagaimana cara membuat kotak script di blog memasang maupun membagikan variasi kotak script agar postingan blog sobat menjadi rapi dan indah.

Bagaimana tertarikkah sobat untuk mencobanya, oke langusng saja ikuti langkah langkah berikut ini :

1. Login ke dashboard blogger anda, setelah masuk Pilih new entry atau buat postingan baru, ketiklah sebuah script atau tulisan yang anda inginkan.

2. Ingat untuk meletakan kode html anda perlu merubah mode compose menjadi HTML.

3. Jika sudah copy kode script html kotak script berikut ini :

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">Klik Disini.</div>

4. Setelah mempaste kode script tersebut balikan lagi ke mode compose untuk melihat hasilnya

Maka jika sudah hasilnya akan terlihat seperti ini :

Klik Disini.

Catatan :
- Ganti Tulisan klik disini dengan tulisan anda atau script anda.
- border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script.
- Double; = Bentuk kotak, bisa diganti dengan

.Double , Dashed , Dotted , inset , outset , ridge

- Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
- background-color:ffffff; = warna dalam kotak.
- Dan text-align:left; = posisi tulisan didalam kotak di kiri

Oke itu langkah langkah dalam pembuatan kotak script dalam postingan blog dibawah ini admin akan membagikan beberapa variasi kode html untuk kotak script lainnya : 

<div style="border: 3px solid #78F3E7; padding: 10px; background-color: #BABFBF; text-align: left;">
Tulis Kode Anda Di Sini
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #0000CC; border-radius: 10px; padding: 10px; t-align: left;border-right: 5px solid #0000CC">Tulis Kode Anda Di Sini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #8F7992; border-radius: 10px; border: 4px solid #CC0027; padding: 10px; t-align: left;">Tulis Kode Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #8B9279; border-radius: 10px; border: 6px dashed #B0E723; padding: 10px; t-align: left;">Tulis Kode Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #0E0A11; border-radius: 10px; border: 7px double #9A23E7; padding: 10px; t-align: left;">Tulis Kode Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #2BE92F; border-radius: 10px; border: 8px outset #D4771A; padding: 10px; t-align: left;">Tulis Kode Anda Disini</div>

<div style="border: 3px #610B38 dashed; padding: 10px; background-color:#C46507; tex>t-align: left;">Tulis  Kode  Anda Disini</div>

<div class="artbody" itemprop="description articleBody">
<div id="post2160816680220375187">
<div style="background-color: #07bcf1; border: 6px solid rgb(68, 68, 68); height: 50px; overflow: auto; padding: 10px; width: 300px;">
&lt;div style="border: 6px #444444 solid; padding: 10px;background-color:#07BCF1;<br />
overflow: auto; height: 50px; width: 300px;<br />
text-align: left;"&gt;<br />
Tulis kode Anda disini&lt;/div&gt;</div>

Oke itulah beberapa bentuk kode html untuk variasi dari sebuah script anda juga bisa berkreasi sendiri catatan dan keterangan nya ada diatas tadi. Demikianlah Tutorial kali ini semoga membantu. Terima kasih telah mengunjungi :D

Bagikan Artikel ini