Awalnya Kami membuat blog hanya sebagai arsip saja untuk menyimpan informasi yang masih bisa untuk Kami jadikan ingatan disaat Kami membutuhkan tutorial ataupun informasi yang mungkin saja Kami lupa sehingga Kami tidak perlu jauh-jauh untuk mencarinya dengan kata lain cukup membuka link blog sendiri saja sudah cukup.
Lama kelamaan setelah Kami membuat beberapa artikel dalam blog ini ternyata Kami 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 Kami ingin kembali menyimpan arsip untuk Kami jadikan referensi buat diri sendiri, namun semoga juga bisa bermanfaat buat siapapun yang sempat membaca artikel ini. Dalam artikel ini Kami ingin share 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 macam dalam hal ini Kami akan memberikan model box tanpa scrool dan model box yang memiliki scrool.
Sebelum melakukan aksi membuat kotak dalam postingan terlebih dahulu Kami 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 Kami di bawah ini.
Pertama masuklah dalam dashboard blog kalian 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 Kami 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 kalian masukkan kedalam kotak tersebut.
sebagai contoh Kami menggantinya dengan tulisan seperti pada gambar di bawah ini
kini kalian telah berhasil membuat sebuah kotak di tengah artikel atau postingan blog kalian.
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 Kami jelaskan diatas, hanya yang berbeda yaitu kode scripnya saja.
Berikut ini Kami berikan beberapa kode script membuat kotak tanpa scrool, silahkan kalian pilih sesuai selera kalian 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 Kami share pada penjelasan kali ini, terimakasih atas kunjungan kalian ke dalam postingan blog ini, semoga saja tutorial ini bermanfaat buat kalian yang membutuhkannya.
Sumber : www.kherysuryawan.id
Post a Comment