• Twitter
  • Facebook
  • Google+
  • Instagram
  • Youtube

Monday 16 February 2009

Cara Buat HighLighAll

SElAMat malam para blogger, malam ini saya dapat trik baru dari blog na kang ocim berikut trik nya, semoga bermanfaat.

Assalamualaikum, shubuh kemarin saya melhat salah satu blogspot yang disisi kanannya terdapat sebuah kotak yang bisa discroll atau bisa ditarik kebawah dan keatas. Pada saat itu juga saya ingin membuatnya dan menampilkannya didalam blog saya, cara membuatnya cukup membubuhkan sedikit code didalam widget HTML. Penasaran bagaimana cara membuatnya, nih tutorialnya.


Untuk membuat halaman seperti itu, anda hanya membuat kode seperti ini :

contoh


<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
<a href="http://alamatkamu.blogspot.com/">1.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">2.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">3.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">4.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">5.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">6.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">7.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">9.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">10.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">11.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">12.Test</a>
<br />
<a href="http://alamatkamu.blogspot.com/">13.Test</a>
</div>


Maka Hasil nya seperti ini



masih belum mengerti, dibawah ini sedikit penjelasannya :

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 anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.


Selain kode-kode tersebut, tentu saja anda bisa menambahkan berbagai variasi sesuai dengan keinginan, misalkan backgroundnya berbentuk gambar, fontnya yang berbeda atau apa saja sesuai dengan keinginan anda.

Selamat berkreasi

3 comments:

  1. thanks infoX!!
    karena kami masih pemula, tolong berikan kritik dan saran ke blog kami, di puenshi.blogspot.com
    ^^ trimakasih..

    ReplyDelete
  2. hay.. sob ak rahmawadi bisa gak sobat kasih tau gimana cara pasang mp3/vidio di blog

    ReplyDelete

Contact

Get in touch with me


Adress/Street

12 Street West Victoria 1234 Australia

Phone number

+(12) 3456 789

Website

www.johnsmith.com