Cara Membuat Box Untuk Menempatkan Kode Di Postingan

Membuat Box Untuk Menempatkan Kode HTML CSS atau JavaScript di sebuah postingan sebenarnya sobat dapat menggunakan tag pre, code, ataupun textarea inilah yang umum digunakan, namun default dari tag tersebut sangat sederhana karena hanya berupa sebuah pewarna background, atau tidak ada background sama sekali.

Nah, apa yang akan kita pelajari adalah membuat box untuk menempatkan kode dipostingan dengan menggunakan tag <div> saja, dan yang perlu kita tambahkan hanyalah sebuah class, tentu saja class ini akan kita buat manual dengan properti CSS.

Jika sobat sudah siap, silahkan siapkan Notepad atau sejenis nya, atau sobat bisa langsung masuk ke Edit HTML jika dari blogger (bisa ditulis sebelum </head> atau sebelum ]]></b:skin>).

Cara Membuat Box Sederhana Untuk Menempatkan Kode Di Postingan Dengan Tag Div

Perlu diketahui, untuk membuat sebuah class didalam template, kita menggunakan titik (.) diawal (sebelum nama class). Jadi, silahkan sobat tentukan masing-masing dari nama tersebut, yang mudah diingat saja, sebagai contoh disini saya akan memberikan nama class nya dengan untukkode. Maka, penulisan nya akan menjadi .untukkode { } didalam kurung tersebut lah kita akan memberikan properti CSS, silahkan lihat contoh paling sederhana dibawah ini.

<style>
.untukkode {
  width: 100%;
  background: whitesmoke;
  margin: 10px 0 10px 0;
  padding: 8px 12px 15px 6px;
  word-wrap: break-word;
}
</style>

Dengan kode CSS diatas, tampilan box nya akan seperti diatas itu, silahkan dicoba-coba untuk mengganti value dari properti nya.

Keterangan: Silahkan sobat ganti background nya dengan warna latar sesuai selera, untuk margin dan padding adalah untuk menentukan jarak antar objek, dan antar konten ke objek 10px 0 10px 0 atau 8px 12px 15px 6px adalah untuk menentukan jarak atas kanan bawah kiri . Untuk lebih mengenal margin dan padding lebih lanjut dan bagaimana cara kerjanya, sobat dapat mengunjungi artikel saya

Mengenal Properti CSS Margin, Padding, Color, Background, Border dan Penerapanya .

Untuk width tersebut tidak perlu diganti, karena 100% adalah untuk mengatur agar box nya menjadi pas dengan ukuran lebar badan postingan, dan ini juga berguna untuk menyesuaikan ukuran jika template yang sobat gunakan adalah responsive, berbeda jika sobat menggunakan pixel (px) maka ukuran box tidak akan dapat menyesuaikan dengan tampilan resolusi yang lebih kecil. Sedangkan untuk word-wrap: break-word berfungsi untuk membatasi teks yang berada didalam tag div nantinya agar teks tidak keluar dari box div yang kita beri class ini.

Lalu untuk menerapkanya pada postingan, ketikkan manual dalam mode HTML bukan compose sebagai berikut.

<div class="untukkode">Konten (Teks / Gambar / Video / Apapun) Disini</div>

Contoh diatas hanyalah contoh yang benar-benar sangat sederhana, sobat dapat mengembangkan nya dengan menambahkan border, shadow, dan lain-lain.

Baiklah, kita akan mengembangkan box sederhana sebelumnya, menjadi terlihat cukup menarik dengan menambahkan CSS dan CSS3 lainya.

Final - Cara Membuat Box Yang Menarik Untuk Menempatkan Kode Di Postingan Blog

Dari CSS sebelumnya, kita akan menambahkan class baru juga, jadi yang akan kita buat adalah double box. Box pertama untuk pemanis diluar, dan box kedua untuk menempatkan kode (teks) nya.
Sebagai contoh, disini saya membuat class baru dengan nama boxdalam. Jadi, kita memiliki 2 class yaitu untukkode dan boxdalam.

CSS

<style>
.untukkode {
box-shadow: 0 0 2px #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 10px 0 10px 0;
background: whitesmoke; }

.untukkode:hover {
box-shadow: 1px 1px 4px #000;
}

.boxdalam {
background: white;
border-left: 4px solid green;
margin: 14px 0 14px 18px;
padding: 2px 12px 2px 12px;
word-wrap: break-word; }

.boxdalam:hover {
background: whitesmoke;
transition: 1s;
}
</style>

Keterangan: hover adalah sebuah perintah dimana saat cursor mengarah ke objek, maka properti akan diakifkan, Latar belakang warna kuning tersebut adalah kode dari CSS3, sebelumnya sudah pernah saya bahas pada artikel lain dengan lengkap tentang box shadow dan transitions, silahkan nanti dibaca

Cara Membuat Efek Shadow dan Transitions Pada Teks atau Box

Jika ingin mengganti warna pembatas sebelah kiri, atau kurang besar pembatasnya, silahkan di ganti value pada border-left: 4px solid green 4px adalah ukuran (tebalnya) dan green adalah warna nya. Untuk warna latar belakang, silahkan diganti pada properti background, jika sobat bingung tentang warna-warna HTML, silahkan ke color-hex.com untuk melihat warna yang dapat digunakan, contoh #000 untuk hitam, #FFF untuk putih, dan masih banyak lagi. Untuk keterangan properti lain, sepertinya sudah saya bahas pada keterangan pertama tadi, Cara menerapkan CSS tersebut ke postingan sama dengan yang telah kita bahas sebelumnya, sobat hanya perlu membuat tag div pada mode HTML didalam postingan. Berikut penampakanya.

HTML

<div class="untukkode">
<div class="boxdalam">
Konten (Teks / kode / gambar / video / apapun) Disini
</div>
</div>

Mudah bukan? sobat dapat mendesain ulang CSS tersebut, buatlah jadi lebih menarik dan sesuaikan dengan template, selamat mencoba. Jika ada yang kurang jelas, silahkan berkomentar. Semoga artikel kali ini dapat bermanfaat. Sampai jumpa.

Info4You Info4You Update Pada: February 08, 2017