Cara Membuat Scroll Box di Postingan Blog

Cara Membuat Scroll Box di Postingan Blog - Scroll Box atau Scroll Bar merupakan sebuah kotak yang dilengkapi dengan fitur gulir (scroll) yang difungsikan untuk meminimalisasi tulisan panjang atau gambar besar dan diletakkan diberbagai macam tempat seperti postingan, sidebar, dan footer.

Fungsi scroll box ini mirip dengan fungsi spoiler tetapi berbeda pada sistem kerja dari masing-masing fitur. Scroll box awalnya hanya menampilkan sebagian isi tulisan atau gambar dan harus menekan scroll untuk melihat seluruh isi tulisan, sedangkan spoiler awalnya tidak menampilkan sama sekali isi dari tulisan atau gambar dan harus menekan Tombol Open Close (spoiler) untuk melihat keseluruhan isi secara langsung.

Umumnya scroll box ini banyak digunakan oleh para blogger ketika akan menampilkan script yang sangat panjang pada halaman postingan artikel sesuai dengan topik yang akan saya bahas sekarang. Dalam artikel ini, saya akan menyajikan scroll box dengan tampilan yang berbeda-beda dan saya yakin anda pasti suka. Yuk langsung ke langkah-langkah pembuatan dan pemasangannya.

Cara Membuat Scroll Boc ( Kotak Gulir ) di Postingan Blogger

1. Pertama-tama login ke akun blogger anda.
2. Pada menu blogger atau dahsboard, silahkan pilih menu Postingan lalu klik Entri baru.
3. Ganti mode postingan dari mode Compose ke mode HTML, hal ini dilakukan agar script scroll box yang kalian pasang bisa berjalan.
4. Pilih model tampilan scroll box yang anda sukai di bawah ini, kemudian copy paste script yang terdapat didalam kotak ke dalam postingan yang sudah anda ganti modenya ke mode html tadi.

Macam-macam Tampilann Scroll Box

<div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">SILAHKAN LETAKKAN ISI SCROLL BOX (TULISAN, SCRIPT ATAU URL GAMBAR) DISINI</div>

<div style="background-color: #333; border: 2px #6E2222 dashed; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">SILAHKAN LETAKKAN ISI SCROLL BOX (TULISAN, SCRIPT ATAU URL GAMBAR) DISINI</div>

<div style="background-color: #696969; border: 3px #6E2222 double; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">SILAHKAN LETAKKAN ISI SCROLL BOX (TULISAN, SCRIPT ATAU URL GAMBAR) DISINI</div>

<div style="background-color: #c2c2c2; border: 2px #6E2222 ridge; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">SILAHKAN LETAKKAN ISI SCROLL BOX (TULISAN, SCRIPT ATAU GAMBAR) DISINI</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #696969; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">SILAHKAN LETAKKAN ISI SCROLL BOX (TULISAN, SCRIPT ATAU GAMBAR) DISINI</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; height: 30px; overflow: auto; width: auto;">SILAHKAN LETAKKAN ISI SCROLL BOX (TULISAN, SCRIPT ATAU GAMBAR) DISINI</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; height: 30px; overflow: auto; width: auto;">SILAHKAN LETAKKAN ISI SCROLL BOX (TULISAN, SCRIPT ATAU GAMBAR) DISINI</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; height: 30px; overflow: auto; width: auto;">SILAHKAN LETAKKAN ISI SCROLL BOX (TULISAN, SCRIPT ATAU GAMBAR) DISINI</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; height: 30px; overflow: auto; width: auto;">SILAHKAN LETAKKAN ISI SCROLL BOX (TULISAN, SCRIPT ATAU GAMBAR) DISINI</div>

Catatan :

• Tulisan berwarna biru adalah isi dari scroll box, silahkan ganti sesuai dengan keperluan anda. Apakah anda ingin mengisinya dengan tulisan biasa, script atau url gambar. Khusus untuk script kode HTML, anda harus memparsenya terlebih dahulu agar kodenya bisa tampil di dalam scroll box sedang untuk script kode CSS anda bisa langsung meletakkannya ke dalam scroll box.
• Tulisan berwarna merah adalah kode warna dari scroll box, ganti dengan kode warna favorit anda.
• Tulisan berwarna oranye adalah nilai tinggi dan lebar dari scroll box, anda bisa menggantinya dengan nilai yang lain sesuai dengan keperluan anda. Width: auto, auto disini berarti lebar scroll box menyesuaikan lebar dari body postingan.

5. Setelah semuanya sudah diatur sesuai dengan keperluan, silahkan klik tombol Preview/Pratinjau untuk melihat hasilnya apakah sudah benar atau belum.

6. Jika semuanya sudah benar atau tidak ada pesan error yang muncul, klik tombol Publikasikan untuk menerbitkan postingan anda.

Bagaimana sobat? Cukup mudah bukan?

Demikian tutorial sederhana mengenai bagaimana cara membuat dan memasang scroll box di dalam postingan blogspot. Semoga bisa bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG