Tutorial : Link Hover "Box" New Version (Blogskin)

Tumblr_m8z88utcu91qg78wpo1_500_large

Assalamualaikum and annyeonghaseyo. Hello. Hai. Tutor yang kedua utk hari ni. Tieqa nak ajar cara untuk buat link hover berkotak versi blogskin. Tuto ni sesuai kalau korang nak buat list tutorial, freebies, exchange link etc. Contohnya korg boleh tgk dekat bawah ni



1. Dashboard > Template
2. Press Ctrl + f serentak dan cari code </style>
3. Kemudian, copy code dkt bawah ni
a.nav{
box-shadow: inset 9px 0 0px 0 #000000;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:inline-block;
text-align:center;
background: #fff;
color:#000;
width:100px;
border:1px solid #000000;
border-left:20px solid #000000;
width: 200px;
overflow: hidden;
 }
a.nav:hover{
box-shadow: inset 850px 0 0px 0 #FFFFFF;
color: #555;
}
4. Paste di atas code tadi
5. Next, copy code ni pulak
 <a class="nav" href="LINK">TITLE</a><br/>
6. Paste dekat bahagian yang korang nak
7. Preview & save

oren : code warna
hijau : link / URL
merah : tajuk / ayat korang

Credit : Afiqah

8 comment [s]:

Nur Afiqah said...

did u use my tutorial on your blog ? could u put some credit to me ?

Nurul AtiQah said...

@Nur Afiqah : ouh yeah, sorry i forgot -,- already credit u btw :) mianHAE~

Aira Dawson said...

mcm mane nak buat dia sebelah sebelah?

Nurul Aina said...

nak tanya , kalau tutorial ni untuk simple template ada tak?

Nurul AtiQah said...

@Aira Dawson : Buang code < br / >
@Nurul Aina : Ermm takde rasanya~

Lysaaaa said...

yang "link" tu nak letak link ape ea ? :/

Marha Amni said...

Thnaksssssssssssssssssssssssss

Nida Javadd Malik said...

tak bekerja ni :(