Cara Membuat Kotak Quote Dengan Fungsi Scroll Up/Down

ads

 Bagi Anda ingin membuat quote yang "hemat" dalam sebuah postingan, Anda bisa menggunakan quote yang bisa di gulir ke atas dan ke bawah. Quote dalam bahasa Indonesia diartikan sebagai kutipan atau mengutip. Mengutip dalam sebuah postingan mempunyai banyak cara, tapi disini hanya ingin memberi tahu apa yang pernah saya pelajari. Kalau Anda belum tahu seperti apa bentuk quote dalam kotak yang bisa scroll up/down, Anda bisa lihat contoh dibawah ini

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium augue vel erat auctor scelerisque facilisis id nisi. Nullam vulputate luctus dictum. Aenean consectetur nibh felis, sed tristique quam tincidunt quis. Nam lacinia, diam ut viverra sodales, lorem dui sagittis tellus, vel congue ipsum orci ultricies odio. Duis sed tincidunt enim, quis tincidunt tortor. Sed id ligula massa. Vestibulum nec dui leo. Phasellus auctor lectus eros, vitae consectetur augue feugiat at. Praesent pharetra quam vel lectus mollis, sed cursus diam gravida.
Praesent diam quam, tempus at nibh non, accumsan gravida ex. Donec commodo lectus ut leo vehicula, nec interdum neque aliquet. Nam vel porta enim. Phasellus non porta nulla. Vestibulum lacus lorem, dictum vel interdum at, aliquam eget nibh. Sed et malesuada velit. Etiam venenatis, justo at elementum varius, ex risus ultricies felis, sit amet ullamcorper lorem ex ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum laoreet placerat fringilla. Maecenas semper lacinia dictum. Morbi efficitur ipsum sit amet purus venenatis, eu dictum sapien imperdiet.

Dari contoh diatas saya mengambil dua paragraf dari Lorem Ipsum atau sebuah dummy text yang biasa dijadikan contoh kalimat saat membuat website, dari dua paragraf tersebut Anda bisa melihat kotak kutipan yang bisa sroll up/down. Untuk cara membuatnya cukup mudah, buat saja postingan baru, lalu saat menulis postingan klik "HTML", lalu copy-paste kan script di bawah ini ke dalam HTML postingan Anda:

<div style="background-color: #d8d8d8; border: 1px solid black; height: 200px; overflow: auto; padding: 5px; width: auto;">
MASUKKAN KUTIPAN ANDA DISINI</div>

Penjelasan untuk pengaturan:

• Untuk merubah garis ketebalan, Anda bisa merubah bordernya menjadi yang Anda inginkinkan, diatas saya mencontohkan hanya 1px solid.
• Untuk merubah warna garis, Anda bisa merubahnya sesuai dengan tema warna pada blog Anda. Kode d8d8d8 adalah kode warna untuk warna gray, untuk mencari kode warna, Anda bisa buka Photoshop ataupun semacamnya.
• height: 100px dan width: auto adalah pengaturan tinggi dan lebarnya, Anda bisa sesuaikan.

Kalau Anda sudah copy-paste kan kode script tersebut didalam editor HTML, maka kembali untuk menulis postingan dengan mengklik "Compose". Jika Anda benar memasukkan kode script tersebut maka akan keluar kotak, lalu ketikkan yang ingin Anda tulis didalam kotak quote tersebut yang bertuliskan "MASUKKAN KUTIPAN ANDA DISINI!!". Saat tulisan melebihi ambang batas, fungsi scroll barua akan muncul.

Hanya begitu saja caranya, semoga bisa dipahami.

Share this

Related Posts