Cara Membuat Menu Scroll

Kotak scroll adalah kotak statis dengan banyak isi  yang dapat kita tarik/scroll kebawah. ini akan mengemat tempat dalam blog anda. Isinya bisa berupa judul-judul artikel blog kita, bisa juga diisi dengan gambar. Contonya seperti kotak yang ada di sebelah kanan atas blog ini yang berisi link untuk mendownload modul.



Banyak cara dan model untuk membuat kotak scroll, tapi untuk yang mudah silahkan ikuti cara saya saja.
Kita mulai, Kode untuk membuat kotak scroll yang berisi artikel blog seperti diatas (gbr 1) adalah sbb:

<div style="border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 280px; height: 150px; background-color: #003300;">

<a href="http://gobelan.blogspot.com/2010/02/pasang-readmore-untuk-template-modern.html">1. Pasang Read more Template Baru</a><br />
<a href="http://gobelan.blogspot.com/2010/02/cara-posting-kode-html.html">2. Cara Posting Kode HTML&lt;/a><br />
<a href="http://gobelan.blogspot.com/2010/02/html-colour-code.html">3. Kode Warna HTML</a><br />

dan seterusnya .....

</div>

KET:

1. Kode yang berwarna orange adalah alamat link yang dituju, silahkan ganti dengan link anda.
2. Kode yang berwarna hijau adalah Judul artikel dari link tersebut, silahkan ganti dengan judul artikel anda.
3. Rubah nomer urut sesuai urutan.
4. Jika ingin merubah tinggi dan lebar, juga backgroundnya. Silahkan rubah pada bagian kode ini:
   width: 280px; height: 150px; background-color: #003300;">

Sedangkan untuk menampilkan gambar dalam kotak scroll (gbr 2) adalah sbb:

<div style="border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 280px; height: 150px; background-color: #003300;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu3EwHxuw0dEUjvO5yQs4eYKambp2xP4_B77y93Awq-_19HDFi3erzVafXdjUP-Gp6Q8oCTeNtJtkJaiAhRA63VQYDMBQjm9c5n5Y8oDn31r9UR_me8Oog5TuANS3fQ6d6tHQ14CCR7A4/s1600/sexy.jpg">

</div>

KET:

1. Rubah kode yang berwarna dengan link lokasi gambar anda.
2. Jika ingin merunah tinggi dan lebar kotak, juga backgroun. Rubah pada kode:
   width: 280px; height: 150px; background-color: #003300;

Sekian, Semoga membantu.
Salam Sukses ...

Artikel Menarik Lainnya

Kotak scroll adalah kotak statis dengan banyak isi  yang dapat kita tarik/scroll kebawah. ini akan mengemat tempat dalam blog anda. Isinya bisa berupa judul-judul artikel blog kita, bisa juga diisi dengan gambar. Contonya seperti kotak yang ada di sebelah kanan atas blog ini yang berisi link untuk mendownload modul.



Banyak cara dan model untuk membuat kotak scroll, tapi untuk yang mudah silahkan ikuti cara saya saja.
Kita mulai, Kode untuk membuat kotak scroll yang berisi artikel blog seperti diatas (gbr 1) adalah sbb:

<div style="border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 280px; height: 150px; background-color: #003300;">

<a href="http://gobelan.blogspot.com/2010/02/pasang-readmore-untuk-template-modern.html">1. Pasang Read more Template Baru</a><br />
<a href="http://gobelan.blogspot.com/2010/02/cara-posting-kode-html.html">2. Cara Posting Kode HTML&lt;/a><br />
<a href="http://gobelan.blogspot.com/2010/02/html-colour-code.html">3. Kode Warna HTML</a><br />

dan seterusnya .....

</div>

KET:

1. Kode yang berwarna orange adalah alamat link yang dituju, silahkan ganti dengan link anda.
2. Kode yang berwarna hijau adalah Judul artikel dari link tersebut, silahkan ganti dengan judul artikel anda.
3. Rubah nomer urut sesuai urutan.
4. Jika ingin merubah tinggi dan lebar, juga backgroundnya. Silahkan rubah pada bagian kode ini:
   width: 280px; height: 150px; background-color: #003300;">

Sedangkan untuk menampilkan gambar dalam kotak scroll (gbr 2) adalah sbb:

<div style="border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 280px; height: 150px; background-color: #003300;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu3EwHxuw0dEUjvO5yQs4eYKambp2xP4_B77y93Awq-_19HDFi3erzVafXdjUP-Gp6Q8oCTeNtJtkJaiAhRA63VQYDMBQjm9c5n5Y8oDn31r9UR_me8Oog5TuANS3fQ6d6tHQ14CCR7A4/s1600/sexy.jpg">

</div>

KET:

1. Rubah kode yang berwarna dengan link lokasi gambar anda.
2. Jika ingin merunah tinggi dan lebar kotak, juga backgroun. Rubah pada kode:
   width: 280px; height: 150px; background-color: #003300;

Sekian, Semoga membantu.
Salam Sukses ...

Lanjut Baca. . .>>>