Skip to content Skip to sidebar Skip to footer

Cara Membuat Kotak Script Responsive Keren Untuk Blog

Halo sahabat Dunia Programming, pada tutorial kali ini saya akan membahas bagaimana sih cara membuat kotak source code atau script pada blog kita...? sangat gampang sekali kok, bagi kalian yang udah paham dengan bahasa HTML dan CSS, tinggal kalian kembangkan aja.
Membuat Area Script Untuk Blog Keren
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 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 :

CSS
<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 :

HTML
<div id="judul">
Judul
</div>
<div id="area-code">
<br/>
<br/>
<br/>
<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

Post a Comment for "Cara Membuat Kotak Script Responsive Keren Untuk Blog"

Berlangganan via Email