Pada postingan sebelumnya, saya menjelaskan tentang bagamana cara membuat halaman blogger yang isinya kumpulan link media sosial kita (mirip-mirip Linktr.ee gitu) menggunakan script html. Agar lebih ringkas dan rapi maka pada postingan tersebut, script htmlnya saya taruh di sebuah scroll box. Mungkin diantara anda yang tidak sengaja mampir di blog ini ada yang penasaran bagaimana cara membuatnya?
Ngak ada ya? Yaudah, skip aja postingan ini dan baca-baca postingan lainya. Kalau masih mau baca anda bisa klik tombol "CONTINUE READING" dibawah ini.
APA SIH SCRIPT SCROLL BOX ITU?
Scroll kebawah
-
-
-
-
-
-
Ada yang tau ini apa?
Kotak diatas adalah salah satu contoh dari script scroll box beserta penggunaanya.
Simplenya script scroll box adalah salah satu style widget yang berfungsi untuk memaksimalkan tampilan konten yang panjang agar menjadi lebih ringkas dan rapi. Jadi dengan adanya bingkai dan scroll menjadikanya sebagai suatu alat yang bisa mempermudah dalam mempersingkat suatu postingan. Biasanya script scroll box ini digunakan untuk membingkai suatu script panjang pada suatu postingan seperti contoh pada postingan saya sebelumnya.
CMIIW, kurang lebihnya seperti itu.
APLIKASI SCRIPT SCROLL BOX PADA POSTINGAN BLOGGER
So, bagaimana cara mengaplikasikan si script scroll box ini kedalam postingan kita? Berikut akan saya jelaskan bagaimana caranya secara deskriptif, silahkan anda bayangkan sendiri.
1. Klik ikon pensil (atau entah apa itu) di pojok kiri, dibawah judul postingan.
2. Ganti menjadi Html View.
3. Paste kode dibawah ini
<div style="background-color: white; border: 3px solid rgb(238, 238, 238); height: 100px; overflow: auto; padding: 10px; text-align: left; width: 530px;">.KETIK DISINI.</div>
4. Kembali ke Compose View
5. Ganti tulisan .KETIK DISINI. dengan konten anda.
6. Selesai
MODIFIKASI SCRIPT SCROLL BOX
Wait, belum selesai. Mungkin beberapa dari anda punya pertanyaan seperti "bisa gak scrollnya diganti scroll horizontal?", atau "boxnya bisa ditambahkan shadow, dan diganti warna lain gak?", dan pertanyaan-pertanyaan lainya. Maka dari itu, mari kita modifikasi script scroll boxnya.
1. SCRIPT SCROLL BOX DENGAN HORIZONTAL SCROLL
Selain scrolling secara vertikal, kita ternyata bisa menggantinya dengan scrolling secara horizontal. Caranya cukup mudah, anda tinggal copy-paste script dibawah ini. Lalu ganti tulisan .KETIK DISINI. dengan konten anda. Hasil script scroll boxnya juga seperti dibawah ini.
<div style="background-color: white; border: 3px solid rgb(238, 238, 238); height: auto; overflow-x: scroll; padding: 5px; width: auto;"> <p style="text-align: left; width: 120%;">.KETIK DISINI.</div>
2. MENAMBAHKAN SHADOW PADA SCRIPT SCROLL BOX
Kita juga bisa menambahkan efek shadow pada script scroll boxnya. Cukup paste kode box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 2px; diantara kode "background-color: white; border: 3px solid rgb(238, 238, 238); dan height: auto;
Saya pribadi prefer mengubah bordernya menjadi 0px dan menambahkan kode untuk shadow ini. Hasil script scroll boxnya seperti dibawah ini.
<div style="background-color: white; border: 0px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 2px; height: auto; overflow-x: scroll; padding: 5px; width: auto;"> <p style="text-align: left; width: 120%;">.KETIK DISINI.</div>
3. GANTI WARNA SCRIPT SCROLL BOX
Untuk mengganti warna script scroll box, anda cukup mencari kode background-color: white; kemudian mengganti warna white, dengan warna lain. Anda juga bisa menghapus kode tersebut untuk membuatnya menjadi transparan.
Ada lagi? Sepertinya sudah semuanya saya jelaskan disini.
Kalau ada tambahan, masukan, atau apapun itu, anda bisa tinggalkan komentar pada kolom yang telah disediakan dibawah.
Akhir kata, doa baik saya untuk anda yang menyebutkan nama saya di setiap doa baik anda.
Salam.
Posting Komentar