CARA MEMBUAT KOTAK BOX SCRIPT PADA POSTINGAN BLOG
Saya
adalah seorang blogger pemula yang masih perlu banyak belajar, terutama dalam
hal-hal baru yang ada dalam dunia blogger .
Awalnya
saya membuat blog hanya sebagai arsip saja untuk menyimpan informasi yang masih
bisa untuk saya jadikan ingatan disaat saya membutuhkan tutorial ataupun
informasi yang mungkin saja saya lupa sehingga saya tidak perlu jauh-jauh untuk
mencarinya dengan kata lain cukup membuka link blog sendiri saja sudah cukup.
Lama
kelamaan setelah saya membuat beberapa artikel dalam blog ini ternyata saya
tertarik untuk merawat blog ini terutama dalam hal tampilan postingan baik
dalam hal kata-kata,gambar dan juga kotak atau box yang berisi tulisan. Semua unsur
tersebut sangat penting untuk di pelajari dalam dunia ngeblog karena dengan
membuat postingan yang menarik untuk di baca dan di lihat maka akan memuaskan
para pengunjung yang sempat hadir dalam blog kita.
Pada
kesempatan ini saya ingin kembali menyimpan arsip untuk saya jadikan referensi
buat diri sendiri, namun semoga juga bisa bermanfaat buat siapapun yang sempat
membaca artikel ini. Dalam artikel ini saya ingin berbagi cara dalam membuat
box atau kotak yang didalamnya akan disimpan suatu tulisan ataupun kode script
yang penting sehingga jika di tampilkan dalam postingan blog akan memberi
sensasi yang menarik untuk di lihat. Dalam membuat kotak box untuk postingan
ada beberapa jenis dalam hal ini saya akan memberikan model box tanpa scrool
dan model box yang memiliki scrool.
Sebelum
melakukan aksi membuat kotak dalam postingan terlebih dahulu saya berikan
gambaran mengenai bentuk kotak tanpa scrool dan bentuk kotak yang berisi scrool.
Perhatikan
gambarnya di bawah ini.
Untuk
bisa membuat kotak atau box agar dapat di tampilkan dalam postingan blog
silahkan simak penjelasan saya di bawah ini.
Pertama
masuklah dalam dashboard blog anda kemudian klik menu postingan dan pilih entri
baru/ new entri
Kemudian
tulislah sebuah artikel yang mana di pertengahan artikel tersebut nantinya akan di pasangkan sebuah
kotak yang di dalam kotak tersebut akan berisi suatu tulisan ataupun kode
scrip. Sebagai contoh lihatlah sebuah artikel yang saya tulis di bawah ini :
Untuk
membuat sebuah kotak di dalam artikel tersebut caranya silahkan masuk pada mode
“HTML”
Kemudian
masukkan kode script di bawah ini diantara tulisan sesuai keinginan kita dimana kita
mau menempatkannya.
<div style="overflow:auto;width:300px;height:100px;padding:10px;border:1px solid #eee">ISI ARTIKEL DALAM KOTAK INI
</div>
Sebagai
contoh lihat gambar di bawah, dan jika sudah memasukkan kode script tersebut
Setelah
itu klik kembali kode compose untuk melihat hasilnya
Hasilnya
terlihat pada gambar di bawah ini
Pada
gambar di atas sudah terbentuk sebuah kotak, sekarang silahkan ganti tulisan ”
ISI ARTIKEL DALAM KOTAK INI” dengan tulisan yang ingin anda masukkan kedalam
kotak tersebut.
sebagai
contoh saya menggantinya dengan tulisan seperti pada gambar di bawah ini
kini
anda telah berhasil membuat sebuah kotak di tengah artikel atau postingan blog
anda.
Contoh
penjelasan di atas merupakan cara membuat kotak berbentuk scroll yang artinya
jika tulisan atau kalimatnya panjang maka akan muncul scroll yang bisa dinaikkan
atau di turunkan saat ingin membaca tulisan yang ada di dalam kotak tersebut.
Untuk
membuat kotak tanpa scrool caranya juga sama dengan cara yang sudah saya
jelaskan diatas, hanya yang berbeda adalah kode scripnya saja.
Berikut
ini saya berikan beberapa kode script membuat kotak tanpa scrool, silahkan anda
pilih sesuai selera anda karena beda script maka akan menghasilkan bentuk kotak
yang berbeda pula
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">Pastekan Code Script Di Sini </div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Pastekan Code Script Di Sini </div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;"> Pastekan Code Script Di Sini </div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Pastekan Code Script Di Sini </div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Pastekan Code Script Di Sini </div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;"> Pastekan Code Script Di Sini </div>
<div style="background-color: #36e4fd; border: 2px #610b38 dashed; padding: 10px;">Pastekan Code Script Di Sini </div>
<div style="background-color: #c2c2c2; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>
<div style="background-color: #82cafa; border: 3px #5f200e double; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>
<div style="background-color: #d5839f; border: 2px #006400 inset; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>
<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: #00b8ff; border-radius: 10px; border: 7px outset #fff; padding: 10px; t-align: left;">Pastekan Code Script Di Sini </div>
Sekian
tutorial yang bisa saya bagikan pada penjelasan kali ini, terimakasih atas
kunjungan anda ke dalam postingan blog ini, semoga saja tutorial ini bermanfaat
buat anda yang membutuhkannya.