Cara Membuat Kotak Script Responsive Keren Untuk Blog

Cara Membuat Kotak Script Responsive Untuk Blog dengan Menggunakan HTML dan CSS merupakan cara yang mungkin dicari bagi mereka yang bergelut di bidang blogger atau website.

Kotak Script Ini Biasa digunakan di situs-situs belajar pemrograman, atau situs yang membahas sediit source code, dimana tujuan pembuatan kotak script ini ditujukan agar membedakan antara konten pembahasan dengan source code (pembahasan lain).

Tentunya cara ini terbilang mudah bagi kalian yang sudah mengetahui tentang HTML dan CSS, namun cara ini admin bahas karena masih banyak yang bingung dan butuh penjelasan bagaimana cara membuatnya.

Cara Membuat Area Script untuk Blog

Nah, untuk kalian yang nggak mau ambil pusing dengan source codenya, silahkan tinggal kalian copy aja script di bawah ini :

Cara Membuat Kota Script Responsive Keren Untuk Blog

1). Masuk bagian menu Pos > Entri Baru
2). Ketik semua artikel yang ingin kalian buat, setelah itu, bila kalian membutuhkan kotak script atau source code, silahkan enter sampai 3 kali atau 5 kali, untuk memberi space pada kotak script.

Langkah Kedua

Ingat nama atau kalimat yang saya bei tanda merha itu, kemudian kita masuk kebagian tab HTML.

3). Masukkan script CSS terlebih dahulu pada bagian bawah penulisan artikel dengan cara klik HTML lalu letakkan script CSS berikut ke posisi paling bawah

Langkah Ketiga bagian Pertama

Copy script CSS dibawah ini :

<style type="text/css">
#judul {
 width: 95%;
 margin: auto;
 height: auto;
 padding: 10px;
 color: #fff;
 background: #3dc887;
 text-align: center;
 font-size: 20px;
 font-family: Arial;
 border-radius: 5px 5px 0px 0px;
}
#area-code {
 width: 95%;
 margin: auto;
 height: auto;
 padding: 10px;
 background: #2c333d;
 color: #fff;
 border-radius: 0px 0px 5px 5px;
 border: 1px solid #c9c9c9;
}
</style>

Masukkan script CSS diatas seperti contoh gabar dibawah ini :

Langkah Ketiga bagian Kedua

4). Lalu, kita masuk kebagian penempatan kotak script atau source code, tekan enter beberapa kali untuk penempatan area code, lalu masukkan dengan cara yang saya sebutkan tadi :

<div id="judul">
Judul
</div>
<div id="area-code">
<br/>
</div>

Dan sesuaikan dengan kalimat yang sudah kita beri space enter banyak, seperti contoh gambar dibawah ini :

Langkah Keempat

5). Setelah itu hapus bagian script dikasih tanda panah merah 
Lalu masukkan Script HTML tadi kebagian yang sudah dihapus tadi

6). Lalu, kita kembali kebagian tab Compose, dan tampilannya akan nampak seperti dibawah ini :

Langkah Keenam

Keterangan : 
- Untuk tanda panah yang berwarna merah, kalian bisa ganti judul sesuka hati kalian
- Untuk Kotak yang berwarna merah, masukkan source code yang mau kalian tampilkan.

"Eh min, tampilannya kok tidak bentuk kotak script...? kok hanya judul gitu...? mana tampilannya...?"

Memang, dalam penulisan script masih belum tampil, akan tetapi, setelah kalian Publikasikan, maka tampilannya akan nampak, 

jadi hati-hati ya dalam menghapus area source code diatas, salah menghapus, maka kalian harus mengulang lagi, atau menghapus seluruh bagian yang berkaitan dengan area script, ikuti langkah-langkah yang sudah saya jelaskan ini, agar area script kalian jadi lebih sempurna, oke kita lanjut lagi

7). Setelah itu, kita akan menemukan space terlalu banyak atau space enter terlalu banyak, maka solusi yang harus kita lakukan yaitu, hapus dari bawah sampai keatas hingga nampak seperti dibawah ini : 

 

Sebelum

Sesudah

Catatan : 
Ingat, tekan enter 1 kali pada bagian awal tanda panah, bukan diatas tanda panah.
Setelah itu simpan dan lihat hasilnya 
Bagaimana kawan...? Top Banget bukan hahahah..pastinya dongs keren.

"Apa sih manfaat dari Area Script atau source code bagi blog kita....?"

ya banyak sih manfaat yang dimiliki area source code, salah satunya, agar blog kita terlihat menjadi rapi dan enak dipandang oleh pengunjung blog kita.

 
dan juga apabila blog kalian menonaktifkan blog text atau text yang ada di blog kalian memang sengaja di nonaktifkan, secara otomatis, apabila kalian tidak menggunakan area source code ini maka source code tidak akan bisa di copy.

Nah itu lah beberapa kelebihan dari penggunaan tempat source code.
Dan berikut tampilan area codenya :

Tampilan Area Code

Sekian tutorial dari saya, apabila ada kekurangan dalam penulisan source code atau error code, kalian bisa meninggalkan komentar pada kotak komentar yang sudah disediakan dibagian bawah blog, dan secepatnya akan saya balas. Atau juga kalian bisa menghubungi melalui via Email, dengan cara klik tombol Contact pada bagian bawah blog, Sekian Terimakasih