Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat Scroll Box untuk posting

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 :

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 :
  1. 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.
  2. Penggunaan background image berfungsi menambah keindahan box. Ganti jika diperlukan!
  3. 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 «

5 komentar:

  1. Wah membantu banget sob,,,,langsung ke TKP

    BalasHapus
  2. mantaff buangettt nih blog...wow keren abis...
    tolong pencerahannya mas...dah di coba buat scroll boxnya yang muncul di postingan kok kodenya seperti text biasa, apa ya masalahnya? GBU..

    BalasHapus
  3. Saya coba ya mas.. terimakasih atas informasinya

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

 
GR | Edited by | gubhug reyot