Tutorial : Cute Bias List


Tumblr_ma1b9yhdng1rt37ego1_500_large

Assalamualaikum and annyeonghaseyo. Sebelum tieqa hiatus ni, tieqa nak update tutor sikit. Tutor ni tieqa credits to AtinVIP. Codes ni dari dia. Don't forget to credit. ThanGYU.


Name

Name

Name

Name
| HOVER THE IMAGE |
1. Copy code dekat bawah ni

<style>
.icon2 {
margin: 5px;
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
border: 3px solid #BBBBBB;
float: left;
}

#bias {
position: absolute;
display: block;
width: 300px;
height: 30px;
top: 30px;
margin-left: -20px;
opacity: 0;
text-align: center;
color: #fff;
background: #7C7C7C;
-webkit-transition-duration: 0.8s;
border-top: 3px solid #BBBBBB;
border-bottom: 3px solid #BBBBBB;
line-height: 4px; text-transform: uppercase ;
-webkit-transform: rotate(-30deg);
font-size: 12px;
font-family:arial;
}

.icon2:hover #bias{left: 20px; top: 60px;
bottom: 5px; opacity: 1;
width: 103px; height: 20px;
line-height: 20px;
-webkit-transform: rotate(0deg)
}

</style>
<table border="0" bordercolor="" cellpadding="3" cellspacing="0" style="text-align: center; width: 520px;">
<tbody>
<tr>
  <td><div class="icon2">
<img src="URLIMG" width="100px" /><br />
<div id="bias">
Name</div>
</div>
</td>

  <td><div class="icon2">
<img src="URLIMG" width="100px" /><br />
<div id="bias">
Name</div>
</div>
</td>

  <td><div class="icon2">
<img src="URLIMG" width="100px" /><br />
<div id="bias">
Name</div>
</div>
</td>

  <td><div class="icon2">
<img src="URLIMG" width="100px" /><br />
<div id="bias">
Name</div>
</div>
</td>
 </tr>
<tr>
 </tr>
</tbody></table>

2. Template designer. Paste dalam page
3. Template classic. Paste dalam HTML
4. Preview & save.

Biru : warna border
Pink : URL gambar
Hijau : nama

29 comment [s]:

Nilly said...

kak, kite pakai ea. da lame carik tuto ni, timekasih. thankGyu~

atiqahjaidin said...

@kaikayy : Pakai la :) yeol welcome

Unknown said...

mkasih! blehla try

Unknown said...

ThankGYU ;) dah lama carik tuto ni!

Najihah said...

Akak kita pakai tau :) ThankYou ;)

Norvanida said...

kita pakai tau :) thanks

Secret Garden said...

TQQ!!!

Aisyah said...

err . akk yang warna pink ngan hijau tu mne ?

Aisyah said...

okey2 da nampak >.<

Lily- said...

unnie try lg..xboleh jgk..nk ngis rase..uwaa..klu ade code table slain dr code nie mmg xleh masuk ea,dongsaeng?

atiqahjaidin said...

@Farhana Lee : Yeke, unnie? tak boleh. sbb nt akan ada lg satu border kan? ermm :/
@All : Welcome all :)

Lily- said...

Ha'ah dongsaeng.Table tu jd kt bwh skli.uar page. :/

BE AWESOME K-POP said...

unnie kalau macam ni nak pakai Untuk Blogskin ade tak ? :'3

EdDynNa ♛ said...

thanxxxxx ! ^^

kim kyuhna said...

Unnie guna ni. :)

Aqilah said...

saya nak pakai ~ Thanks :)

Dang Atikahanum said...

Thanks for the tuto. Dah lama cari. 고마워요 ^^

azwaa_ said...

unnie saya punya kluar tapi knapa kalau scroll bawah baru nmpk .. dia xde kat atas ..

atiqahjaidin said...

@ikaido Eh jadi mcm tu eh? ._. maybe code salah kot.

azwaa_ said...

@AtiqahJaidinsalah macam mana tu ? penat saya buat :'(

Unknown said...

kita guna tau ^^ terima kasih sangat :))

Unknown said...

akk , nk paste code tuh kat ne ??

teenagers said...

nice. saya guna ye. :)

Anonymous said...

Guna ya!! Thanks ^^

Andi Sakinah said...

Kai Oppa Why So HANDSOME .. btw, Thanks Kak

Andi Sakinah said...

Kai Oppa Why So HANDSOME .. btw, Thanks Kak

レイス said...

Thanks kak, saya guna :3

Unknown said...

Hi akak ^^ saya guna yer ? Best XD

sofea said...

akak, macam mana nak centerkan tuto ni dalam page kita?