Profil

My photo

Blogger, Digital Imaging, Photography
Blog Status: Terjadwal

Saturday, June 25, 2011

Cara membuat text area/scroll box di blog

Not your language? Choose your language here
Saya buat posting ini soalnya ada temen blogger yang mau tau tips gimana cara buat text area/scroll box. Sebelumnya apa itu text area? Text area adalah tempat untuk menaruh tulisan yang ingin dilihat pengunjung. Text area yang ini adalah versi yang berbeda, bukan berfungsi untuk memperlihatkan kode HTML (baca posting Cara Memperlihatkan Kode HTML disini). Sedangkan scroll box adalah text area yang isi scroll. Ya tenang aja teman, saya pasti akan berusaha membantu peace sign. Ok, langsung aja ke langkah2 cara buatnya, jugaan kalau nulis basa basi terlalu banyak juga gak ada yang baca nanti -__- . Ok, ini dia caranya:

1. Kopi kode berikut:
<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>

Info:

- Angka yang diwarnai merah bisa diganti sesuai keinginan, ini berguna untuk mengganti lebar sempitnya text area/scroll box.

-Angka yang diwarnai biru bisa diganti dengan sesuai selera, ini berfungsi untuk mengganti tinggi pendeknya text area/scroll box.

- Angka yang diwarnai kuning bisa diganti sesuai kemauan, ini bertujuan untuk mengganti besar kecilnya garis pinggir text area/scroll box.

- Angka yang diwarnai pink bisa diganti sesuai keperluan, ini bermanfaat untuk mengganti tebal tipisnya garis pinggir text area/scroll box (semakin besar jumlahnya, semakin tipis garis pinggirnya. Bisa2 sampai gak kelihatan garis pinggirnya).

- Sedangkan tulisan center, bisa diganti dengan antara center, left atau right, ini berfungsi untuk membuat text ditengaj, rata kiri atau rata kanan.
  
2. Jadi hasilnya akan menjadi:

ISI DENGAN APA YANG ANDA INGINKAN

Text area/scroll box ini juga berguna sebagai tempat membuat daftar link. Seperti contoh:




Caranya sederhana yang anda perlukan adalah kode text area/scroll box dan kode dasar HTML. Ok silahkan di cekidot ya kode2nya:

<div style="border: 1px solid rgb(153, 153, 153); height: 100px; overflow: auto; text-align: center; width: 250px;">

<a href="http://www.google.com">Google</a><br>
<a href="http://www.yahoo.com">Yahoo</a><br>
<a href="http://www.msn.com">MSN</a><br>
<a href="http://www.facebook.com">Facebook</a><br>
<a href="http://twitter.com">Twitter</a><br>
<a href="http://agungap-blog.blogspot.com">Agung AP's Blog</a>

</div>

Untuk membuat sebuah tulisan berisi alamat link secara manual (Kalau otomatis bisa dipakai dari Blogger, hightlight tulisan yang pengen di kasih link, habis itu klik tulisan LINK yang ada di bar di atas tempat nulis posting, selesai deh *lho kok jadi ngelantur Ngakak (S)). Contohnya seperti ini, tulisan Agung AP's Blog ini saya ingin kasih alamat link http://agungap-blog.blogspot.com. Hasilnya seperti ini Agung AP's Blog. Jadi ini kode HTML yang anda perlu anda hafalkan:
<a href="http://agungap-blog.blogspot.com">Agung AP's Blog</a>

Info:

- Tulisan yang berwarna merah adalah tempat menaruh alamat linknya. Dan harus berisi http:// kalau gak, alamat linknya gak bakal kebaca.

- Tulisan yang berwarna biru adalah tulisan yang ingin dikasih alamat link alias tulisan yang ingin ditampilkan dengan alamat link yang ingin diberikan.

Sedangkan <br> atau <br/> berfungsi sebagai paragraf baru, kalau di Microsoft Word saya bilangnya Enter.

Ok, demikian tips yang saya berikan. Semoga anda mengerti dan bisa bermanfaat. Ok teman, sekarang bayaran untuk tipsnya bring it on adalah Rp. 10.000 hehe bercanda. Sampai ketemu di posting berikutnya.

Save And Share : Cara membuat text area/scroll box di blogTweet This ! (Click On It For Url Shortening) Share On Facebook ! Share On Google Buzz ! Add To Del.icio.us ! Share On Digg ! Share On Reddit ! Share On LinkedIn ! Post To Blogger ! Share On StumbleUpon ! Share On Friend Feed ! Share On MySpace ! Share On Yahoo Buzz ! Get These Share Buttons ! Share On Google Reader ! Google Bookmark ! Send An Email ! Blog Feed !

Subscribe in a reader

Silahkan masukan alamat email anda disini untuk berlangganan artikel dari blog ini GRATIS:

Artikel menarik lainnya:



11 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. kenapa nggak post dari dulu, tapi udah bisa kok. thanks atas bantuannya selama ini

    ReplyDelete
  3. makasi untuk tutorialnya, smoga aja bisa di praktekin di blog ku.
    http://angkasa5.blogspot.com/

    ReplyDelete
  4. makasih gan , semoga nambah lagi artikal nya

    ReplyDelete
  5. Makasih Infonya mas. pas bgt akhirnya aku bs nemuin cara bikin Box kotak model scroll.

    ReplyDelete
  6. Wah berhasil....be my friend mas. Tukaran link ya. Kami di http://naturakonveksi.blogspot.com/...thanks...

    ReplyDelete
  7. keren sekali gan,,
    ini yang saya cari-cari ^_^
    terima kasih banya gan,

    ReplyDelete
  8. makasih gan, tips sangat bermanfaat untuk blog saya......

    ReplyDelete

Kalo mau komen disini inget No SPAM, No PORN, No SARA (Seks, Agama, Ras dan Anatomi), karena komen seperti itu akan saya hapus!
Jika anda ingin mereply/membalas komentar, klik tulisan "Reply" dan tulis komentar anda

Terima kasih atas kunjungannya, semua komentar akan saya hargai :)

Blog ini DOFOLLOW