Minggu, 16 Oktober 2011

Membuat Scroll Box

07.03  media pelajar  No comments

Se Seperti halnya penggunaan textarea, scroll box juga berfungsi untuk lebih memudahkan blogger dan terutama pembaca blog saat menikmati blog yang berkaitan dengan KODE HTML. Penggunaan scroll box sedikit mempunyai nilai lebih karena dokumen yang dipostingkan di dalamnya dengan mudah dapat dilakukan beberapa perubahan seperti halnya jenis, warna dan ukuran font yang pada akhirnya akan lebih memudahkan bagi pembaca blog untuk memahami dokumen yang terposting. Selain dari hal tersebut, dalam scroll box dapat juga disertakan posting yang berupa image atau gambar. Scroll box dapat dibuat dalam bentuk yang paling sederhana hingga bentuk yang cukup kompleks dengan memadukan KODE HTML dan image hingga tercipta sebuah scroll box yang indah, dinamis dan atraktif. Dibawah ini salah satu contoh bentuk scroll box sederhana yang dapat dikembangkan menjadi bentuk yang lebih kompleks dengan menambahkan beberapa fungsi lain baik dengan menggunakan KODE CSS ataupun gambar.

·         Gunakan KODE berikut saat melakukan posting :
<div style="height:200px; width:500px; background: #66CCFF; border:2px solid #0000FF; padding: 20px 6px; overflow:scroll;overflow:auto;">
Letakkan Teks/Image/KODE HTML atau materi posting yang lain di sini
</div>

·        Bisa juga membentuk sebuah scroll box dengan menggunakan KODE CSS dengan menyimpannya di bagian head di antara tag <head> dan tag </head> (tepatnya di atas kode ]]></b:skin>). Dengan menggunakan CSS yang bersifat permanen, maka KODE lain yang dipergunakan saat melakukan posting menjadi lebih simple dan ruang posting menjadi tidak penuh sesak oleh banyaknya KODE HTML pembentuk scroll box.
  • Langkah yang harus dilakukan Klik “Rancangan” kemudian masuk ke ”Edit HTML”. Masukkan KODE CSS berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:
.postingbox {
     width: 500px; /* sesuaikan lebar dg kebutuhan atau pakailah auto - width:auto */
     background: #66CCFF url();/* Untuk background color atau image */
     border: 2px solid #555; /*tebal, jenis dan warna */
     overflow: scroll; overflow:auto;
     font-size: 12px; /* ukuran font */
     font-family: Verdana; /*atau jenis font lain */
     font-weight: 500; /* font-weight bisa juga normal atau bold */
     padding: 15px 8px; /* atas/bawah=20px, kanan/kiri=6px */
     margin:15px 5px; /silahkan atur margin bila di kehendaki */
     }

background: #66CCFF url(URL image);
Contoh :
background:#66ccff url(http://picasaweb.google.com/lh/photo/0i9tRpRmzC4SjmxNcObbFKx473hnftpwMKtX-Piw38I?feat=directlink);

  • Gunakan KODE berikut saat melakukan posting :
<div class="postingbox" style="height:300px;">
Letakkan di sini Teks/Image/KODE HTML yang akan dipostingkan
</div>

Posted in:

0 komentar:

Posting Komentar