Membuat Scroll Elemen Blog

Sebelum memulai, sobat bisa lihat terlebih dahulu contoh dari judul posting bangethz kali ini.
Sebagai contoh, lihat di bagian bawah posting ini.. Gimana apakah bro, kamu juga tertarik???
Kalo iya kita langsung aja dech,...
Untuk membuat halaman seperti itu, kita tidak perlu menggunakan banyak kode & tidak menggunakan CSS sama sekali. kamu hanya membuat kode tabel dengan angka & sedikit kode untuk menyesuaikan ukuran dan posisi seperti ini :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
ISI HALAMAN/POSTING KAMU

Cara membuat scroll element

Setelah kamu copy kode diatas, mari kita buat rangkaian kodenya:

<textarea cols="20" name="code" rows="6" style="color: #f2660e; height: 120px; width: 100%;"><div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px">
<ol>
<li></li>
<li></li>
<li></li>
</ol></div>

Sebelum melanjutkan tutorial, bangethz akan menjelaskan sedikit agar kamu bisa menyesuaikan tampilan scroll element ini di blog kamu:
overflow:auto; » kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
width:300px; » adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
height:200px; » adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.
padding:10px; » adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;
border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya, jika kamu tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

Dibawah ini akan bangethz buat kode lengkap dengan mengisi daftar postingan di blog ini:

 <div style="overflow:auto;width:100%;height:200px;padding:15px;border:1px"><ol>
<li><a href="http://www.bangethz.com/2010/08/memasang-css-menu-navigator.html" target="_blank">Memasang CSS menu navigator</a></li>
<li><a href="http://www.bangethz.com/2010/08/membuat-floating-button-di-sisi-blog.html" target="_blank">Membuat Floating Di sisi blog</a></li>
<li><a href="http://www.bangethz.com/2010/08/membuat-teks-berjalan.html" target="_blank">Membuat teks berjalan</a></li>
<li><a href="http://www.bangethz.com/2010/08/memasang-icon-social-bookmark-pada.html" target="_blank">Memasang icon social bookmark</a></li>
<li><a href="http://bangethz.com/2010/08/membuat-blog-menjadi-dofollow.html.html" target="_blank">Membuat blog menjadi dofollow</a></li>
<li><a href="hhttp://bangethz.com/2010/08/teks-area-2-highlight-all.html" target="_blank">Membuat Text Area 2</a></li>
<li><a href="http://bangethz.com/2010/08/teks-area-biasa.html" target="_blank">Membuat teks area 1</a></li>
<li><a href="http://bangethz.com/2010/08/menambah-efek-salju.html" target="_blank">Menambah efek salju</a></li>
<li><a href="http://bangethz.com/2010/07/membuat-read-more-otomatis.html" target="_blank">Membuat read more otomatis</a></li>
<li><a href="http://bangethz.com/2010/07/membuat-kotak-iklan-banner-box.html" target="_blank">Membuat kotak iklan (banner box)</a></li>
<li><a href="http://bangethz.com/2010/07/jika-kita-membuka-suatu-website-atau.html" target="_blank">Mengganti Favicon (logo B)</a></li>
<li><a href="http://bangethz.com/2010/07/memasang-translator-terjemah-bahasa.html" target="_blank">Memasang translator animasi</a></li>
<li><a href="http://bangethz.com/2010/07/membuat-cusor-yang-di-ikuti-teks.html" target="_blank">Membuat cusor di ikuti teks</a></li>
<li><a href="http://bangethz.com/p/advertising.html" target="_blank">Advertising</a></li>
<li><a href="http://bangethz.com/p/hubungi-kami" target="_blank">Contact Us</a></li>
</ol></div>

Seperti inilah susunan dari daftar yang akan kita tampilkan & bangethz bumbui dengan kode target="_blank " untuk membuka tab baru saat link di klik. Silahkan dihapus jika tidak ingin memakainya.

Subscribe My Channel

Saling berbagi ilmu itu indah.