.jpg)
Seperti halnya penggunaan textarea, scroll box juga berfungsi untuk lebih memudahkan blogger dan terutama pembaca blog saat menikmati posting dalam box dengan ukuran terbatas yang dimaksudkan untuk efisiensi atau penataan ruang blog. 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.
D E M O Scroll Box dg Kode CSS :
Letakkan di sini Teks/Image/KODE HTML yang akan dipostingkan.
Seperti halnya penggunaan textarea, scroll box juga berfungsi untuk lebih memudahkan blogger dan terutama pembaca blog saat menikmati posting dalam sebuah box dengan ukuran terbatas. 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 :
Sampeyan juga bisa 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 xHTML yang dipergunakan saat melakukan posting menjadi lebih simpel dan ruang posting menjadi tidak penuh sesak oleh banyaknya KODE HTML pembentuk scroll box.
Catatan/Keterangan :
Update » Rebo WAGE,Maret,20,2012
D E M O Scroll Box dg Kode CSS :
Letakkan di sini Teks/Image/KODE HTML yang akan dipostingkan.Seperti halnya penggunaan textarea, scroll box juga berfungsi untuk lebih memudahkan blogger dan terutama pembaca blog saat menikmati posting dalam sebuah box dengan ukuran terbatas. 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 :
xHTML Scroll Box Posting :
<div style="max-height:300px;width:auto; background: #555; border:2px solid #0000FF;color:#eee;padding: 20px 10px; overflow:scroll;overflow:auto;"> Letakkan Teks/Image/KODE HTML atau materi posting yang lain di sini </div>
Sampeyan juga bisa 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 xHTML yang dipergunakan saat melakukan posting menjadi lebih simpel dan ruang posting menjadi tidak penuh sesak oleh banyaknya KODE HTML pembentuk scroll box.
Kode CSS :
.GRpostingbox{
width:500px; /* sesuaikan lebar dg kebutuhan atau pakailah auto - width:auto */
background:#f9fafa url(https://lh4.googleusercontent.com/-m_HWcjb9dSc/T2jsl5bEn3I/AAAAAAAAAdU/3FcLyKHCCgI/h500/GR_grad-blue-1x500.png) top left repeat-x; /* Untuk background color atau background image */
border:7px double #555; /* tebal, jenis dan warna */
max-height:400px; /* pengaturan otomatis maksimal tinggi box */
overflow:scroll; /* for IE */
overflow:auto;
border-radius:6px; /* border lengkung */
font-size:11px; /* ukuran font */
font-family:Verdana; /*atau jenis font lain */
font-weight:500; /* font-weight bisa juga normal atau bold */
color:#000; /* warna font */
padding:15px 10px; /* atas/bawah=15px, kanan/kiri=10px */
margin:15px 0; /* silahkan atur margin bila di kehendaki */
}xHTML :
<div class="GRpostingbox">
Letakkan di sini Teks/Image/KODE HTML yang akan dipostingkan
</div>Catatan/Keterangan :
- Dengan penggunaan max-height:400px; maka tinggi box maksimal menjadi sebesar 400px. Jika isi box lebih dari ketinggian tersebut maka secara otomatis sebuah scroller box akan ditampilkan.
- Penggunaan background image berfungsi menambah keindahan box. Ganti jika diperlukan!
- Jika membutuhkan panduan untuk menyimpan kode CSS, silahkan buka Special Tutorials di menu sebelah kiri halaman.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Rebo WAGE,Maret,20,2012
» Happy Blogging - gubhugreyot «
Wah membantu banget sob,,,,langsung ke TKP
BalasHapusmantaff buangettt nih blog...wow keren abis...
BalasHapustolong pencerahannya mas...dah di coba buat scroll boxnya yang muncul di postingan kok kodenya seperti text biasa, apa ya masalahnya? GBU..
Saya coba ya mas.. terimakasih atas informasinya
BalasHapuswah nise share gan
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapus