#under_header{ margin:10px 0; padding:1%; width:98%; }

Rabu, 11 Juli 2012

Membuat Scroll Teks / Halaman


* Contoh dasar tag:  <div style="....">text yang hendak diberi style</div>
   hasilnya:
                 text yang hendak diberi style
   seperti text styling  lainnya, dengan menambahkan tiga atribut penting: height, overflow:scroll/auto,dan weight.
* Dan ini tag serta atribut yang digunakan untuk contoh di atas:
    <div style="height: 80px; overflow: auto; width: 300px;">text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text</div>
  hasinya: 
text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text
 agar scroll text tersebut menjadi bagus atau indah dan muncul pada posisi sesuai dengan keinginan,  tambahkan atribut-atribut styling yang lain, misalnya: border, margin, padding, text-align, atau background.                  Sebagai contoh: Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenis justify(rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.
Ini tag dan atribut yang digunakan:
        <div style="border: 2px solid lightblue; height: 80px; margin-left: 30px; overflow: auto; padding: 3px; text-align: justify; width: 300px;">
Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.</div>
   hasilnya:
Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.

Praktis nya dibawah ini:
        <div style="border: 2px solid #000000; height: 80px; margin-left: 30px; overflow: auto; padding: 3px; text-align: left; width: 300px;"> (((Yang berwarna biru adalah value atau ukuran border, tinggi, margin, padding, dan luas area. Anda dapat mengubahnya sesuai keinginan.
Yang berwarna merah adalah nilai warna border, anda dapat pula mengubahnya. Untuk panduan code warna hex, bisa dilihat disini.
Text-align memiliki 4 value: left, center, justify, dan right.
Anda dapat mengutak-atik atribut-atribut di atas; bahkan menambah atau menghapus atribut yang tidak diperlukan, kecuali 3 atribut inti: height, overflow, dan width untuk mendapatkan bentuk scroll text blog yg diinginkan.)))</div>
           hasilnya:
(((Yang berwarna biru adalah value atau ukuran border, tinggi, margin, padding, dan luas area. Anda dapat mengubahnya sesuai keinginan. Yang berwarna merah adalah nilai warna border, anda dapat pula mengubahnya. Untuk panduan code warna hex, bisa dilihat disini. Text-align memiliki 4 value: left, center, justify, dan right. Anda dapat mengutak-atik atribut-atribut di atas; bahkan menambah atau menghapus atribut yang tidak diperlukan, kecuali 3 atribut inti: height, overflow, dan width untuk mendapatkan bentuk scroll text blog yg diinginkan.)))

Tag untuk membuat scrool halaman dengan memasukkan link contohnya:
<div style="border: 1px solid #000; height: 60px; overflow: auto; padding: 10px; width: 300px;">
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
<a href="http://toar-tangkere-1215050512.blogspot.com/">Scrool teks/halaman</a><br>
</div>
   hasilnya:
dddddddddd
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)