Cara Menciptakan 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 goresan pena panjang atau gambar besar dan diletakkan diberbagai macam kawasan menyerupai postingan, sidebar, dan footer.
Fungsi scroll box ini menyerupai dengan fungsi spoiler tetapi berbeda pada sistem kerja dari masing-masing fitur. Scroll box awalnya hanya menampilkan sebagian isi goresan pena atau gambar dan harus menekan scroll untuk melihat seluruh isi tulisan, sedangkan spoiler awalnya tidak menampilkan sama sekali isi dari goresan pena atau gambar dan harus menekan Tombol Open Close (spoiler) untuk melihat keseluruhan isi secara langsung.
Umumnya scroll box ini banyak dipakai oleh para blogger saat 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 niscaya suka. Yuk pribadi 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 sajian blogger atau dahsboard, silahkan pilih sajian Postingan kemudian klik Entri baru.
3. Ganti mode postingan dari mode Compose ke mode HTML, hal ini dilakukan biar script scroll box yang kalian pasang sanggup 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 ialah isi dari scroll box, silahkan ganti sesuai dengan keperluan anda. Apakah anda ingin mengisinya dengan goresan pena biasa, script atau url gambar. Khusus untuk script aba-aba HTML, anda harus memparsenya terlebih dahulu biar kodenya sanggup tampil di dalam scroll box sedang untuk script aba-aba CSS anda sanggup pribadi meletakkannya ke dalam scroll box.
- Tulisan berwarna merah ialah aba-aba warna dari scroll box, ganti dengan aba-aba warna favorit anda.
- Tulisan berwarna oranye ialah nilai tinggi dan lebar dari scroll box, anda sanggup 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 karenanya 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 gampang bukan?
Demikian tutorial sederhana mengenai bagaimana cara menciptakan dan memasang scroll box di dalam postingan blogspot. Semoga sanggup bermanfaat and " Happy Blogging "