INI CARA MEMBUAT EFEK SCROLL PADA POSTINGAN BLOG! MUDAH DAN TERJAMIN!

Halo!

Apakah kalian bertanya-tanya bagaimana cara membuat efek scroll pada postingan blog? Seperti gambar di atas? Kalian berada di tempat yang tepat!. Tidak Jarang para blogger atau para pemilik blog ingin menunjukkan kesan menawan pada blog atau tampilan blognya. Salah satunya ialah dengan menambahkan efek scroll yang satu ini. Ini merupakan salah satu cara untuk mempermudah pengunjung agar lebih mudah mencari apa yang diinginkan dalam suatu blog, sekaligus hal ini bisa menghemat penggunaan halaman blog kalian. Mari simak cara berikut.

Baca juga :
Breadcrumb Error Kolom "Position" Tidak Ada - Begini Cara Mengatasinya!

Mengenal Efek Scroll pada Blog

Pernahkah kalian menjumpai suatu situs (atau mungkin situs kalian sendiri), dimana memiliki kata-kata yang panjang dalam satu postingan dan membikin tampilan blog seakan akan sangat panjang hanya karena isi postingan? Terlebih lagi bila dilihat dengan versi mobile (hp atau tablet (bila template yang kalian pakai responsive mobile friendly)). Efektifkah seperti itu? Sebenarnya sah-sah saja jika demikian. Namun bagi sebagian orang, tampilan yang panjang sekali biasanya memikin orang males untuk melanjutkan berselanjar di situs tersebut. Kalo sudah gitu gmana dong? Salah satu cara yang bisa kalian terapin ialah dengan menggunakan efek scroll ini untuk postingan situs kalian. Konten (postingan) yang panjang bisa dimaksimalkan dan juga akan memberikan dampak positif pada blog kalian, yakni pada kerapiannya. Scroll atau Scroll box ialah salah satu style atau gaya dari widget yang dikustomisasi menggunakan fungsi scroll.

Efek scroll dalam blogging dapat diartikan sebagai efek geser, entah itu geser ke bawah ataupun ke atas (turun naik). Namun, selain geser ke bawah dan ke atas, fungsi atau efek scroll juga bisa memberikan efek geser ke samping, entah ke samping kiri maupun ke samping kanan. Contoh realnya bisa kita lihat seperti pada halaman (sheet) dalam aplikasi Excel (pengolahan data).

Selain gambar dan tulisan, kalian bisa mengisi scroll box dengan kode script / html atau kode program. Pemasangan efek ini akan sangat bermanfaat bagi kalian yang ingin membuat Linklist / blogroll agar panjang blogroll tersebut tidak membuat loading blog menjadi lambat.

Baca :
CARA MENGHILANGKAN KODE ?m=1 atau ?m=0 PADA URL BLOGGER

Memasang Efek Scroll pada Blogger

Selain dapat digunakan pada widget blog, efek scroll ini juga bisa diterapkan di halaman postingan blog. Sebagai contoh, apabila kalian mengedit postingan berupa daftar dan data, maka fungsi scroll ini sangat baik digunakan. Begini langkah-langkah untuk memasang efek scroll pada postingan blog kalian;

Buka blogger
Kemudian buat postingan/halaman baru
Pilih ikon pensil / pena di samping atas kiri
Pilih "Tampilan HTML"
Setelah itu, kalian bisa copy-paste kan kode berikut ini.

<span><div style="border: 2px solid blue; height: 200px; width: auto; overflow: scroll;">Ketikan tulisan kalian di sini..</div></span>

Pada tulisan warna ungu, itu adalah border atau garis tepi luar yang mengelilingi scroll box. Kalian bisa ganti-ganti. "2px" ialah untuk tebal garis yang diinginkan, "solid" biarkan seperti itu, "blue" ialah untuk warna garis. Bila kalian tidak mau ada tepian atau garis tepi luar itu, kalian bisa hapus kode border: 2px solid blue;

Pada tulisan warna merah, kalian bisa ganti atau sesuaikan dengan yang kalian mau, atau bisa juga dibiarkan saja seperti itu. auto mengartikan bahwa lebar yang ditampilkan ialah mengikuti layar (responsive).

Pada tulisan warna orange, kalian bisa ketikkan isi yang kalian inginkan.

Baca juga :
CARA MENAMPILKAN IKLAN DI ANTARA POSTINGAN ARTIKEL BLOG

Contoh tampilannya adalah seperti berikut ini (sebagai contoh isi tulisan, saya gunakan standar lorem):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus eu felis congue lobortis. Fusce porta ultrices ultricies. Aliquam tempor auctor nisl nec ultrices. Fusce eu magna at velit gravida aliquet. In at quam porttitor, porta turpis eu, ultrices massa. Donec elit magna, venenatis eu dignissim eu, semper in lectus. Proin ut iaculis sem. Donec fringilla euismod nibh, in suscipit dolor. Nunc ut placerat est, vitae sagittis turpis. Nullam sit amet odio augue. Donec fringilla quis justo quis sagittis. Sed vulputate nisl ut ipsum commodo pulvinar. Aliquam mollis ligula non bibendum pulvinar.
Suspendisse fermentum non tellus sed consequat. Duis ultricies mi nunc, sed facilisis arcu lacinia sed. Morbi imperdiet libero eros, nec sodales massa viverra ut. Phasellus in finibus lectus. Aenean at leo nisi. Donec placerat, nisi nec vulputate imperdiet, ex dui eleifend diam, quis malesuada nibh velit vel erat. Morbi quis placerat odio, a tempor sapien. Fusce ac porta est. Mauris tempus, libero id posuere rutrum, justo lacus vestibulum ante, nec ultricies urna turpis non erat. Curabitur tempus suscipit eros id vestibulum. Sed nec sapien lacus.
Curabitur maximus luctus lacinia. In mollis erat eu commodo pharetra. Integer fringilla enim sed velit fermentum scelerisque. Nulla lobortis ante sem, sit amet ornare nisl scelerisque nec. Integer porttitor diam tincidunt nisl tempus, in sodales nisi iaculis. Proin lacinia blandit nisi, sed aliquet nunc bibendum at. Etiam enim nulla, volutpat facilisis justo rutrum, sollicitudin aliquam felis. Morbi congue, arcu quis condimentum dapibus, lorem arcu congue sem, sit amet suscipit felis ipsum vitae nibh. Duis mi ante, vehicula non egestas id, posuere a tellus. Aenean velit nibh, eleifend sed velit vitae, tincidunt dignissim ligula. Vestibulum sollicitudin tortor nec vulputate dictum. Quisque luctus tellus ac risus molestie, sit amet efficitur mauris efficitur. Nullam ultricies nisl et quam viverra efficitur. Proin pretium diam ex, sed scelerisque sem pharetra et. Morbi sagittis placerat quam nec scelerisque.