Membuat Scroll Box di dalam Blog

Posted by

Sengaja maupun tidak, saat kita berselancar di blog seseorang tentu kita pernah melihat kotak yang berisi tulisan, kode html atau gambar atau lainnya yang menggunkan fungsi scroll. Itulah yang dikenal dengan istilah "Scroll Box". Selain gambar dan tulisan, sebenarnya kita juga dapat mengisi scroll box tersebut dengan kode script/html yang cukup panjang. Memasang scroll box pada sebuah blog memiliki manfaat yang banyak sekali. Apalagi untuk kalian yang ingin membuat linklist/blogroll agar panjang blogroll tersebut tidak membuat tampilan blog menjadi kurang enak dilihat dan menjadikan loading blog kita semakin melambat. Untuk membuat scroll Box tersebut tidaklah terlalu sulit. Kita hanya tinggal masuk ke menu entri blog, pada entri HTML nya, kemudian memasang kode html berikut ini:

<div style="overflow:auto;width:500px;height:100px;padding:10px;border:1px solid #eee"> ISI TULISAN YANG DIINGINKAN </div>

Contoh scroll box:

<div style="overflow:auto;width:500px;height:100px;padding:10px;border:1px solid #eee">
<a href="http://martabatilmu.blogspot.co.id">UJI COBA 1</a>
<br />
<a href="http://martabatilmu.blogspot.co.id">UJI COBA 2</a>
<br />
<a href="http://martabatilmu.blogspot.co.id">UJI COBA 3</a>
<br />
<a href="http://martabatilmu.blogspot.co.id">UJI COBA 4</a>
<br />
<a href="http://martabatilmu.blogspot.co.id">UJI COBA 5</a>
<br />
</div>


Setelah diterapkan pada blog, akan seperti di bawah ini:

<a href="http://martabatilmu.blogspot.co.id">UJI COBA 1</a>
<br />
<a href="http://martabatilmu.blogspot.co.id">UJI COBA 2</a>
<br />
<a href="http://martabatilmu.blogspot.co.id">UJI COBA 3</a>
<br />
<a href="http://martabatilmu.blogspot.co.id">UJI COBA 4</a>
<br />
<a href="http://martabatilmu.blogspot.co.id">UJI COBA 5</a>
<br />


Keterangan:

  • Ganti tulisan berwarna merah sehingga isi sroll box sesuai dengan yang kita inginkan;
  • Jika perlu, ganti juga ukuran scroll box dengan mengganti angka pada "width:500px dan height:100px";
  • Untuk mengganti batas warna scroll box, ganti kode warna "#eee" dengan kode lain di lihat sini.
Silakan berkreasi dan selamat mencoba!


FOLLOW and JOIN to Get Update!

Social Media Widget SM Widgets




Demo Blog NJW V2 Updated at: 18:16:00

1 komentar: