Membuat Scrool Bergerak Di Dalam Postingan Blog

Ini adalah tutorial lama tetapi tidak ada salahnya untuk diposting karena memang pada dasarnya blog ini aku buat sebagai arsip jika suatu saat nanti aku lagi perlu tetapi kelupaan caranya.

Sebelumnya mungkin kita bertanya-tanya, apa itu scool ?! Untuk pertanyaan tersebut aku juga tidak tau bagaimana cara menjawabnya yang tepat karena aku tidak bisa merangkai kata-kata yang tepat.Tetapi pada dasarnya sebagai gambaran scrool itu dapat menghemat halaman suatu layar tertentu yang dimana banyak terdapat tulisan.

Contohnya pasti sering kita temukan sewaktu kita sedang mengakses internet dari laptop atau pc, jika kita sedang membaca sebuah artikel dan artikel itu panjang sekali kita pasti menekan scool untuk melihat isi artikel itu lebih ke bawah lagi. Atau bagi yang suka buat postingan dari blogger pasti setiap kali akan membuat postingan selalu menemukan scrool. Untuk lebih jelasnya, berikut penampakan sebuah scrool.

Nah... udah pada tau kan apa itu scrool ?! Terkadang kita berpikir sering sekali dilihat tapi nggak tau namanya. He... He... He...

Disini aku akan menjelaskan cara membuat dua scrool yang pernah aku lihat. Aku sendiri tidak tau entah ada berapa banyak jenis scrool itu, tetapi yang akan aku jelaskan hanya dua saja. Aku sendiri menyebutnya 'Scrool Hidup' dan 'Scrool Mati'. Terserah kalian mau ngasi nama apa nantinya.

Kenapa aku katakan scrool mati ?! Ya karena scrool tersebut emang sudah mati kalau sudah dibuat, alias tidak bisa di kutak katik lagi baik itu tingginya atau lebarnya. Berikut contoh scrool mati tersebut.

Ini adalah contoh scrool mati karena sudah tidak bisa lagi di ubah ukuran lebar dan panjangnya oleh si pembaca, sehingga berapa besar yang kita buat ya nantinya pasti akan seperti itu dan tidak bisa diubah lagi baik tinggi ataupun lebarnya oleh sipembaca.

Adapun cara membuat scrool mati tersebut yaitu :

• Masuk ke blogger
• Buat sebuat postingan
• Masukan kode berikut di dalam format HTML. Ingat, dalam format HTML bukan format Compose.

<div align="center">
<div style="border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width: 250px;">
<div align="justify">
- Masukkan Text Disini -
</div>
</div>
</div>

Keterangan :

• <div align="center"> merupakan posisi tabel scrool. Kode "center" karena aku letakkan posisi tabel scrool di tengah. Jika mau meletakkan disebelah kanan, maka masukkan kode "right" dan kiri masukkan "left". Tetapi khusus jika mau meletakkan disebelah kiri, kode tersebut sebenarnya tidak perlu dimasukkan karena defaultnya adalah kiri. Hanya saja jika kita tidak ingin memasukan kode tersebut maka tulisan </div> yang ada di bawah - Masukkan Text Disini - harus dihapus satu.
• style="border: 1px merupakan ukuran tebal border (garis pinggir) yaitu 1px, bisa diganti sesuai keinginan dan solid #eee merupakan warna border juga bisa diganti sesuai dengan keinginan.
• height: 100px merupakan tinggi tabel, bisa diganti sesuai keinginan.
• width: 250px merupakan lebar tabel, bisa diganti sesuai keinginan.
• <div align="justify"> fungsinya sama seperti <div align="center"> tadi tetapi ini menerangkan letak posisi - Masukkan Text Disini -. Bisa diubah sesuai keinginan sama seperti <div align="center">.

Scrool yang lainnya aku sebut scrool hidup karena walaupun scrool tersebut sudah kita buat tetapi pengunjung masih bisa menggeser-geser tinggi atau lebar scrool tersebut dengan cara mengklik bagian sisi bawah tabel, lalu ditahan dan geser sesuai keinginan. Berikut contohnya.

Ini adalah contoh scrool hidup. Karena walaupun sudah dibuat tetapi sipembaca masih bisa mengubah ukuran lebar dan panjangnya sesuai dengan keinginannya dengan cara mengklik bagian sisi kanan bawah, lalu menahan klik tersebut dan menggesernya sesuai keinginan.

Adapun cara membuat scrool hidup tersebut yaitu :

• Masuk ke blogger
• Buat sebuat postingan
• Masukan kode berikut di dalam format HTML. Ingat, dalam format HTML bukan format Compose.

<div align="center">

<textarea class="codecontainer" cols="30" name="S1" rows="10" wrap="virtual">

- Masukkan Text Disini -

</textarea>

</div>

Keterangan :

• <div align="center"> merupakan posisi tabel scrool.
• cols="30" merupakan lebar tabel, bisa diganti sesuai keinginan.
• rows="10" merupakan tinggi tabel, bisa diganti sesuai keinginan.

Tetapi mungkin ada yang berkata, jika si pembaca nantinya bisa merubah ukuran lebar dan tingginya, untuk apa perlunya kita buat cols dan rows tersebut ?!

Si pembaca hanya bisa merubah lebar dan tinggi tabel scrool pada saat dia melihat postingan tersebut. Jadi jika dibuka lagi lain waktu atau browser di refresh maka ukurannya akan tampil seperti yang kita buat.

Demikianlah cara membuat scrool hidup dan scrool mati. Kita mau buat yang mana saja pada dasarnya scrool itu sama yaitu untuk menghemat tampilan suatu layar. Semoga bermanfaat.