Text area adalah sebuah area yang dibuat dengan menggunakan kode-kode tertentu yang tujuannya untuk menghemat tempat pada sebuah artikel/blog.
Text area atau scroll box bisa sangat-sangat diperlukan ketika kita akan menuliskan kode HTML misalnya (seperti yang saya buat di artikel tentang How to make Threaded Comment in blog) yang rata-rata sangat panjang. Kalau kita tulis tanpa menggunakan scroll box, bisa sangat panjang jadinya.
Atau kita ingin membuat list nama daerah (kalu iseng) yang mungkin isinya banyak sekali, maka scroll box sangat diperlukan.
Oke, berikut langkah-langkahnya :
1. Kode yang digunakan adalah (dari "<div ...... sampai </div>)
<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 250px;
height: 100px;
text-align: center; ">
ISI DENGAN APA YANG ANDA INGINKAN
</div>
keterangan :
~warna merah menunjukkan ketebalan dari garis tepi kotak. bisa kalian ganti dengan angka yang lebih besar agar garis tepinya lebih tebal
~warna orange menunjukkan warna dari garis tepi kotak, bisa diganti dengan warna yang lain. Untuk acuan kode warna RGB, bisa dilihat disini.
~warna hijau menunjukkan lebar kotak.
~warna biru menunjukkan tinggi kotak
~warna pink menunjukkan letak text yang ada didalam kotak, selain "center", bisa juga digunakan "left" atau "right".
~warna ungu adalah text yang akan muncul didalam kotak nanti
2. Nantinya hasil dari kode tersebut akan menjadi seperti ini :
ISI DENGAN APA YANG ANDA INGINKAN
3. Jika kodenya saya ganti menjadi :
<div style="border: 5px solid rgb(218, 123, 34);
overflow: auto;
width: 350px;
height: 100px;
text-align: left; ">
<a href="http://rumah-dagip.blogspot.com/" target="_blank">My World Is Yours</a>
</div>
4. Maka hasilnya seperti ini :
5. Jika isi dari kotak ternyata sangat banyak (tidak dapat dimuat dalam 1 halaman oleh kotak yang telah kita tentukan ukurannya tersebut). Maka secara otomatis kotak akan menjadi scroll box. dapat juga diberi nomor disetiap link atau apa saja yang akan menjadi isi dari kotak tersebut. berikut contonya :
<div style="border: 5px solid rgb(218, 123, 34);
overflow: auto;
width: 350px;
height: 100px;
text-align: left; ">
1. alamat blog saya <a href="http://rumah-dagip.blogspot.com/" target="_blank">My World Is Yours</a><br>
2. selain blog saya <br>
a. <a href="http://www.google.com" target="_blank">Google</a><br>
b. <a href="http://www.yahoo.com" target="_blank">Yahoo</a><br>
c. <a href="http://www.msn.com" target="_blank">MSN</a><br>
d. <a href="http://www.facebook.com" target="_blank">Facebook</a><br>
e. <a href="http://twitter.com" target="_blank">Twitter</a><br>
3. <a href="http://www.profitclicking.com/?r=gBi4iMLZyQ" target="_blank">Profitclicking</a><br>
</div>
6. Maka hasilnya adalah :
1. alamat blog saya My World Is Yours
2. selain blog saya
a. Google
b. Yahoo
c. MSN
d. Facebook
e. Twitter
3. Profitclicking
2. selain blog saya
a. Google
b. Yahoo
c. MSN
d. Facebook
e. Twitter
3. Profitclicking
7. Jika ingin membuat list namun tidak dengan nomor, dengan icon misalnya, maka diperlukan tambahan kode seperti berikut ini :
<style>.list {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVmy8JffDao02MjdpvvpM89WUVI4a7otOSS7eTgSBeqsNSHnpI0ONa5tE2zW-GtExJ_RA_Uy2pu3OpeLXalX5Y3dRWp5rUKKoFWuIKi7-SAH8yhUEjAYeVnx15oGKimvxxzcOouWXkOvoy/") no-repeat left center;
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px 0px 0px 20px;
}
</style>border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;}</style>
<div style="border: 5px solid rgb(218, 123, 34);
overflow: auto;
width: 350px;
height: 100px;
text-align: left; ">
<div class="list"><a href="http://rumah-dagip.blogspot.com/" target="_blank">My World Is Yours</a><br>
</div><div class="list"><a href="http://www.google.com" target="_blank">Google</a><br></div>
<div class="list"><a href="http://www.yahoo.com" target="_blank">Yahoo</a><br></div>
<div class="list"><a href="http://www.msn.com" target="_blank">MSN</a><br></div>
<div class="list"><a href="http://www.facebook.com" target="_blank">Facebook</a><br></div>
<div class="list"><a href="http://twitter.com" target="_blank">Twitter</a><br></div>
<div class="list"><a href="http://www.profitclicking.com/?r=gBi4iMLZyQ" target="_blank">Profitclicking</a><br></div>
</div>
keterangan
~warna abu-abu adalah kode yang digunakan untuk memberikan icon.
~warna merah pada kode abu-abu merupakan alamat URL dari icon yang akan digunakan, bisa kalian ganti dengan milik kalian sendiri.
8. Maka hasilnya akan seperti ini :
border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;}
Sekian tutorial yang bisa saya berikan mengenai pembuatan text area/scroll box. Kawan-kawan bisa bereksperiment sendiri dengan kode-kode yang lain. Trik ini bisa diaplikasikan pada artikel maupun widget kawan-kawan. Selamat mencoba.
Source : http://www.agungadhyaksa.com/ & http://www.hermanblog.com/
1 comments:
mas gimana caranya itu ngasi FB ngak been jeh..
Post a Comment