Cara Membuat Scrollable text box Mudah di blogger.com 2024

Friday, June 21, 2024

Berikut adalah cara membuatnya :

Buka blogger.com dan masuk ke akun anda.
Buat postingan baru dan edit postingan yang sudah ada.
Pilih mode HTML untuk editor postingan.
Salin dan tempelkan kode HTML dan CSS di bawah ke dalam editor HTML.
Kembali ke mode Compose untuk melihat hasilnya dan mengedit konten teks sesuai kebutuhan Anda.

Berikut adalah contoh kode HTML dan CSS yang bisa Anda gunakan di postingan blogger.com untuk menambahkan tempat untuk meletakkan teks yang bisa digeser (scrollable text box) :

<!-- CSS untuk scrollable text box -->
<style>
.scrollable-text-box {
    width: 100%;
    max-width: 800px;
    height: 200px;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    overflow-y: auto;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    font-size: 16px;
    line-height: 1.5;
}
</style>

<!-- HTML untuk scrollable text box -->
<div class="scrollable-text-box">
    <p>Ini adalah contoh teks yang bisa digeser. Anda bisa menambahkan teks sebanyak yang Anda inginkan di sini. Ketika teks melebihi tinggi yang ditentukan, Anda dapat menggulir untuk melihat seluruh konten.</p>
    <p>Paragraf kedua. Ini adalah tambahan teks untuk menunjukkan kemampuan scroll box ini.</p>
    <p>Paragraf ketiga. Anda bisa menambahkan lebih banyak konten sesuai kebutuhan.</p>
    <p>Paragraf keempat. Cobalah menggulir ke bawah untuk melihat lebih banyak teks.</p>
    <p>Paragraf kelima. Ini adalah akhir dari contoh teks scrollable.</p>
</div>

Kesimpulan

Dengan mengikuti langkah-langkah ini, Anda bisa memposting kode HTML dan CSS di blogger.com untuk membuat kotak teks yang bisa digeser. Kotak ini akan membantu Anda menampilkan banyak teks tanpa memenuhi seluruh halaman.