Tutorial : Link Hover "Box" New Version (Blogskin)
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{4. Paste di atas code tadi
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;
}
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]:
did u use my tutorial on your blog ? could u put some credit to me ?
@Nur Afiqah : ouh yeah, sorry i forgot -,- already credit u btw :) mianHAE~
mcm mane nak buat dia sebelah sebelah?
nak tanya , kalau tutorial ni untuk simple template ada tak?
@Aira Dawson : Buang code < br / >
@Nurul Aina : Ermm takde rasanya~
yang "link" tu nak letak link ape ea ? :/
Thnaksssssssssssssssssssssssss
tak bekerja ni :(
Post a Comment