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

28 comment [s]:

kaikayy said...

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

Nurul AtiQah said...

@kaikayy : Pakai la :) yeol welcome

Nor Husna said...

mkasih! blehla try

Farah Hayati said...

ThankGYU ;) dah lama carik tuto ni!

Najihah said...

Akak kita pakai tau :) ThankYou ;)

Norvanida said...

kita pakai tau :) thanks

Secret Garden said...

TQQ!!!

NuraisYah said...

err . akk yang warna pink ngan hijau tu mne ?

NuraisYah said...

okey2 da nampak >.<

Farhana Lee said...

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

Nurul AtiQah said...

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

Farhana Lee 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

MiSyZ EyManN said...

thanxxxxx ! ^^

kim kyuhna said...

Unnie guna ni. :)

Aqilah Azumi said...

saya nak pakai ~ Thanks :)

D' Atikahanum said...

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

ikaido 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.

ikaido said...

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

Farhana Dalila said...

kita guna tau ^^ terima kasih sangat :))

yasmin hanni said...

akk , nk paste code tuh kat ne ??

teenagers said...

nice. saya guna ye. :)

Irene Valerie 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

RisaN said...

Thanks kak, saya guna :3

Jirongie Wifeu said...

Hi akak ^^ saya guna yer ? Best XD