15 Feb 2017

Membuat Kotak Script Sederhana Pada Posting Blogger

Tags

Dalam membuat sebuah posting untuk suatu artikel ada kalanya kita perlu membuat sebuah kotak untuk menempatkan suatu tulisan atau sebuah Script baik itu HTML, CSS, JavaScript atau yang lainnya. Selain agar terlihat lebih rapi dalam posting, kotak (yang saya sebut kotak script) ini juga berfungsi agar memudahkan pengunjung untuk mengcopy script atau tulisan yang kita letakkan di dalam kotak script tersebut. biasanya kotak script ini banyak ditemukan pada posting - posting tentang tutorial desain website atau blog, meski pun tak jarang ditemukan pada posting dengan tema lainnya. Bagi anda yang masih bingung cara membuatnya, berikut adalah cara sederhana membuat kotak script pada posting blog.

1. Login lah pada akun blog anda.

2. Buatlah sebuah artikel baru yang anda inginkan

3. Masuklah pada pemformatan HTML

Membuat Kotak Script Sederhana Pada Posting Blogger

Masuklah pada pengeditan posting di kolom HTML, Pilihlah sesuai dengan yang saya beri garis warna merah pada gambar diatas.

4. Masukkan kode berikut pada kolom tempat menulis artikel.

<div style="border: 3px #000000 Doublepadding: 10px;background-color:#ffffff;
text-align: left;">.Letakkan Tulisan Anda Disini.</div>

Letakkan kode diatas terserah dimana pun anda mau yang penting berada di kolom posting, seperti contoh berikut.

Membuat Kotak Script Sederhana Pada Posting Blogger

Jika anda kurang merasa cocok dengan style diatas, anda bisa merubahnya sesuai dengan keinginan anda.

border: 3px : Untuk mengubah ukuran ketebalah garis kotak, anda bisa sesuaikan dengan mengubah angkanya

#000000 : Untuk mengubah warna garis pada kotak, anda bisa mengubahnya dengan warna lain, asalkan berbeda dengan warna background blog anda agar kotak script tetap terlihat

Double : Untuk mengganti style garis kotak. ada beberapa style garis yang dapat anda gunakan.
Style Dashed

Style Dotted

Style Groove

Style Dotted

Style Inset

Style Outset

Style Ridge

Style Solid

padding: 10px : Mengubah lebar kotak, untuk panjang akan otomatis menyesuaikan dengan kolom artikel. 

background-color:#ffffff; : Untuk mengubah warna background kotak script 

text-align: left; : Untuk mengubah posisi tulisan, ganti tulisan Left dengan Right untuk posisi tulisan rata kanan dan Center untuk posisi rata tengah. 

5. Letakkan kode script anda dalam kotak

Langkah terakhir adalah letakkan kode script atau tulisan anda pada kotak dengan mengganti tulisan "Letakkan Tulisan Anda Disini", namun perlu diketahui bahwa kolom pengeditan HTML dan Compose itu berbeda, bila anda ingin meletakkan sebuah script maka gantilah dulu ke kolom Compose agar script anda terbaca sebagai tulisan biasa, karena jika anda melakukannya di kolom HTML, maka jangan heran bila tulisan anda tidak muncul nantinya. Untuk lebih jelasnya lihatlah gambar berikut.

Membuat Kotak Script Sederhana Pada Posting Blogger

Sekian artikel tentang Membuat Kotak Script Sederhana Pada Blogger, Semoga artikel yang saya posting kali ini bermanfaat.

Artikel Terkait