Cara Membuat Kotak Unik Kode HTML di Postingan

Kode HTML sudah tidak asing lagi bagi seorang blogger, dimana sering kita jumpai pada template blog. Pada saat kita ingin merubah tampilan blog, maka kode HTML pada template tersebut harus kita edit atau ditambahkan. Selain itu, membuat kotak unik kode HTML di postingan harus menggunakan tambahan kode HTML agar tampilannya rapih dan tidak memakan banyak tempat. Pada artikel sebelumnya, sudah dijelaskan cara mudah menampilkan kode HTML pada artikel blog.

Sebetulnya, membuat kotak unik kode HTML di postingan sangat mudah. Sobat hanya perlu memasangan tambahan kode HTML (script box) pada menu HTML postingan Blogger. Apabila sobat sudah mengetahui kodenya, tinggal pasangan tambahan kode HTML (script box) tersebut di postingan. Dibawah merupakan tampilan kotak unik untuk kode HTML di postingan blog.

Banyak sekali model script box yang bisa sobat gunakan pada postingan. Dan sobat juga bisa mengatur tampilannya dengan merubah ukuran dan warnanya sesuai dengan selera sobat sendiri. Model script box tersebut bisa berupa kotak biasa, kotak berwarna, kotak double bolder, kotak scroll horizontal, kotak scroll vertikal dan banyak lagi. Perlu sobat ketahui bahwa kegunaan kotak unik tersebut bukan hanya digunakan untuk meletakan kode HTML di postingan saja. Akan tetapi sobat bisa menggunakan untuk meletakan kalimat penting atau catatan khusus pada postingan blog agar nantinya terlihat menarik dan rapih.

Berikut model scrip box yang bisa sobat pilih :

1. Kotak biasa dengan single padding border black 

<div style="background-color: ivory; border: 2px solid #444; padding: 10px; text-align: left;">
TULISAN DISINI
</div>

2. Kotak scroll vertikal

<div style="background-color: white; border: 2px solid gray; height: 100px; overflow: auto; padding: 5px; width: auto;">
 TULSAN DISINI
A
B
C
</div>

3. Kotak double dotted dengan warna

<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
TULISAN DISINI</div>

4. Kotak double bolder dengan warna

<div style="background-color: azure; border: 3px #1780dd double; padding: 10px; text-align: left;"> TULISAN DISINI<br /></div> </div>

5. Kotak Scroll Horizontal dan Vertikal

<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">
TULISAN DISINI</div>
</div>

6. Kotak dengan radius

<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;">
TULISAN DISINI</div>

7. Kotak box dengan copy all

<form name="copy"><div align="center"><input value="Copy All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 400px; height: 80px;" name="txt">SELAMAT DATANG DI LOTEKINDO.BLOGSPOT.COM MEMBAHAS SEPUTAR TUTORIAL BLOG, GADGET, APLIKASI ANDROID DAN WINDOWS.</textarea></p></form>

  
Hasil tampilan dari script box dengan copy all :

SELAMAT DATANG DI LOTEKINDO.BLOGSPOT.COM MEMBAHAS SEPUTARAN TUTORIAL BLOG, GADGET, APLIKASI ANDROID DAN WINDOWS.

Catatan :

• Silakan sobat ganti tulisan disini (berwarna merah) dengan kode HTML atau kalimat penting yang akan sobat tampilkan

• Untuk warna, ukuran dan padding box (berwarna biru) bisa sobat atur sesuai dengan selera sendiri. Sobat tinggal merubah kode warna atau angka pada script box-nya.

Berikut cara memasang scriptt box di postingan blog :

1. Silakan sobat log in di akun Blogger.
2. Pilih Posts > New Post > Silakan sobat masukan materi yang akan diposting [Compose].
   
3. Untuk memasukan kode HTML script box di bagian [HTML], bukan di Compose.  Untuk memudahkan pencarian kalimat gunakan CTRL + F, dan silakan copy kode sript box yang akan digunakan dibawah kalimat tersebut.
4. Kemudian sobat kembali ke [Compose] > masukan kode HTML atau kalimat penting dalam script box.

Itulah beberapa script box atau kotak unik kode HTML pada postingan blog, sobat bisa memilihnya dengan selera sendiri. Dengan memasangan kotak unik tersebut akan membuat postingan sobat menjadi lebih rapi dan lebih dinamis, sehingga mempermudah pengunjung saat membaca postingan. Semoga bermanfaat...Happy Enjoy, Guys.