Cara Membuat Scroll Responsive Pada Postingan Blogspot/ Blogger

Jika anda membuat postingan yang panjang atau memasang kode HTML yang panjangnya berkilo-kilo meter,,ahehehe. Nahh anda bisa gunakan Scroll pada postingan artikel blogspot/ blogger anda. Bagaimana cara menggunakannya, ikuti langkah-langkah berikut ini untuk melakukan pemasangan.


Langkah 1: Login Ke Blogger
Silahkan anda login dulu ke Blogger kemudian pergi ke Pos => New Pos (buat postingan baru). Ketika anda sudah berada pada posisi kotak postingan yang kosong, di atas ada dua pilihan yaitu Compose dan HTML. silahkan anda klik HTML, lalu pastekan kode di bawah ini.

<div style="background: #443E50; color: white; border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width: 400px;">
Disini Letak Tulisan Anda / Kode HTML Yang Ingin Anda Pasang
</div>

Silahkan anda atur tinggi (height) dan lebar kotak scroll (width) sesuai dengan kebutuhan anda. Di bawah ini adalah contoh penerapan kotak scroll yang telah penulis terapkan.

Ini adalah contoh kotak scroll yang penulis terapkan, meskipun anda menulis sebanyak mungkin postingan anda tidak akan terlihat panjang, hanya scroll nya saja yang bisa anda atur sesuka hati sesuai dengan kebutuhan anda. Cara ini sangat efektif bagi anda yang sering menulis panjang ke bawah, dengan bantuan scroll ini akan menjadi lebih efektif sehingga pembaca tidak perlu kerepotan dan pusing melihat tulisan anda yang panjang karena menghilangkan fokus pembaca.

Dengan scroll ini pembaca menjadi lebih fokus sesui dengan tinggi dan lebar kotak scroll yang telah anda setting sendiri. Silahkan anda berkreasi sendiri dan semenarik mungkin agar anda tidak kehilangan pembaca pa blog anda.

Langkah 2: Cara Membuat Scroll Postingan Responsive
Bagaimana jika membuat kotak scroll di atas menjadi responsive? Caranya sangat gampang, anda tinggal ubah lebar (width) yang tadinya 400px menjadi 100% atau auto. Kemudian silahkan anda Save dan lihat hasilnya. Maka kotak scroll yang telah anda buat tadi sudah menjadi responsive. Lihat contoh di bawah.

<div style="background: #443E50; color: white; border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width: auto;">
Disini Letak Tulisan Anda / Kode HTML Yang Ingin Anda Pasang
</div>

Keterangan Kode:
  • background: #443E50 (warna latar, bisa dirubah sesuai keinginan)
  • color: white (warna tulisan, bisa dirubah sesuai kemauan anda)
  • width: auto (lebar kotak, jika tidak ingin responsive ganti auto jadi 400px atau sesuai keinginan anda)
  • height: 100px (tinggi kotak scroll, jika ingin jadi responsive juga, ganti 100px dengan auto atau 100%)

Gampang bukan??? Jika kurang jelas dan ada yang ingin anda tanyakan tentang artikel Cara Membuat Scroll Responsive Pada Postingan Blogspot/ Blogger, silahkan anda bubuhkan melalui kotak komentar saja. Semoga bermanfaat bagi anda.

Cara Membuat Scroll Responsive Pada Postingan Blogspot/ Blogger Rating: 4.5 Diposkan Oleh: Unknown
Posted by Mas Gugu
Mas Gugu Updated at: 11:42 AM