Kamis, 07 Oktober 2010

Membuat Kotak Scroll Pada Postingan

Sesuai dengan judul postingan ini yaitu cara membuat kotak scroll pada postingan, apa sih kotak scroll? kotak scroll adalah sebuah kotak yang berfungsi untuk membuat sebuah kotak yang nantinya bisa kita isi dengan gambar, script, atau tulisan sehingga tidak terlalu memakan tempat yang banyak untuk postingan kita, lalu bagaimana cara membuat kotak scroll pada postingan kita, ok, cara membuat kotak scroll pada postingan dapat kita lakukan dengan langkah-langkah dibawah ini:

  • Log in ke blogger sobat
  • Masuk ke Postingan
  • Entri baru
  • Selanjutnya sobat buat postingan lalu masukan kode-kode dibawah ini sesuai yang sobat butuhkan
Kode Pertama

<div style="overflow:auto; padding:5px; width:200px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">src=&quot;http://www.ripway.com/azrut91/azrut91.blogspot.com-green-star.js&quot;
type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</div>


Jika sobat masukan script diatas maka hasilnya akan seperti tampilan dibawah ini

src="http://www.ripway.com/azrut91/azrut91.blogspot.com-green-star.js"
type="text/javascript"></script>


Kode Kedua

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Masukan Script Disini</div>


Jika sobat masukan script diatas maka hasilnya akan seperti dibawah ini

Masukan Script Disini


Kode Ke-3 adalah jika sobat ingin memasukan gambar pada kotak scroll, Kodenya seperti dibawah ini
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 200px; height: 80px; background-color: rgb(255, 255, 255);"><img src="http://farm5.static.flickr.com/4110/5017095648_cb1385b630_s.jpg" /></div>

Maka Hasilnya akan seperti tampilan dibawah ini



Catatan:

Untuk Kode Pertama Sobat Ganti http://www.ripway.com/azrut91/azrut91.blogspot.com-green-star.js dengan tulisan / script sobat

Untuk Kode Kedua sobat ganti
Masukan Script Disini dengan kode script / tulisan sobat

Untuk kode Ketiga sobat ganti http://farm5.static.flickr.com/4110/5017095648_cb1385b630_s.jpg dengan URL image sobat yang akan dimasukan ke dalam kotak scroll

0 komentar:

Posting Komentar