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.
Nah, untuk kalian yang nggak mau ambil pusing dengan source codenya, silahkan tinggal kalian copy aja script di bawah ini :
 |
| 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.
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
Copy script CSS dibawah ini :
Masukkan script CSS diatas seperti contoh gabar dibawah ini :
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 :
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 |
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>
#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>
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 :
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.
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
Belum ada Komentar untuk "Cara Membuat Kotak Script Responsive Keren Untuk Blog"
Posting Komentar