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]:

Afiqah Junizan said...

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

atiqahjaidin said...

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

Unknown said...

mcm mane nak buat dia sebelah sebelah?

Anonymous said...

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

atiqahjaidin 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 said...

tak bekerja ni :(