Sunday, 22 August 2010

Trik HTML - Membuat Kotak (1)

Diluar udaranya agak sedikit mendung dan atiku lagi mendung juga pokoknya gak semangat dech hari ini. Ne tutorial harusnya dah kelar kemaren sore tapi gara-gara gak sesuai ama yang aku arepin makanya baru aku edit lagi siang ini.

Sebelumnya aku ada sedikit masalah dalam mempostingkan Trik HTML Membuat Kotak (1) kali ini, awalnya dipostingan pengen aku munculin hasilnya sekalian dg kode-kode yang sama. Tapi entah kenapa hasilnya amburadul dan gak sreg aku jadinya, yadah dari pada banyak mikir lagi aku prinscreen aja trus hasilnya seperti yang dibawah ntu, ya lumayanlah kalo cuma buat gambaran aja.

1. Membuat Kotak Dengan Scroll



Kode Disini >>



<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:200px; height:200px; background- border:2px solid #FF0000;">

LETAKKAN TULISAN,KODE ATO GAMBAR DISINI

</div>

Kegunaan :
  • Bisa buat posting Kode-Kode HTML/JavaScrip
  • Bisa Diberi tulisan/gambar

2. Membuat Kotak Tanpa Scroll


Kode Disini >>



<div style="padding:3px; margin:0px 0px 0px 0px; width:200px; height:200px; background- border:2px solid #FF0000;">

LETAKKAN TULISAN,KODE ATO GAMBAR DISINI

</div>

Kegunaan :
  • Bisa diberi gambar kaya ntu/tulisan

3. Membuat Menu Scrolling


Kode Disini >>




<style>
.list {
background: url("http://lh5.ggpht.com/_ILzML2joCeU/TMkYJpr1gUI/AAAAAAAAAIs/00I2Ll7bdI4/1008954qqr71dvokd.gif") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;
}
</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:270px; height:130px; background- border:2px solid #FF0000;">

<div class="list">
<a href=" #"> 1. Coming Soon </a></div>
<div class="list">
<a href=" #"> 2. Coming Soon </a></div>
<div class="list">
<a href=" #"> 3. Coming Soon </a></div>
<div class="list">
<a href=" #"> 4. Coming Soon </a></div>
<div class="list">
<a href=" #"> 5. Coming Soon </a></div>
<div class="list">
<a href=" #"> 6. Coming Soon </a></div>
<div class="list">
<a href=" #"> 7. Coming Soon </a></div>
<div class="list">
<a href=" #"> 8. Coming Soon </a></div>
<div class="list">
<a href=" #"> 9. Coming Soon </a></div>
<div class="list">
<a href=" #"> 10. Coming Soon </a></div>

</div>


Ket :
  • Kode yg berwarna hijau (icon image) bisa diganti yang icon laen atau klik SHOW dibawah ini:

Icon Disini >>



http://lh6.ggpht.com/_ILzML2joCeU/TL1MyINEudI/AAAAAAAAAA8/oSeFG21QISc/6eyd97d6.gif
http://lh6.ggpht.com/_ILzML2joCeU/TL1MyCy8syI/AAAAAAAAABA/cj3-CAajcmM/e84ml170.gif
http://lh6.ggpht.com/_ILzML2joCeU/TMKjosExrkI/AAAAAAAAADk/N3Kj1AFrsWk/dj2ydyxl.gif
http://lh5.ggpht.com/_ILzML2joCeU/TMkYJpr1gUI/AAAAAAAAAIs/00I2Ll7bdI4/1008954qqr71dvokd.gif
http://lh6.ggpht.com/_ILzML2joCeU/TMkYI5ItkmI/AAAAAAAAAIk/hZMg6bGR1ng/644195ea6e65f5i0.gif
http://lh4.ggpht.com/_ILzML2joCeU/TMkX1Vj1aBI/AAAAAAAAAIc/lbBeQoDpTWI/s15/442960qk4wjtzztt.gif
http://lh4.ggpht.com/_ILzML2joCeU/TMkX1f-NXCI/AAAAAAAAAIU/JCJMEXAiTHQ/437716tvik3339uq.gif
http://lh4.ggpht.com/_ILzML2joCeU/TMZKb0R-aBI/AAAAAAAAAHU/MHs6WUvWC1k/2enalj0s.gif
http://lh6.ggpht.com/_ILzML2joCeU/TMkX1CtwMSI/AAAAAAAAAIQ/O_FxbYcoFCU/365653mpvh1aa95w.gif
http://lh6.ggpht.com/_ILzML2joCeU/TMKjomV1upI/AAAAAAAAADg/fQz_HMp4bhM/ch7fh9p0.gif

  • Kode yg berwarna kuning ntu diganti URL link kamu
  • Tulisan "Comming Soon" ntu sa diganti Ussernya

Gimana ada yang berminat gak??
SELAMAT MENCOBA YA n HAPPY BLOGGING YA





Tutorial Diatas Di-Ilhami
Dari
http://kangtiar.blogspot.com/





Comments
13 Comments

13 comments:

dalmahamas 2 September 2010 at 07:52  

hei, mau nanya nih,, kan kalau kita dah selesai buat banner, nanti ditampilan ada bannernya dan kotak html nya, nah gimana cara buad kotak html itu? makasih..

Ratna Sari 2 September 2010 at 21:57  

maksud kamu biar kode banner kmu tampil tho??

ya, kode banner kmu kudu di parse dulu no ke http://www.blogcrowds.com/resources/parse_html.php

trus neg pengen ada kotaknya, paste aja kode(banner km yg udah di parse) ke scrip yang aku postingin diatas.

low gak sesuai ma keinginan kamu bisa diganti
width:200px
height:200px
background-color: #000000
border:2px
solid #FF0000

happy bloging ya, n lam kenal

Ratna Sari 3 September 2010 at 02:40  

<p align="left"><textarea rows="4" cols="15" name="code">


</textarea></p>

coba pakek text areane, ne dari temenku
aku blm pernh coba

dalmahamas 3 September 2010 at 18:04  

makasih y ratna, aku dah bisa,, aku pake cara yang kedua.. hehe

Ratna Sari 3 September 2010 at 18:53  

ow,... iya
cara yg pertama ntu aku pakek klo posting kok
hehehehe

happy blogging ya

rafiq 6 September 2010 at 02:07  

nice artikel....kunjung balik ya..???

dalmahamas 6 September 2010 at 20:07  

hehe sama2.. udah aku follow balik.. trims lg ya..

Ratna Sari 6 September 2010 at 20:18  

ok,... thanks ya
link blogmu aku save
biar silaturahmi tetep terjalin

Ratna Sari 19 September 2010 at 01:07  

Catatan pribadi:

*pemanfaatan auto(1) dan scroll(2) pada overflow

rochmad 30 October 2010 at 06:25  

Hatur ThankYou...! :-)

angga vengeance X-> 11 January 2011 at 01:46  

kk,klo buat icon tampilan di samping bacaan hatml nya yang kyk kk ad api di samping hatml kk,mohon di beritahukan ya kak,pliss,coment nya di blog aku http://angga-vengeance.blogspot.com. http://lh4.ggpht.com/_ILzML2joCeU/TMkX1Vj1aBI/AAAAAAAAAIc/lbBeQoDpTWI/s15/442960qk4wjtzztt.gif

Post a Comment

  © Ratna-Always For You The Transformers by Blog Tips And Trick 2009