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.

BACA JUGA:  CARA MUDAH MENDAPATKAN UANG DI INTERNET

BACA JUGA:  CARA MUDAH COPY PASTE ANGKA HASIL RUMUS DI EXEL

BACA JUGA:  CARA CEPAT DAFTAR GOOGLE ADSENSE DI BLOG

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.

Sumber http://kherysuryawan.blogspot.com/

Bagikan Artikel ini